Pixgrind, a pixel art editor that builds 3D models

Pixgrind is now running on the site. It is a browser-based pixel art editor, and like ProtoCAD before it, a tool rather than something to play.

The 2D side covers what a sprite needs: layers, indexed palettes, selections, and the usual tools. The 3D side takes the same pixels and gives each one a depth, so art drawn on the front, side, and top of a box becomes a model. Nothing is uploaded to a server, and projects are plain files you keep.

Drawing

Pencil, eraser, line, rectangle, fill, and eyedropper, with a round or square brush from 1 to 64 pixels. The left button paints the primary color and the right button the secondary, which is transparent by default, so right-click erases. Pixel perfect mode drops the corner pixel of every L-shaped turn in a 1px stroke, so a hand-drawn diagonal comes out as a clean staircase.

Selections take any shape: rectangle, freehand lasso, polygonal lasso, and a magic wand, combined by adding, subtracting or intersecting. Moved pixels float, and a float can hang off the canvas without losing anything until it is dropped. Copy and paste also go through the system clipboard as PNG, so an image copied in another app pastes in the nearest palette colors.

Layers have visibility, opacity, renaming, reordering, duplicating, and merge down. Every change is undoable, one history entry per stroke.

Palettes

Pixels are stored as palette indices, not colors. Swapping palettes recolors the whole image without touching a pixel and undoing the swap is exact. For palettes in a different order there is remap, which moves every pixel to the nearest-looking new color.

PICO-8, Game Boy, 1-bit, and Grayscale 8 are built in, alongside palettes you save. Import and export cover .hex (Lospec), .gpl (GIMP), .pal (JASC) and PNG swatches.

References and pixelating

A reference image of any size can sit above or below the artwork as a tracing guide with its own opacity, scale, and position. It is never part of the pixels, the exports, or the undo history.

The Pixelate dialog turns a photo into pixel art. Pick a size up to 1024 pixels, a sampling method (average, dominant color, or center pixel), the colors (2 to 255 generated from the image, or an existing palette), and dithering (ordered, error diffusion, or none), and the preview updates as you go. A reference can be pixelated where it sits, so the result lands as a layer lined up with what was being traced.

3D

A document is a volume, and each of its six sides can be drawn on. Every painted pixel is a box that grows from the far side toward the camera looking at its side, 1 to 1024 deep. The Extrude tool paints depth onto pixels with the brush, and a side view edits one column’s depths cell by cell.

Pixels can also be cut along a diagonal. The Diagonal tool’s Auto mode finds the steps of a staircase edge and cuts them, so a pixel art slope becomes a smooth 45° surface in 3D.

The 3D view follows the canvas as you draw. GLB export is watertight by default: each color is one closed, manifold solid, so the file imports into Blender without a mesh cleanup pass. Faces of one color lying side by side in one plane are merged, so a flat area or a straight edge is a single quad.

Files

Projects save as .pixgrind files with their layers, palette, and depths, optionally with the reference image embedded. Images export as PNG, JPEG or WebP at 1 to 16 times their size, one side at a time.

How it was built

TypeScript and Vite were used with no UI framework and no runtime dependencies. The editor draws with Canvas 2D and the 3D view with WebGL 2. The logic (pixels, palettes, selections, edits, the voxel model and its mesh) lives in a core layer that never touches the DOM which is what lets 436 tests run in Node in about 3 seconds.

It is early, and it has sharp edges. Watertight export and pixelating run on the main thread, so the page stalls while they work: a noisy 256 by 256 model takes about 2.5 seconds to export. Every save is a fresh download, and there is no autosave yet. Layer opacity doesn’t carry into 3D, and slopes are 45° only.