Meta-analysis of the source code

First let's take a look at what static assets (HTML, images and JavaScript bundles) are loaded when the Wordle page loads (see image below). There is not a lot going on! There is the page markup (HTML with internal CSS in a <style> element); two favicons; a few Google Analytics scripts; and finally the main compiled JavaScript bundle that powers the game. This is the JavaScript bundle we will dive into!

Some application-level questions:

Q1) How does Wordle evaluate your guesses?

All solutions are stored in a big list in the JavaScript code (on line 1118 to be precise). The list is in plain text and in consecutive order! You can see today's answer, followed by tomorrow's, and the day after that, etc. There are 2315 solutions in total, starting from 19th May 2021. So as it currently is, Wordle will explode on 20th September 2027 💥

The source code actually contains two lists of words. The first is the list of daily solutions. The second is a list of valid words which will never be a correct solution. In total there 12972 possible words in the two word lists. If your guess is not in either of the two lists, then it is deemed an "invalid word".

Hot recommendation: don't ruin the game for yourself by looking at the solution list!

Q2) Are there any client-to-server communications?

No! Wordle is completely client-side. It requires no server-side evaluation of solutions and no fetching of new data. Even once you successfully solve a Wordle, there is no communication to a backend. It seems Wordle is not collecting statistics on anyone's guesses! 🙅‍♂️📊

This really surprised me - but it is actually very smart and cost-effective. It also answers one of the big questions I had: how much does it cost to host Wordle?

The current traffic estimate for Wordle is 2 million page views per day. Hosting a backend webserver globally would be expensive. So instead Wordle simply distributes the entire JavaScript bundle via a cheap, global Content Delivery Network (CDN). FYI Wordle uses Cloudflare; we can tell by looking at the response headers for the static assets.

Furthermore, these static assets are cached on the user's browser, meaning users only need to download it periodically. The cache-control response header tells us the cache expiry is set to 4 hours.

Q3) Where is application state stored?

Application state is stored in your browser's local storage. That is why you can refresh the page, and not lose your previous guesses. It is also where your running statistics (like streaks) are stored 💾

As you make guesses, the JavaScript code updates the gameState object with a simple plain-text history of your guesses, and the corresponding evaluation ("correct", "present", or "absent"). The current day's solution is also saved in the gameState object each day.

At the start of each day, the gameState object in Local Storage is reset.

Q4) How does the game know when to stop showing today's Wordle, and start showing tomorrow's?

Tomorrow's word comes into play at midnight local time. The JavaScript code rounds your local time to the last 00:00am (midnight). It then calculates how many days (or 86,400,000 milliseconds) have passed since an arbitrary base-date (19th May 2021). This number of days is then used as the index when selecting today's solution from the solution list 🕛🕧🕐🕜🕑🕝🕒

This elegantly ensures that the word changes at midnight local time, regardless of time zone. The lack of a backend webserver simplifies this mechanism, by allowing users in different time zones to have different experiences. For example, I will see today's word 20 hours before people in Hawaii (and that's okay!).

Wrap-up

Wordle is a great game. My family and I are having a lot of fun with it.

Diving into the source code showed me that you can make something fun and immensely successful while still being simple. In fact, often the simplicity facilitates its success!

Kudos to the creator!