The 4KB Demoscene Challenge — Vibe Coding at Tweet-Length
A complete interactive web app in 4096 bytes. No frameworks, no CDN, no excuses. Then do it again at 8KB and account for every byte.
Why this exists
The average landing page ships more JavaScript than the original Doom shipped total. We have normalized megabytes of framework, polyfill, and telemetry to render what is, structurally, a form and a list. The 4KB constraint is a forcing function. It strips away the cargo cult and asks a simpler question: what can a browser actually do when you stop bringing your own runtime? The demoscene answered this question for decades on bare metal. The browser is just the new bare metal, and the model is fluent in every trick the spec allows.
What you get back
- A single self-contained HTML file under 4096 bytes that runs offline and does something real — a game, a synth, a visualizer, a tool.
- An 8KB sibling version, annotated line by line, showing exactly what each additional 4KB bought you.
- A byte-by-byte diff explaining the trade: which features required new code, which required new data, which required loosening the minifier.
- A short post-mortem on what had to be cut to hit 4KB and why the cut was acceptable.
- A reusable template — the structural skeleton that survives both budgets — so the next 4KB build starts from a known floor.
When to reach for this pattern
Use this when you are teaching someone what the platform actually provides, when you are setting a performance budget for a real product and need a calibration exercise, when you are building an embedded widget that must load inside a hostile host page, or when you are running a demo on a conference Wi-Fi network that will betray you. The 4KB challenge is not about shipping 4KB to production. It is about knowing where the floor is so you can tell when your stack is sitting six stories above it for no reason.
Build me a complete interactive web app — a game, tool, anything — that
fits in a single self-contained HTML file under 4KB. No frameworks, no
CDN imports, no external assets. Then build it again at 8KB and tell me
what each extra byte bought. Account for every line. Treat whitespace
as a luxury good.Paste this into Claude, Cursor, or Copilot. Change one thing that matters to you.
What I learned shipping it
- A hard byte ceiling is the cheapest creativity engine you can install — the model stops reaching for React and starts reaching for math.
- 4KB exposes the lie at the center of modern frontend tooling: 90% of what ships is ceremony, not capability.
- Forcing the model to justify the jump from 4KB to 8KB is how you find out which features are actually load-bearing and which were just habit.