Syntax - Tasty Web Development Treats · Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

977: We built a CSS Challenge platform

February 9, 2026·41 min·3 clips

Wes reveals why their CSS battle platform lets you code in your own editor instead of a web text box.

Scott Tolinsky and Wes Bos spent roughly two weeks building a custom CSS battle platform to host the MadCSS tournament, a bracket-style competition featuring 14 prominent web developers including Kevin Powell, Adam Argyle, Cassidy Williams, Chris Coyer, Kyle Cook (WebDev Simplified), Ben Hong, Jason Lengstorf, and others. A CSS battle gives competitors a target image or HTML/CSS layout and challenges them to reproduce it as accurately and quickly as possible. The platform shows your code, the target, a diff view, an overlay, and your opponent's progress in real time — designed to create psychological pressure during competition. The standout architectural decision is local file system access: competitors open a folder on their own machine and code in their preferred editor with all their shortcuts and completions, while the platform syncs the file content in real time via ZeroSync. ZeroSync is a library that provides real-time sync with a Postgres backend, originally described as "local first" but more accurately characterized as a fast sync layer. Scott built custom Svelte bindings for ZeroSync and uses Drizzle ORM for schema management; a Drizzle-to-Zero schema translation package eliminates redundant schema definitions. The sync server runs on Fly.io (chosen for speed), while the SvelteKit app itself runs on Cloudflare Workers via the Cloudflare adapter. The CSS diffing system — comparing competitor output to the target pixel-by-pixel — was the most technically complex component. Scott uses his own CSS utility framework, Graffiti, for the UI, though Wes overrode many of the design tokens due to time pressure. The platform also implements pure CSS tabs using the details/summary elements with no JavaScript, anchor positioning for tooltips, and popover for overlays.

Listen to the show on

Apple Podcasts Spotify

Play clips from this episode More from Syntax - Tasty Web Development Treats