Whiteboard: The Biggest Tool in the Batch

This is the most feature-dense tool I've shipped in this batch — pen, eraser, lines, rectangles, ellipses, arrows, text, multiple independent layers, pasted images, and PNG export — and it's also the one where the underlying idea is the simplest to state: a free-form canvas for the kind of quick visual thinking a physical whiteboard normally handles. Sketch an idea, diagram a plan, mark up a pasted screenshot.

Layers turn a drawing into something you can actually restructure

A single flattened canvas is the easier thing to build, and it's a real limitation the moment you want to move one element without disturbing everything drawn near it. Layers mean each one is tracked and rendered independently, which is what makes it possible to draw a diagram on one layer, add annotations on another, and reorder or hide either independently. The technical cost of that is real — every tool has to operate against whichever layer is currently active without leaking changes onto others, and the final export has to correctly composite every visible layer back into one flattened image in the right stacking order. It's meaningfully more architecture than a single-canvas drawing tool needs, and it's the reason this tool can support pasting an image in and sketching over it without permanently destroying the original underneath.

Shape tools needed live preview, not commit-then-see

Drawing a rectangle or an ellipse has to show the shape forming in real time as you drag, not just appear once you release the mouse. That means every shape tool renders a live preview on top of the canvas during the drag gesture, separate from the actual committed drawing underneath, and only bakes the final shape into the real layer content on release. Skipping the live preview and only rendering on release would make positioning a shape correctly nearly impossible — you'd be dragging blind, with no feedback about where the shape's edges actually land until it's already too late to adjust without undoing and retrying.

Reordering layers by dragging had to update the render order instantly

Dragging a layer row to a new position in the panel needs to immediately change which layer visually sits on top of which on the actual canvas, not just reorder a list in the sidebar while the drawing itself stays visually unchanged until some later refresh. That meant the layer panel's order and the canvas's actual compositing order had to be driven by the exact same underlying data, checked and re-rendered on every reorder, rather than treating the sidebar as a separate display concern that happens to usually match what's on screen. Any drift between "what the panel shows" and "what the canvas actually renders" would make layer reordering feel unreliable in exactly the moment someone's trying to fix which element is covering which.

Undo across multiple layers is not the same problem as undo on one canvas

A simple single-canvas undo stack just needs to remember previous canvas states. With multiple independently editable layers, undo has to track which specific layer an action affected and restore that layer without disturbing the others, since a global undo that reverts every layer back to some shared previous snapshot would undo far more than the specific action a person just took. Getting this right meant building undo around discrete, layer-aware actions rather than periodic whole-canvas snapshots, which is a meaningfully different and more involved design than what a single-layer drawing tool would ever need to think about.

Pasting an image in had to feel as natural as pasting text

Ctrl+V drops a pasted image directly onto the board as its own layer, and making that feel instant and obvious took more than just listening for a paste event. The pasted image has to land at a sensible position and scale rather than appearing off-canvas or absurdly oversized, it needs to become its own independently movable layer rather than getting baked permanently into whatever layer happened to be active, and it has to happen without requiring any explicit "insert image" menu action first. The whole point of supporting paste directly is removing the extra steps a formal file-upload flow would otherwise require — a screenshot copied from anywhere should be annotatable within a second of landing on the board, with zero intermediate dialog standing between the two actions.

Export had to composite correctly, every single time

Downloading or copying the finished board as a PNG means flattening every visible layer, in the correct stacking order, into one final image — invisible layers skipped, layer opacity respected, everything composited exactly the way it renders live on screen. Any mismatch between what's visually shown while editing and what actually gets exported would be a serious trust problem for a tool whose entire output is that final image. I tested export specifically against boards with several overlapping layers and a hidden one in the mix, since that's exactly the scenario where a compositing bug would be both most likely to occur and least likely to be caught by a quick glance at a simple one-layer test case.

This is the biggest single tool I've shipped in this whole batch, and it doesn't feel that way to use, which I'll take as a good sign. All the layer architecture, the live shape previews, the layer-aware undo stack — none of it is meant to be visible. It's meant to disappear behind "draw something, sketch over a screenshot, export it," the same way the best-built parts of every tool in this batch are the ones nobody will ever think to mention.

It's a fitting note to end this batch of web tools on. Whether it's a four-function calculator, a duplicate-line checker, or a full layered drawing canvas, the actual craft in every one of them turned out to live in the same place: the parts a person never consciously notices, right up until the one time they would have noticed them being wrong. If today's whole batch has a single lesson worth carrying forward, that's probably it.