'Trillion Characters' is a realtime collaborative experiment built with Datastar.
Click anywhere on the canvas to place your cursor and start typing. You can see other people's cursors typing as well.
This page uses no clientside JavaScript except for Datastar & Datastar attributes.
Datastar is a lightweight JavaScript framework (11kB) with a completely radical architecture:
Compared to other JS frameworks (e.g. React, Vue, Svelte), Datastar eliminates state and logic on the client-side.
Instead, all interactive logic is moved to the backend. Page updates are streamed to the client as server-rendered templates over a persistent SSE stream.
This is a bit like streaming a movie, except the movie is HTML and you receive new content from updates and UI interactions.
The client's browser is effectively reduced to being a rendering viewport only capable of displaying raw HTML, yet still offering full interactivity.
Server-sent events (SSE) are not a special type of connection. Instead, it's just an HTTP response type. Sending full page updates may raise concerns about network bandwidth. However, use of SSE streams enables compression across an entire session as compared to mere individual requests. Using the browser's built-in Brotli compression, extra bytes are sent over the wire only if the content is changed. This achieves total compression ratio's upwards of 50-4000x, exceeding what is commonly attainable from gzip'ed responses. Under the hood, a sophisticated DOM-morphing algorithm is used to make updates performant and seamless.
Traditional web servers are based on REPR (request endpoint response). Instead, 'Trillion Characters' uses Query Command Request Segregation (CQRS), an architectural pattern that turns any program into realtime and collaborative by default. Reads & writes are separated. Commands from all clients (e.g. typing characters) are queued and written by the server on a fixed update rate. The page is rendered in HTML templates as a function of the current state: `f(db state)`. The render is customized for each client to apply chunk-based culling, sending only the chunks visible to a given client.
Character are stored as 45x45 chunks in LMDB, a very fast memory-mapped key-value store database. LZ4 compression is applied on a chunk-basis to eliminate whitespace and repeating characters. Chunk coordinates are used as keys and stored in Z-order with morton codes, translating locality from 2D into 1D space for the sorted order of the storage B-tree.
Reads and writes to the databases are full ACID with no relaxations. Every character you see on the canvas has been atomically saved to disk.
This application runs on a €5,52 VPS in Germany, on the cheapest public cloud tier available.
Made with 🚀 by Elias de Jong
https://github.com/eliasdejong
v0.1.11 (May 30th, 2026)