The blog where every diagram is a React toy you can grab

Hover the little 3D avatar on the homepage and it springs, a quick squash and settle, before going back to sitting cross-legged in its yellow hoodie. Josh Comeau named that animation "boop" after a poll, and it is the smallest hint of what the whole site does differently.

joshwcomeau.com is a blog about CSS and React where the explanations are not screenshots of code, they are the code, running. His interactive guide to Flexbox lets you drag the controls and watch the boxes rearrange in real time, because the diagram is a live component and you are steering it.

The stack under the whimsy

The thing that makes this possible is MDX, a version of Markdown that can import React components, so a paragraph of prose sits directly beside a working widget and the widget is the illustration. Comeau lays out the machinery himself in How I Built My Blog, v2, his September 2024 rewrite: Next.js on the App Router, MDX v3 handled through next-mdx-remote, styling in Linaria so it compiles down to zero-runtime CSS Modules, code blocks highlighted by Shiki, live React playgrounds via Sandpack, MongoDB behind the dynamic bits.

The scale is the receipt. The blog is over 100,000 lines of code before counting a word of content, TypeScript throughout, with Algolia driving the search box, and the rewrite meant migrating roughly 1,500 styled-components to the new styling setup. He has been building the site in public since the first version in 2017, and the writeup is refreshingly plain about what fought back, MDX migrations most of all.

The boop itself gets a full tutorial article, and it holds the sentence that explains why the site feels the way it does: "Instead of using the Bézier curves that CSS provides, it'll use spring math instead." The motion runs on react-spring, a physics model with tension and friction knobs rather than fixed CSS timing, which is why the avatar feels like a real object settling instead of a linear fade.

Why widgets beat diagrams

A static diagram shows you the answer. A widget you can break shows you the rule, because you get to find the edge where it stops behaving. That is a far harder thing to build, six figures of code harder, and a much better thing to learn from.

If you want the trick in your own writing, MDX's getting-started docs are the trailhead, with integrations for most bundlers and frameworks, and Comeau's v2 writeup doubles as the advanced course. CSS pushed past its job description is a running theme in these sightings: an entire illustration drawn with one div is what that looks like with no JavaScript at all.

More explanation you steer instead of read: a mechanical watch taken apart gear by gear.