Qpixel
ASCII block art editor. Paint with Unicode block characters and 24-bit ANSI colors, then export as .txt, SVG, or PNG.
@qpoint-io/qpixel · v0.1.0
Live Editor
Loading editor...
Full interactive editor. Paint, erase, recolor, type text, select regions. Export as ANSI .txt, SVG, or PNG. Library saves to localStorage.
QpixelEditor Component
import { QpixelEditor } from '@qpoint-io/qpixel'| Prop | Type | Default | Description |
|---|---|---|---|
| initialRows | Number | 8 | Starting canvas row count. |
| initialCols | Number | 16 | Starting canvas column count. |
| initialColor | String | '#7044DA' | Starting paint color (hex). |
| showLibrary | Boolean | true | Show the localStorage-backed library sidebar. |
| showPreview | Boolean | true | Show the ANSI preview panel. |
Individual Components
For custom compositions, import individual components and wire them with the useEditor composable.
| Export | Description |
|---|---|
| QpixelEditor | Full editor — toolbar, grid, palette, colors, library, preview. |
| QpixelGrid | Interactive grid with mouse/keyboard painting, selection, text input. |
| QpixelToolbar | Tool selector, brush size, export action buttons. |
| QpixelPalette | Unicode block character selector with grouping. |
| QpixelColors | Color picker with swatches and hex input. |
| QpixelPreview | Live ANSI preview panel. |
| QpixelLibrary | localStorage-backed item library with folders. |
| useEditor() | Canvas state composable — paint, erase, resize, selection, clipboard. |
| useLibrary() | Library persistence composable — save, load, import, export. |
| toAnsiString() | Encode canvas to cat-compatible ANSI string. |
| toSvgBlocks() | Render canvas as SVG with per-cell block geometry. |
| toSvgShapes() | Render canvas as SVG with merged full-block rectangles. |
SSR: The editor uses browser APIs (localStorage, Clipboard, Canvas). Always wrap in <ClientOnly> when used in Nuxt/SSR apps.