MonoPixel

Overview

MonoPixel is a small Next.js and TypeScript pixel editor built over a weekend. The canvas state lives in a Zustand store outside React's render tree, so drawing does not rerun component trees. The UI is split into a topbar, toolbar, canvas view, navigator mini-map, zoom controls, and a canvas-size dialog. The goal was a clean focused editor, not a feature-complete art tool.

Highlights

• Canvas state held in a Zustand store outside React so brush strokes do not rerender the tree.
• Split UI: topbar, toolbar, canvas view, navigator mini-map, and zoom controls.
• Configurable canvas size via a dedicated dialog.
• No backend: everything runs in the browser.

Challenges and approach

• Naive React rerenders on every stroke would kill frame rate on larger canvases. Moving the entire canvas state into Zustand and updating only the visible surface kept drawing smooth.
• Splitting the editor into distinct panels (toolbar, topbar, navigator) without tangling their state required each panel to subscribe to narrow slices of the store rather than reading the whole state tree.