Paintbox

A lightweight layer-based raster image editor for macOS, built with Tauri 2, React, TypeScript, and HTML Canvas.

Features

Tools

• Move (selected pixels, or the whole layer when nothing is selected)
• Rectangle / Ellipse / Lasso selections and Magic Wand (tolerance 0–100, contiguous or global), with replace / add (Shift) / subtract (Option) modes and marching-ants outline
• Paintbrush (size, hardness, opacity), 1px Pencil, Eraser (selection-clipped), Paint Bucket (tolerance-based flood fill), Color Picker
• Gradient (linear or radial, primary → secondary or fade to transparent, selection-clipped)
• Text with font picker, size, bold/italic — type directly on the canvas, ⌘↩ or click-away commits
• Line / Rectangle / Ellipse shapes (outline, fill, or both; Shift to constrain)
• Pan / zoom (Space-drag, pinch or ⌘-scroll, ⌘0 fit, ⌘1 100%)

Editing

• Layers: add, delete, duplicate, reorder, rename, visibility, opacity, 16 blend modes, merge down, flatten
• Clipboard: cut / copy / paste as new layer; Delete clears selection contents
• Undo / redo for pixel edits, selections, and document transforms

Adjustments — Brightness/Contrast, Hue/Saturation, Invert, Black & White, Sepia, Posterize (live preview, applied within the selection)

Effects — Gaussian Blur, Sharpen, Pixelate, Add Noise, Edge Detect

Image — Flip horizontal/vertical, rotate 90°/180°, resize image, canvas size, crop to selection

File — Open PNG/JPEG/GIF/WebP/BMP into an editable canvas, or drag & drop files onto the window; when a document is already open, choose between adding the images as layers or opening a new file. Export composited PNG via the native save dialog

Development

npm install
npm run tauri dev     # run the desktop app
npm run tauri build   # build the .app bundle

selftest.html (served by npm run dev) exercises the editor engine end-to-end and reports PASS/FAIL per behavior.

Support

Paintbox is free and open source, built in spare time. If it's useful to you, you can support development via GitHub Sponsors, Ko-fi, Buy Me a Coffee, or Open Collective. No pressure — bug reports and pull requests help just as much.

Contributing

See CONTRIBUTING.md. The short version: open an issue before large changes, and make sure npm run build and the selftest.html checks pass.

License

MIT

Architecture

• src/editor/store.ts — single mutable editor store (document, layers, tools, history) exposed to React via useSyncExternalStore
• src/editor/selection.ts — flood fill, polygon rasterization, mask combine, outline tracing
• src/editor/pixelops.ts — adjustments and effects as pure ImageData operations
• src/editor/transform.ts — whole-document transforms
• src/components/CanvasView.tsx — viewport rendering (checkerboard, layers, overlays) and pointer handling
• Layers are backed by offscreen canvases at document resolution; the selection is a Uint8Array binary mask