A collaborative pixel art canvas with real-time drawing, multiple grid sizes, and a full suite of creative tools.

Day 26. I wanted to build something collaborative, something where people could actually create together in real time. So I went with a pixel art canvas.

The Prompt

The starting point was simple:

> "Build a collaborative pixel art canvas where multiple users can draw together in real time."

Try it out yourself here

How It Was Built

Watchfire broke this down into 13 tasks, which is a lot for a single day project. But pixel art editors have a surprising number of moving parts once you start thinking about all the tools people expect.

The first few tasks covered the foundation: setting up the canvas with Firebase Realtime Database for sync, adding selectable grid sizes (16x16, 32x32, 64x64), and building a 32-color palette with a custom color picker. From there it branched into the actual drawing tools: pen, eraser, and flood fill.

Then it just kept going. Undo/redo support. A symmetry mode for creating mirrored designs. Shape tools for rectangles and lines. Adjustable brush sizes. Canvas templates so you don't have to start from scratch every time. A timelapse playback feature that replays how a canvas was drawn. An activity feed showing what other users are doing. A selection tool for moving and copying regions. A 2-layer system with foreground and background layers. And finally, export options for getting your art out as PNG in various sizes.

Thirteen tasks. That is a full-featured drawing application.

What I Got

The landing page already set the tone. It shows starter templates (heart, sword, smiley, tree) and a gallery of recent canvases that other users have created. You can jump into any of them or create a new one from scratch.

Along the top you get the full toolbar: pen, eraser, fill, line, rect, circle, and selection tools. On the left there's the expanded color palette with the custom picker. On the right there's the layer panel with foreground and background layers, each with visibility toggles.

Drawing feels responsive. Each pixel click syncs through Firebase so anyone on the same canvas URL sees changes immediately. The grid lines help you stay precise, and the zoom level adjusts well across different grid sizes.

The timelapse feature is one of those things I didn't expect to work this well. It records every pixel placement and can replay the entire drawing process from start to finish. You get playback controls and speed options.

...

---

Read the full article →