Paste a snippet, style it, export a PNG or JPG. Runs in the browser, no account, nothing uploaded.
Website · Contributing · Issues
- Editor. Type or paste, with highlighting as you go. 242 languages via Shiki, auto-detected. Terminal captures become color rather than escape codes.
- Marks. Highlight, focus, diff-add and diff-remove, for changelog and pull-request shots.
- Windows and tabs. Up to five windows, each with its own tabs, so a change can be followed across the files it touches.
- Themes. Ten presets, a custom builder, and import for any VS Code theme.
- Export. PNG or JPG, at 1x, 2x or 4x. Copy to the clipboard, or download.
Nothing is uploaded. Every snippet, theme and export is computed in your
browser, and your scene is saved to localStorage, not to a server.
pnpm installpnpm devThe app runs at http://localhost:3000.
| Script | What it does |
|---|---|
pnpm dev |
Development server |
pnpm build |
Production build |
pnpm test |
Vitest over the pure modules in lib/ |
pnpm typecheck |
tsc --noEmit |
pnpm lint |
ESLint |
pnpm format |
Prettier |
The editor you type into is DOM. The preview and every export are canvas. Both draw the same code from one scene object.
Any value the two must agree on, like a font or a line height, lives in lib/
so both read it from the same place. Add a visual rule to the editor's CSS and
forget the renderer, and the export quietly stops matching the preview.
Two rules keep that from happening. draw is pure, so the same input always
gives the same pixels. And lib/ imports nothing from React, so the engine can
move into its own package later.
lib/ holds the layout maths, scene parsing, theme loading and export sizing.
It is pure, which is why it is the part with tests.
Next.js · React · TypeScript · Tailwind CSS · shadcn/ui on Base UI · Shiki