OpenPencil is a design editor that reads and writes native Figma .fig files alongside its own .pen documents, and supports copy and paste of nodes between applications. It runs as a Tauri v2 desktop app of about 7 MB for macOS, Windows, and Linux, and in the browser as a progressive web app. Rendering uses Skia through CanvasKit WASM and layout uses Yoga WASM for flex and CSS grid.
Every editor operation is also available headlessly. A command-line interface walks node trees, searches by name or type, runs XPath selectors, lints naming, layout, structure, and accessibility, analyzes colors, typography, spacing, clusters, and overlaps, extracts design tokens, and exports to PNG, JPG, WEBP, SVG, .fig, JSX, or HTML. An eval command exposes the full Figma Plugin API against a file and can write the result back, and HTML, authored CSS, or Tailwind utility classes can be imported as editable layers. When the desktop app is running, the same commands drop the file argument and operate on the live canvas over RPC, and all commands accept --json for machine-readable output.
AI is built into the editor. A chat panel with more than 100 tools creates shapes, sets fills and strokes, manages auto layout, works with components and variables, runs boolean operations, analyzes design tokens, and exports assets, using your own key for OpenRouter, Anthropic, OpenAI, Google AI, Z.ai, MiniMax, or compatible endpoints; provider and model compatibility in the browser is published as measured results. An MCP server over stdio or HTTP exposes the same tools to Claude Code, Cursor, Windsurf, and other MCP clients, and coding agents can also be driven from inside the desktop chat panel. Pi is available as an optional AI SDK Harness provider through a separately installed companion CLI.
For embedding, a headless Vue software development kit (SDK) supplies components and composables for building custom editing surfaces or putting the editor inside another product. Real-time collaboration is peer-to-peer over WebRTC with Yjs CRDTs — a shared link gives cursors, presence, and follow mode with no server and no account.
Features
- Figma file support: reads and writes .fig archives through a Kiwi binary codec, with copy and paste between applications
- Headless CLI: inspect node trees, query with XPath, export, lint, convert, and analyze files without opening the editor
- Live-app control: with the desktop app running, CLI commands operate on the current canvas over RPC
- Figma Plugin API: eval runs plugin-API scripts against a document and writes changes back
- Design-token analysis: color, typography, spacing, cluster, and overlap reports plus variable extraction
- Design-to-code export: selections export as JSX or HTML with Tailwind CSS styling, and HTML or CSS imports back as editable layers
- Built-in AI chat: 100+ tools for creating and modifying nodes, using your own provider key
- MCP server: stdio and HTTP transports for Claude Code, Cursor, Windsurf, and other MCP clients
- Components and variants: reusable components, component sets, local asset instances, and variant switching from the inspector
- Image vectorization: converts image layers into editable vectors with Recraft or fal.ai
- Real-time collaboration: WebRTC peer-to-peer editing with cursors, presence, and follow mode, with no server or account
- Vue SDK: headless components and composables for embedding or building a custom editor
