CodeCanvas

A lightweight, web-only studio for creating clean code screenshots. Customize the window style, syntax theme, typography, and backdrop, then export a crisp PNG.

Features

• CodeMirror-based editor with theme and language presets
• Auto-sizing window with manual resize handles
• Background color or image
• Drag-and-drop file loading
• One-click PNG export
• Local settings persistence (no backend)

Tech Stack

• React + TypeScript + Vite
• Zustand for state management
• CodeMirror for the editor
• Vanilla CSS with design tokens

Scripts

• npm run dev — start local dev server
• npm run build — production build
• npm run typecheck — run TypeScript type checks
• npm run preview — preview build
• npm run lint — run ESLint
• npm run test:unit — Vitest unit tests
• npm run test:e2e — Playwright UI/E2E tests
• npm run test — Playwright visual tests (generate/update snapshots on first run)
• npm run test:all — run unit + UI/E2E + visual tests

Notes

Settings are stored locally in the browser. Background images are not persisted to avoid oversized storage usage.

Visual Testing

Install browsers once, then run tests:

npx playwright install
npm run test

The first run will create baseline screenshots under tests/visual.spec.ts-snapshots which should be committed.

Quality Bar

• Pixel-perfect UI is required for visual updates.
• Export to PNG is critical and must be verified in tests.