HAMY

One Million Checkboxes - Globally Synced Data with HTMX

Date: 2024-10-14 | create | tech | projects | one-million-checkboxes | htmx | fsharp | giraffe |

Today I'm releasing One Million Checkboxes.

What is it?

One Million Checkboxes is a website that displays one million checkboxes. When you check / uncheck a box it gets synced to everyone else on the website.

Why did I build it?

I previously built One Thousand Checkboxes as a proof of concept for building globally distributed data with HTMX.

My inspiration was the original One Million Checkboxes (now archived) so eventually I knew I wanted to scale it to one million. Now I have.

How was it Built?

I used a similar tech stack to One Thousand Checkboxes - in fact I cloned it as a starting point. The stack itself is basically CloudSeed - my project boilerplate for spinning up F# webapps quickly.

  • Frontend: SSR HTML + HTMX using Giraffe.ViewEngine as an HTML DSL
  • Backend: F# + Giraffe
  • Data: In Memory
  • Hosting: Docker container on VPS managed with Coolify

For more on these technologies and how I use them:

There were a few strategies I used to manage the bottleneck that is HTMX's HTML payload sizes. Usually this isn't a problem but since I'm constantly polling it can quickly blow up to unreasonable bandwidth usage.

In 1000 Checkboxes each grid reload cost about 5kb so reloading everything for one million checkboxes would quickly lead to 5mb for each reload which is unreasonable.

So I did a few things to minimize this:

  • Improved caching - Allows backend to do less work
  • Split checkboxes into 1000x1000 grids w independent reloads - so we can reload only parts of the grid
  • Grid lazy loads - so it only reloads the parts that are needed based on what you're looking at
  • Moved to VPS with unlimited bandwidth - to avoid bandwidth-related runaway cloud costs

I'm considering making a future post doing a deep dive on some of these strategies so let me know if you're interested in that.

Next

Overall I've had a good time experimenting with checkboxes and HTMX. Some have suggested SSE to scale further but honestly I don't think that's the bottleneck and currently scalability / latency isn't much of a concern so may pass.

Potentially may scale to one billion checkboxes just to do it but that's for another time.

CTA: Go check some boxes! onemillioncheckboxes.xyz

If you liked this post you might also like:

Want more like this?

The best / easiest way to support my work is by subscribing for future updates and sharing with your network.