Qpixel

Narrative

Qpixel was scaffolded as a full Nuxt app out of convenience during c35, but it was purely client-side with zero server features and zero layer component usage beyond Tailwind tokens. Meanwhile qmap and qflow — the other visualization tools — were packaged as lean Vue + Vite libraries that the design site imported directly.

The restructure moved all source from app/ to src/, replaced Nuxt auto-imports with explicit Vue imports, converted the remaining Tailwind utilities to scoped CSS, and added a Vite library mode build. The result: a 50KB ESM bundle with vue as the only peer dependency, embeddable in any Vue project. The design site now has a live interactive editor on its visualization page.

Narrative

The select tool from c2 created selections and could copy/paste, but the interaction was non-standard — drag meant copy, next click meant paste, and the clipboard disappeared when you loaded a different library item. This made moving art between saved items unreliable.

Promoting clipboard state to the editor composable (out of the grid component) was the structural fix. The clipboard now survives library loads, and the copy/cut/paste flow follows the standard mental model: select first, then copy or cut, then paste. Keyboard shortcuts make it feel native.

Narrative

ANSI export is perfect for terminals, but the art needed to go other places — documentation, websites, design tools. SVG was the natural vector format. The challenge was mapping 30+ Unicode block characters to precise rectangle geometry while handling the characters that aren't rectangular at all.

The solution was a two-tier export: block characters become SVG rects with exact sub-cell positioning (half-blocks, quarter-blocks, eighth-blocks all map to specific x/y/width/height fractions), while line-drawing characters and typed text fall back to positioned SVG text elements. The shape export adds a merging pass that combines adjacent full blocks into larger rectangles, reducing file size without losing fidelity.

Narrative

Block characters are great for filled shapes, but terminal art also needs lines, borders, and text. Adding the full Unicode box-drawing set — light, heavy, double, rounded corners, dashed variants — turned the editor into a diagramming tool. You could draw labeled boxes, flowcharts, and table borders alongside pixel art.

The text tool was the other missing piece. Rather than painting one character at a time, you click to place a cursor and type. Arrow keys navigate, Backspace erases behind, Enter moves to the next row. Combined with the select/copy/paste tool, you could compose complex terminal UIs by assembling rectangular regions from different library items.

Narrative

The genesis version could paint and export, but iterating on real designs exposed the gaps. You couldn't preview what the ANSI output would actually look like in a terminal. You couldn't save work between sessions. You couldn't change a color without repainting every cell.

The library system was the biggest quality-of-life addition — localStorage persistence with folder organization meant you could build up a collection of icons, logos, and banner components and compose them later. The recolor tool and brush sizes made the editor feel like a real creative tool rather than a cell-by-cell data entry form.

Narrative

Qpixel started as a side effect. During the CLI harness cycle (c35), we needed to design a terminal MOTD banner using Unicode block characters and ANSI colors. The pixel-to-ascii.py script converted PNG source art into block characters, but iterating on the design meant round-tripping through image editors and Python scripts.

Building a direct block-character editor was faster than the round-trip. The first version was a minimal grid with paint, erase, and ANSI export — enough to design the Cisco+Qpoint co-brand lockup directly in the target medium. Once it worked, it was obvious this was its own tool, not a design-cycle artifact.