Turn any image into a printable paint-by-numbers artwork.
This project is an open-source, browser-based paint-by-numbers generator built with modern web technologies. It allows you to upload an image, reduce it to a configurable color palette, and generate clean, printable templates with numbered regions and an optional painted preview.
This project is inspired by the open-source repository:
https://github.com/drake7707/paintbynumbersgenerator
The core concept comes from there. This project builds upon that idea with a modern web stack, improved SVG generation, and a better overall user experience.
- Upload any image
- Adjustable number of colors
- Automatic region (facet) detection
- Merge small regions for cleaner results
- High-quality SVG output (perfect for printing)
- Optional painted preview
- Configurable smoothing
- Numbered regions
- Color palette with number → color mapping
- Modern, clean UI
- Open-source and self-hostable
👉 Live demo: (coming soon)
- Next.js (App Router)
- TypeScript
- Sharp – image processing
- SVG – vector output
- SVGO – SVG optimization
- Tailwind CSS – UI styling
At a high level, the pipeline looks like this:
- Uploaded image is resized and preprocessed
- Colors are quantized to a limited palette
- Connected regions (facets) are detected
- Small regions are merged for readability
- Vector outlines and optional fills are generated
- A labeled SVG and optional painted preview are returned
git clone https://github.com/your-username/paint-by-numbers
cd paint-by-numbers
bun install
bun run devApp available at: http://localhost:3000
Contributions are welcome!
If you have ideas for improvements, bug fixes, or new features:
- Open an issue
- Submit a pull request
- Or just share feedback