OpenPencil is an open-source design editor that reads and writes native Figma .fig files and opens Pencil .pen documents. It runs as a desktop app (built on Tauri) for macOS, Windows, and Linux, and in the browser as a progressive web app. Nodes copy and paste between Figma and OpenPencil, and documents stay on your machine.
AI is built in. A chat assistant has more than 100 tools that create shapes, set fills and strokes, manage auto layout, work with components and variables, run boolean operations, analyze design tokens, and export assets. You bring your own API key for OpenRouter, Anthropic, OpenAI, Google AI, DeepSeek, Z.ai, MiniMax, or a compatible endpoint, with no backend or account. In the desktop app, Claude Code, Codex, Gemini CLI, or Pi can run directly in the chat panel and drive the editor through its MCP server.
Every operation is scriptable. A headless CLI inspects, queries (with XPath), lints, analyzes, converts, and exports design files, or controls the running editor, and its eval command runs scripts against the Figma Plugin API. A standalone MCP server gives Claude Code, Cursor, Windsurf, or any MCP client the same design tools, and an agent skill teaches coding agents to use it. A headless Vue SDK provides components and composables for building custom editors.
| Layer | Tech |
|---|---|
| Rendering | Skia (CanvasKit WASM) |
| Layout | Yoga WASM with flex and grid |
| UI | Vue 3, Reka UI, Tailwind CSS 4 |
| File format | Kiwi binary, Zstd, ZIP |
| Collaboration | Trystero (WebRTC peer-to-peer) and Yjs (CRDT) |
| Desktop | Tauri v2 |
| AI and MCP | Vercel AI SDK, MCP SDK, Hono |
Features
- Figma files: reads and writes .fig files natively and opens .pen documents
- AI chat: an assistant with more than 100 design tools, using your own API key
- Coding agents: Claude Code, Codex, Gemini CLI, and Pi run in the chat panel of the desktop app
- MCP server: exposes the design tools to any MCP client over stdio or HTTP
- Headless CLI: inspects, queries with XPath, lints, analyzes, converts, and exports files, with JSON output for CI
- Figma Plugin API scripting: runs JavaScript against a document and writes the result back
- Export formats: PNG, JPG, WEBP, SVG, PDF, PPTX, HTML, Tailwind JSX, Storybook stories, and .fig
- Lint and tokens: checks naming, layout, and accessibility, and extracts design tokens
- Components and variants: reusable components, variant sets, and live interactive controls over the canvas
- Image vectorization: converts image layers into editable vectors with Recraft or fal.ai
- Real-time collaboration: peer-to-peer co-editing over WebRTC with cursors, presence, and follow mode, without a server or account
- Vue SDK: headless components for embedding the editor or building custom editing surfaces
