An open-source design editor that reads native Figma files, ships a built-in AI assistant with 100+ design tools, and offers real-time serverless collaboration — all without giving up your files.
OpenPencil is a fully open-source design editor built as a credible alternative to Figma. It reads and writes native .fig files without any proprietary bridge, so teams can inspect, lint, and export Figma documents entirely on their own infrastructure. The editor renders through Skia (CanvasKit WASM) for pixel-accurate output and handles auto-layout via a forked Yoga WASM engine that adds CSS Grid support on top of flex.
At its core, OpenPencil is structured as a programmable toolkit rather than a closed application. A headless @open-pencil/core engine manages the scene graph, file I/O, layout, linting, and format conversion; a @open-pencil/vue SDK wraps that engine in composables for embedding into custom editing surfaces; a CLI exposes every operation as a terminal command with --json output; and a full MCP server makes all 100+ tools available to AI coding agents like Claude Code, Codex, and Gemini CLI.
The built-in AI assistant connects to multiple providers — Anthropic, OpenAI, Google AI, OpenRouter, Z.ai, and MiniMax — using bring-your-own API keys with no backend relay. Real-time collaboration works peer-to-peer over WebRTC using Yjs CRDTs, requiring no server, no account, and no subscription. The desktop app ships via Tauri v2 at roughly 7 MB for macOS, Windows, and Linux, and the same codebase runs as a Progressive Web App in the browser.
The project is under active development (v0.13.x, 32 releases since February 2026, ~285 commits per month) and explicitly not yet production-ready. Its design-to-code export, XPath document querying, Figma Plugin API eval bridge, and AI skill publishing set it apart from other Figma-compatible open-source tools.
.fig and .pen file reader/writer — inspect, edit, and export Figma documents without Figma installed@open-pencil/vue) for embedding the editor into your own apps or building workflow-specific editing surfaces@open-pencil/cli) for inspecting node trees, running XPath queries, exporting to PNG/JPG/SVG/JSX/Tailwind, linting, and analyzing design tokensArchitecture
OpenPencil is organized as a layered monorepo where a framework-agnostic core engine is the single source of truth for all design operations, and every other surface — the Vue web app, the headless Vue SDK, the CLI, and the MCP server — is a thin adapter over that core. The @open-pencil/core package owns the scene graph, file I/O registry, layout runner, lint engine, and design-to-JSX converter; no design logic leaks into the UI layer. The editor state is managed through a well-defined createEditor factory that accepts an EditorOptions object and emits typed events (node:created, node:updated, node:deleted, node:reparented) that consumers subscribe to without coupling to internal implementation details. The IO subsystem uses a format registry pattern where each adapter declares its read/write/export capabilities through a typed interface, making format support extensible without touching the registry itself. The RPC and MCP layers are thin HTTP and stdio bridges over the same command modules used by the CLI, keeping the surface consistent across automation contexts.
Tech Stack
The rendering pipeline is built on Skia via CanvasKit WASM, which delivers accurate path rendering, blend mode support, and font rasterization without relying on the browser’s Canvas 2D API. Layout is handled by a forked Yoga WASM engine that adds CSS Grid track sizing on top of standard flexbox — a gap that the upstream Yoga project has not yet closed. The UI layer uses Vue 3 with Reka UI primitives and Tailwind CSS v4 for styling; state management leans on VueUse composables and reactive refs rather than a centralized store. File format parsing handles Kiwi binary encoding compressed with Zstd inside a ZIP container for .pen files, and a native binary parser for Figma’s .fig format. Real-time collaboration uses Trystero for WebRTC peer discovery combined with Yjs CRDTs for conflict-free concurrent edits. The desktop shell is Tauri v2 (Rust), and the AI integration targets the Vercel AI SDK with valibot schemas bridging internal tool definitions to provider-agnostic tool calls across Anthropic, OpenAI, Google AI, OpenRouter, Z.ai, and MiniMax.
Code Quality
The project enforces quality through a comprehensive gating pipeline: oxlint with type-aware rules and a tsgo type check cover the core, Vue, CLI, and MCP packages; vue-tsc handles Vue-specific type checking; Steiger enforces Feature-Sliced Design architectural boundaries; and a custom jscpd duplication check prevents copy-paste between packages. Testing is split across 188 Playwright E2E visual regression tests (run against both the OpenPencil web app and Figma for compatibility verification) and extensive Bun unit tests covering the engine, geometry, clipboard, color, IO formats, and CLI commands. Error handling in the core engine uses explicit typed results rather than thrown exceptions, and the AI adapter includes a detailed per-tool debug log with mutation diffing that catches no-op tool calls. The codebase uses TypeScript strict mode throughout, and the tool schema system enforces parameter types through valibot validators generated from internal ParamDef definitions.
What Makes It Unique
OpenPencil’s most technically distinctive characteristic is the combination of a native .fig file parser with a scriptable Figma Plugin API surface accessible from the terminal. No other open-source Figma alternative can read and write .fig files natively, expose the full Figma Plugin API through an eval command, and simultaneously serve those same operations over an MCP server to AI coding agents. The XPath query engine for design documents — allowing structured node selection by type, attribute, and hierarchy — is a capability that exists nowhere else in the open-source design tool ecosystem. Layering that on top of a headless Vue SDK that embeds the full engine in arbitrary host applications, and publishing it as a skills-compatible AI agent integration, positions OpenPencil as infrastructure for AI-assisted design workflows rather than just a standalone editor.
OpenPencil is released under the MIT License, which is one of the most permissive open-source licenses available. You can use it commercially, modify the source, redistribute modified copies, and embed it in proprietary products without any copyleft obligations. The only requirement is that the original copyright notice and license text are preserved in distributed copies. There are no open-core restrictions, no feature gating behind a paid tier, and no network-enforced license checks in the codebase.
Running OpenPencil yourself means taking on full operational responsibility for the deployment. The web and desktop versions are self-contained — the Tauri desktop app is distributed as a ~7 MB binary, and the web app can be served as a static PWA from any CDN or object storage bucket. Collaboration is serverless by design (WebRTC P2P via Trystero), so you do not need to run a signaling or relay server for real-time editing. The MCP and CLI tools are npm packages that run locally. The main operational burden is keeping the desktop binary or web build up to date as the project ships frequent releases (roughly 8–9 releases per month at current pace) and is not yet production-stable.
There is no hosted cloud tier, managed offering, or paid support contract for OpenPencil at this time. What you give up compared to Figma or a future managed offering is primarily enterprise support SLAs, managed upgrade paths, and guaranteed backward compatibility between releases. The project is in active early development (v0.13.x), and the maintainers explicitly note it is not ready for production use. That means API surfaces, file format details, and CLI flags may change across releases. Teams evaluating OpenPencil for production should monitor the changelog closely, pin to specific release tags, and be prepared to absorb breaking changes as the project matures.
No Code Platforms · AI Development · Developer Tools
Visual LLM workflow platform with RAG pipelines, agent capabilities, and model management for building production AI applications.
Developer Tools · Game Development · Design Tools
Free, MIT-licensed 2D and 3D game engine with one-click multi-platform export and no royalties.
Design Tools · Productivity
The offline-first diagram editor that puts security above all else — no account, no data leaving your machine, no compromises.