OpenPencil

Open-source vector design tool with a Design-as-Code philosophy. An alternative to Pencil.dev.

Features

• Canvas: Infinite canvas with pan (Space+drag / middle mouse / Hand tool) and zoom (scroll wheel), smart guides & snapping
• Drawing tools: Rectangle, Ellipse, Line, Frame, Text
• Property editing: Position, size, rotation, fill (solid + gradient), stroke, corner radius, opacity, effects (shadow, blur)
• Layer panel: Tree view, drag reorder, visibility toggle, lock, context menu, selection sync, rename
• Undo/Redo: Full history with batched drag operations (Cmd+Z / Cmd+Shift+Z)
• Clipboard: Copy, cut, paste, duplicate (Cmd+C/X/V/D)
• Grouping: Group / ungroup selected elements (Cmd+G / Cmd+Shift+G)
• File operations: Save/open .pen files (JSON-based, Git-friendly), auto-save support
• Export: PNG and SVG export with scale options (Cmd+Shift+E)
• Code generation: Generate React+Tailwind or HTML+CSS code from designs (Cmd+Shift+C)
• AI assistant: Built-in AI chat panel for design assistance (Cmd+J), supports Anthropic API or local Claude Code
• Keyboard shortcuts: Tool keys (V/R/O/L/T/F/H), Delete, arrow nudge, bracket keys for z-order, Cmd+A select all

Tech Stack

• Framework: TanStack Start (React 19, SSR, file-based routing)
• Canvas: Fabric.js v7
• State: Zustand v5
• UI: shadcn/ui (Radix + Tailwind primitives)
• Styling: Tailwind CSS v4
• Icons: Lucide React
• Server: Nitro (API routes)
• Runtime: Bun
• Build: Vite 7

Getting Started

bun install
bun --bun run dev

Open http://localhost:3000 and click "New Design" to enter the editor.

AI Configuration

The AI assistant works in two modes:

• Anthropic API: Set ANTHROPIC_API_KEY in .env
• Local Claude Code: No config needed — uses Claude Agent SDK with OAuth login as fallback

Scripts

Command	Description
bun --bun run dev	Start dev server on port 3000
bun --bun run build	Production build
bun --bun run preview	Preview production build
bun --bun run test	Run tests (Vitest)

Project Structure

src/
  canvas/            # Fabric.js canvas engine, drawing, sync, guides
  components/
    editor/          # Editor layout, toolbar, status bar
    panels/          # Layer panel, property panel, AI chat, code panel
    shared/          # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
    ui/              # shadcn/ui primitives (Button, Select, Slider, etc.)
  hooks/             # Keyboard shortcuts
  lib/               # Utility functions (cn class merging)
  services/
    ai/              # AI chat service, prompts, design generation
    codegen/         # React+Tailwind and HTML+CSS code generators
  stores/            # Zustand stores (canvas, document, history, AI)
  types/             # PenDocument/PenNode types, style types, variables
  utils/             # File operations, export, node clone, syntax highlight
  routes/            # TanStack Router pages (/, /editor)
server/
  api/ai/            # Nitro API: streaming chat, AI generation

Roadmap

• Component system (reusable components with instances & overrides)
• Design variables/tokens with CSS sync
• Path / pen tool
• Boolean operations (union, subtract, intersect)
• Multi-page support
• Collaborative editing

License

MIT