Reverting back to a document-based web with PDFs

Posted January 18, 2022

On Sunday, January 16th, I made wordlepdf.com, a remake of Wordle…

…expect it uses PDFs.

Okay why though?

In a world filled with monopolized app stores, micro-transactions, and horrible ads, it's really refreshing to see a simple web app getting all this traction.

It reminds me of a simpler world where free indie web projects defined the web instead of being their exception.

In the spirit of all that, I decided to create Wordle PDF.

A document-based web

AJAX and JavaScript gave us non-page-reloading interactivity making the web a platform for creating applications as well as a means to serve information.

PDFs, on the other hand, take all of this away, literally reverting us back to a document-based web.

(see what I did there 😅)

You can embed links in PDFs but that's about it.

Dynamically creating PDFs with React

The main piece of technology that enabled this project is @react-pdf/renderer, which is a project that has its own React bindings and its own React renderer to create PDFs dynamically with React.

Using @react-pdf/renderer feels very similar to using React Native because instead of using <div />s, you're using <Document />s and <View />.

@react-pdf/renderer uses yoga — React Native's layout engine — to let you using flexbox to position pieces of text in of PDFs via CSS-like properties.

Making Wordle PDF

Put it all together and you get Wordle PDF.

Wordle PDF:

  1. uses @react-pdf/renderer to dynamically generate a PDF with dynamically generated links
  2. clicking each link advances the state of the game
  3. the state of the game is serialized into a state string
  4. that state string is parsed and processes and sent to all the components of Wordle PDF

The end result is a super slow "app" that doesn't have any animations and requires a full page reload in order to see the next screen, just like the good ol' days.

Play it here. (This uses the same exact words as the original Wordle!)

See all the source code at github.com/ricokahler/wordlepdf.com