Inspiration
Dress to Impress is a Roblox game that took the internet by storm, amassing billions of visits since its 2023 launch. The premise is deceptively simple: everyone gets the same blank avatar, a theme is announced, and players have a few minutes to style their character before strutting down a runway to be voted on by their peers. The whole thing is timed, competitive, and oddly compelling.
We are developers. We do not have fashion senses. But we do have CSS.
That parallel hit us hard: what if we took the exact same format and swapped the runway for a browser, and the outfits for stylesheets? Every developer has wrestled with a blank CSS file staring back at them. Why not make that a competitive sport? CSS to Impress was born from the idea that creative coding deserves the same kind of fast, social, multiplayer energy that made Dress to Impress a phenomenon.
What it does
CSS to Impress is a multiplayer game where developers compete to style the same HTML structure using only CSS. All players in a session receive an identical, unstyled HTML skeleton. From there, it is a race to write the most impressive, creative, or just plain weird styles you can before the timer runs out.
Players write CSS live in a Monaco Editor embedded directly in the browser. Changes render in real time so everyone can see their work taking shape. At the end of each round, players can see what everyone else came up with from the exact same starting point and vote on who did the best.
How we built it
The frontend is built with React, TypeScript, and Vite, with Socket.io-client handling real-time communication between players. The Monaco Editor is embedded for the CSS editing experience, giving players proper syntax highlighting and a familiar environment rather than a plain textarea.
The backend runs on Node.js and Express, with Socket.io managing all the multiplayer state: room creation, player connections, timer synchronisation, and round progression. We used Boring Avatars to generate player avatars and Lucide React for iconography. Sound effects came from Pixabay.
Shoutout Claude Code and Cursor for the help.
Challenges we ran into
Real-time synchronisation is one of those things that looks straightforward until you are actually in it. Making sure all players in a room see a consistent game state, particularly around round transitions and the timer, required more careful thought than we initially gave it. Edge cases around players joining mid-round and disconnecting at inconvenient moments kept finding us.
Accomplishments that we're proud of
I think the idea itself is what we are most proud of. We're offerring a format where developers can learn and practice CSS not through tutorials or exercises, but by playing against their friends. There is something that clicks when you see five people given the exact same HTML and watch them all go somewhere completely different with it. It makes visible something that is usually invisible in coding, which is that there is no single right answer, and that creativity is just as much a part of this craft as correctness.
What we learned
We came away with a much deeper appreciation for WebSocket-based architecture, specifically around what it takes to keep shared state consistent across multiple clients. We also learned that giving developers a constrained creative challenge, one HTML structure, one timer, no external libraries, produces a genuinely interesting range of outcomes. Constraints breed creativity. That is the whole game.
What's next for CSS to Impress
If we had more time we'd definetly want to implement maybe a way for the game's host to import their custom HTML instead of using our pre-selected templates. Or a gallery mode where finished submissions are preserved and shareable, and potentially a ranked mode for players who want to take their digital dress up wars more seriously.
Log in or sign up for Devpost to join the conversation.