How I Built Pictures by Numbers: A Paint-by-Numbers Factory That Runs in Your Browser

Custom paint-by-numbers kits are a real business — upload a photo, someone converts it into a numbered outline, and a canvas shows up at your door. But on most of these sites, the conversion happens after you pay. You order blind and hope the result looks like your dog.

I built Pictures by Numbers the other way around: the entire generation engine runs in your browser, live, before you spend a dollar. Upload a photo, watch it become a numbered canvas in seconds, tweak it until you love it, then check out.

What It Does

• Upload any photo — drag & drop a JPG, PNG, or WebP
• Live editor — pick how many paint colors (6 to 24, or custom), how fine the detail gets, borders, labels, and more
• Real-time preview — compare the original against the numbered design, with a 3D canvas view
• Three canvas sizes — Small (12×16"), Medium (16×20"), Large (20×24"), from $49
• The kit ships to you — numbered canvas, acrylic paints matched to your design, brushes, a full-size reference card, and practice sheets

The Fun Parts

Rust + WebAssembly does the heavy lifting — Turning a photo into paint-by-numbers is real image processing. Doing that server-side would mean upload latency, queue management, and paying for compute on every preview. Instead, the engine compiles to WebAssembly and runs right in the browser. Every slider change re-generates the design on the visitor's own machine — the site even shows you the processing time after each run.

Tuning knobs that make sense to humans — The underlying algorithm has plenty of technical parameters. The editor translates them into questions a customer actually has: How many paints do you want to manage? Should sections be big and easy or fine and detailed? Fewer colors for a relaxing Sunday, more colors to keep photo detail.

Preview fast, print sharp — The preview is tuned to feel instant while you're designing, and the version that goes to print is generated at full resolution from your original upload. You design against a fast preview; the printer gets the crisp version.

Designs that survive a refresh — Your work-in-progress design persists locally, so closing the tab doesn't lose the canvas you spent ten minutes tuning. Come back tomorrow and the checkout button is still waiting for you.

The Stack

A Rust engine compiled to WebAssembly, a React + TypeScript front-end, Stripe for checkout, hosted on Railway.

Why Client-Side Was the Right Call

The instant feedback loop is the product. When someone uploads a photo of their golden retriever and three seconds later sees a numbered canvas — then drags a slider and watches it re-draw — that's the moment they decide to buy. No spinner, no "we'll email you a proof." The browser does the work, the preview is honest, and what you see is what gets printed.

Try It

Go to picturebynumbers.shop, upload a photo, and play with the editor — generating designs is free and weirdly addictive. Kits start at $25.

-Mike

Built with: Rust, WebAssembly, React, Stripe, Railway