OpenPencil

The world's first open-source AI-native vector design tool.
_{Concurrent Agent Teams • Design-as-Code • Built-in MCP Server • Multi-model Intelligence}

English · 简体中文 · 繁體中文 · 日本語 · 한국어 · Français · Español · Deutsch · Português · Русский · हिन्दी · Türkçe · ไทย · Tiếng Việt · Bahasa Indonesia

_{Click the image to watch the demo video}

`), plus a live HTTP endpoint (`127.0.0.1:/mcp`) from the running app - Design automation from terminal: read, create, and modify `.op` files via any MCP-compatible agent - **Layered design workflow** — `design_skeleton` → `design_content` → `design_refine` for higher-fidelity multi-section designs - **Segmented prompt retrieval** — load only the design knowledge you need (schema, layout, roles, icons, planning, etc.) - **Style guide tools** — `get_style_guide_tags` and `get_style_guide` for applying visual styles via MCP - Multi-page support — create, rename, reorder, and duplicate pages via MCP tools **Code Generation** - React + Tailwind CSS, HTML + CSS, CSS Variables - Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native ## CLI — `op` Install via Homebrew or the install script, then control the design tool from your terminal: ```bash brew install zseven-w/openpencil/op ``` ```bash curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | bash ``` ```bash curl -fsSL https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.sh | OP_PRERELEASE=1 bash ``` ```powershell irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex ``` ```powershell $env:OP_PRERELEASE = "1"; irm https://raw.githubusercontent.com/ZSeven-W/openpencil/main/scripts/install-op.ps1 | iex ``` ```bash op start # Launch desktop app op start --headless --file design.op # Launch headless file-backed server op design @landing.txt # Batch design from file op design @ui.js # Sandboxed JavaScript with loops op insert '{"type":"rectangle"}' # Insert a node op import:figma design.fig # Import Figma file cat design.dsl | op design - # Pipe from stdin ``` Supports three input methods: inline string, `@filepath` (read from file), or `-` (read from stdin). Works with the desktop app, web server, or headless file-backed server. See the [CLI command reference](./crates/op-cli/src/usage.txt) for all commands. **LLM Skill** — install the [OpenPencil Skill](https://github.com/ZSeven-W/openpencil-skill) plugin to teach AI agents how to design with `op`. Run `op install` for detected agents, or target one explicitly with `op install --target codex`. ## Features **Canvas & Drawing** - Infinite canvas with pan, zoom, smart alignment guides, and snapping - Rectangle, Ellipse, Line, Polygon, Pen (Bezier), Frame, Text - Boolean operations — union, subtract, intersect with contextual toolbar - Icon picker (Iconify) and image import (PNG/JPEG/SVG/WebP/GIF) - Auto-layout — vertical/horizontal with gap, padding, justify, align - Multi-page documents with tab navigation **Design System** - Design variables — color, number, string tokens with `$variable` references - Multi-theme support — multiple axes, each with variants (Light/Dark, Compact/Comfortable) - Component system — reusable components with instances and overrides - CSS sync — auto-generated custom properties, `var(--name)` in code output - Reusable UIKits — import/export component kits from `.pen` files **AI & Agents** - Prompt-to-canvas with streaming generation and orchestrator-driven spatial decomposition - Concurrent Agent Teams — multiple designers work on different sections in parallel with per-member canvas indicators - Layered workflow — `design_skeleton` → `design_content` → `design_refine` with focused prompts per phase - Style Guides — 50+ built-in styles (glassmorphism, brutalist, retro, etc.) with tag-based fuzzy matching, wired into planning and generation - Multi-model capability profiles — auto-adapts thinking mode, effort, and prompt shape per model tier - Built-in Rust agent runtime + Anthropic, Claude Agent SDK, OpenCode, Codex, Copilot, Gemini providers - Anthropic-format passthrough for Chinese LLM providers — Kimi, Zhipu, GLM, DouBao, Ark, Bailian/DashScope, ModelScope, Coding Plans **Git Integration** - Clone wizard with SSH / HTTPS auth and SSH key management - Branch picker — create, switch, delete, merge, all from the git panel - Pull / push cascades with auth retry and non-fast-forward handling - Folder-mode three-way merge with on-disk `MERGE_HEAD` state tracking - Conflict panel with per-node / per-field three-way cards, inline JSON editor, bulk actions, and inline diff block - Remote settings and SSH keys UI; 15-locale i18n across the whole Git surface **Export** - Canvas export — PNG, JPEG, WEBP, PDF (`Cmd+Shift+P`) - Code export — React + Tailwind, HTML + CSS, Vue, Svelte, Flutter, SwiftUI, Jetpack Compose, React Native - Incremental MCP codegen pipeline — `codegen_plan`, `codegen_submit_chunk`, `codegen_assemble`, `codegen_clean` **Figma Import** - Import `.fig` files with layout, fills, strokes, effects, text, images, and vectors preserved **Desktop App** - Native macOS, Windows, and Linux — a single self-contained binary (winit + GPU Skia, no Electron) - `.op` file association — double-click to open, single-instance lock - Background update check against GitHub Releases - Native application menu with Save As, Open Recent, and an unsaved-changes dialog on close - Recent files persistence ## Tech Stack | | | | --------------- | ------------------------------------------------------------------------------------------ | | **Core** | Rust workspace (`crates/`) — editor state, widgets, hosts, MCP, AI, codegen | | **Rendering** | GPU Skia everywhere — `skia-safe` (GL) on native, CanvasKit (WASM/WebGL2) in the browser | | **UI framework** | jian — vendored pure-Rust GPU-Skia UI framework: widgets, layout, events, hot reload (`vendor/jian`) | | **Windowing** | winit (vendored `casement` fork) | | **Desktop** | Native binary `openpencil-desktop` — no browser engine | | **Web SDK** | `op-web-sdk` + React 19 / Vue 3 adapters — read-only `.op` viewer (TypeScript) | | **CLI** | `op` — terminal control, batch design DSL | | **AI** | Built-in Rust agent runtime · Anthropic SDK · Claude Agent SDK · OpenCode SDK · Copilot SDK | | **Lint** | clippy · rustfmt (Rust) · oxlint · oxfmt (web SDK) | | **File format** | `.op` — JSON-based, human-readable, Git-friendly | ## Ecosystem OpenPencil is part of a family of pure-Rust, AI-native tools from **[ZSeven-W](https://github.com/ZSeven-W)**. They compose: `jian` renders OpenPencil, `agent-rs` runs its agents, `noema` remembers, and `zode` designs from the terminal. | Project | What it is | | ------- | ---------- | | **[Zode](https://github.com/ZSeven-W/zode)** | Open-source, AI-native coding assistant for your terminal — a fast Rust TUI (`ratatui`) that reads your code, runs commands, searches files, and manages git. Drives OpenPencil over MCP. | | **[agent-rs](https://github.com/ZSeven-W/agent-rs)** | A pure-Rust async runtime for shipping LLM agents — multi-provider, tool-capable end-to-end, structured permissions, real MCP, zero `unsafe`. Powers OpenPencil's built-in agent runtime (`vendor/agent`) and Zode. | | **[jian](https://github.com/ZSeven-W/jian)** | Pure-Rust, GPU-Skia UI framework — widgets, layout, events, and hot reload in one stack. Turns a declarative `.op` document into a native, AI-controllable app with no JS runtime, no DOM, no Electron. OpenPencil's UI framework (`vendor/jian`). | | **[noema](https://github.com/ZSeven-W/noema)** | Local-first, non-vector memory system for coding agents. Durable memory as inspectable files, a review queue for new entries, and lexical (embedding-free) recall — works across Zode, Codex, Claude Code, and MCP runtimes. | ## Why Rust OpenPencil was rewritten from the ground up in **Rust** ([#129](https://github.com/ZSeven-W/openpencil/issues/129)). The rewrite is complete — the TypeScript + Electron editor was retired at `v0.7.5`, and the Rust workspace in this repo is the product: one native core that is dramatically smaller and faster, and runs on more platforms from a single codebase. | | TypeScript + Electron (retired, `v0.7.5`) | Rust (today) | | --------------------- | ---------------------------------------------- | ------------------------------------------------------------------- | | **Desktop runtime** | Electron — bundles Chromium + Node.js | Native window (`winit` + GPU Skia), no browser engine | | **Desktop footprint** | Full Chromium runtime per install | Single self-contained binary — **55.5 MB** | | **Web payload** | JS + WASM bundle | **8.2 MB** wasm / **2.18 MB** gzip over the wire | | **Rendering** | CanvasKit/Skia on web | One GPU-accelerated Skia backend on **every** target | | **Memory** | JavaScript GC pauses | No GC — Rust ownership, predictable latency | | **Codebase** | Web stack + Electron | One Rust workspace: editor · CLI · MCP · AI · codegen · Figma · Git | | **Targets** | Web + desktop, two separate stacks | Desktop (macOS/Win/Linux) · mobile (iOS/Android) · browser — one core | **Measured improvements** - **Tiny footprint** — the whole desktop app is one **55.5 MB** native binary instead of a bundled browser engine plus a Node runtime. The web build is **8.2 MB** raw / **2.18 MB** gzip after splitting the icon catalog (−48% over the wire). - **Scales to large documents** — a **10,000-node** live canvas (nested auto-layout, four levels deep) writes, reads, and snapshots layout with **no panics and ~0% idle CPU**; a full layout snapshot of all 10k nodes returns in **~0.68 s**. - **Fast interaction** — pan/zoom no longer re-serializes the document every frame (a single hot-path fix cut wheel-zoom CPU from **~69% to ~0%**); drags patch the scene incrementally, text measurement is cached, and repaints coalesce to one per frame. - **One core, every screen** — the same editor state and the same render backend compile to native desktop, mobile, and the browser via WASM — no parallel reimplementations to keep in sync. - **GPU Skia everywhere** — native renders through `skia-safe` on a GL context; the browser renders through CanvasKit on WebGL2 — the same drawing code, the same output. - **Native accessibility** — AccessKit on macOS, Windows, and Linux, plus a DOM mirror on web, instead of leaning on a browser's a11y tree. - **One type-checked workspace** — the MCP host, CLI, AI providers, code generation, Figma import, and Git integration all live in a single Rust workspace, with `cargo-deny` supply-chain gating in CI. > **Status:** the TypeScript editor was retired at `v0.7.5` and lives only in git history; this repository is the Rust workspace. The Rust product is under active development (see the Roadmap below). ## Project Structure ```text openpencil/ ├── crates/ Rust workspace — the product │ ├── op-editor-core/ Canonical `.op` (PenDocument) editor state + EditorCommand + design variables │ ├── op-editor-ui/ Platform-free widgets + RenderBackend facade (wasm32-clean) │ ├── op-editor-host-core/ Transport-free host state machines shared by all hosts │ ├── op-host-native/ Native host lib — winit + skia-safe GL (desktop + mobile) │ ├── op-host-web/ Browser bundle — wasm32 cdylib, CanvasKit renderer │ ├── op-host-desktop/ Desktop binary `openpencil-desktop`; also the `--serve-web` daemon │ ├── op-host-services/ Headless serve-web / MCP daemon lib │ ├── op-host-web-server/ Thin GL-free web-server binary │ ├── op-cli/ CLI tool — `op` command │ ├── op-mcp/ MCP server — tools, batch design, layered workflow │ ├── op-ai/ AI providers, chat runtime, streaming │ ├── op-ai-skills/ AI prompt skill engine (phase-driven prompt loading) │ ├── op-orchestrator/ Concurrent agent-team orchestration │ ├── op-codegen/ Code generators (React, HTML, Vue, Flutter, ...) │ ├── op-figma/ Figma .fig file parser and converter │ ├── op-git/ Git integration — clone, branch, push/pull, merge │ └── ... op-opmerge / op-pen-loader / op-design-lint / op-i18n / │ op-config-store / op-process-io / op-acp / op-smoke / ... ├── packages/ Web SDK workspace (Bun) │ ├── op-web-sdk/ Read-only `.op` web viewer SDK (wraps the wasm bundle) │ ├── op-web-sdk-react/ React 19 adapter │ └── op-web-sdk-vue/ Vue 3 adapter ├── vendor/ Vendored subsystems (git submodules) │ ├── jian/ GPU-Skia UI framework — widgets/render/events │ ├── casement/ winit fork │ └── agent/ Cross-product Rust agent runtime (agent-rs) └── .githooks/ Pre-commit version drift check ``` ## Keyboard Shortcuts | Key | Action | | Key | Action | | ----------- | ----------------- | --- | ------------- | ------------------------- | | `V` | Select | | `Cmd+S` | Save | | `R` | Rectangle | | `Cmd+Z` | Undo | | `O` | Ellipse | | `Cmd+Shift+Z` | Redo | | `L` | Line | | `Cmd+C/X/V/D` | Copy/Cut/Paste/Duplicate | | `T` | Text | | `Cmd+G` | Group | | `F` | Frame | | `Cmd+Shift+G` | Ungroup | | `P` | Pen tool | | `Cmd+Shift+P` | Export (PNG/JPG/WEBP/PDF) | | `H` | Hand (pan) | | `Cmd+Shift+C` | Code panel | | `Del` | Delete | | `Cmd+Shift+V` | Variables panel | | `[ / ]` | Reorder | | `Cmd+J` | AI chat | | Arrows | Nudge 1px | | `Cmd+,` | Agent settings | | `Cmd+Alt+U` | Boolean union | | `Cmd+Alt+S` | Boolean subtract | | `Cmd+Alt+I` | Boolean intersect | | `Cmd+Shift+S` | Save As | ## Scripts ```bash # Product (Rust — run from the repo root) cargo build --workspace # Build all crates (add --release for prod) cargo test --workspace # Run all tests cargo check --workspace # Type check cargo clippy --workspace --all-targets -- -D warnings # Lint cargo fmt --all # Format bash scripts/start-web-rust.sh # Web dev server (wasm bundle + headless host) cargo run -p op-host-desktop # Desktop app (binary: openpencil-desktop) cargo run -p op-cli -- # CLI (binary: op) # Web SDK / JS tooling (run from packages/) cd packages && bun run lint # Lint the web SDK (oxlint); also: bun run format cd packages && bun run generate-iconify-catalog # Regenerate the Rust icon catalog assets # Version synchronization (run from repository root) scripts/sync-version.sh # Sync all managed versions from root Cargo.toml tools/check-version-sync.sh # Verify all managed versions match root Cargo.toml ``` ### Rust workspace details The Rust-ification is complete — the Rust workspace is the product. Kickoff spec: `openpencil-docs/superpowers/specs/2026-05-02-rust-ification-kickoff.md` (v7 FROZEN). ```bash # Install Rust toolchain (rust-toolchain.toml auto-pins 1.94) rustup toolchain install 1.94 rustup target add wasm32-unknown-unknown # build / test / lint cargo check --workspace cargo test --workspace cargo clippy --workspace --all-targets -- -D warnings cargo check --target wasm32-unknown-unknown -p op-host-web --no-default-features --features web # kickoff §1.2 wasm32 invariant cargo deny check && cargo deny --target wasm32-unknown-unknown check bans # cargo-deny (native + wasm32 bans; CI uses cargo-deny-action@v2) ``` **Entry crates (`crates/` — build targets):** | Crate | Category | wasm32 | | --------------- | -------------------------------------------------------------------------------- | ---------------- | | op-host-web | Browser bundle entry — wasm32 cdylib, renders via CanvasKit | ✅ | | op-host-native | Native host lib — WidgetHostNative + skia-safe GL backend (desktop + mobile) | ❌ (native only) | | op-host-desktop | Desktop binary `openpencil-desktop` (winit + skia-safe GL) — also the `--serve-web` daemon that hosts the web bundle | ❌ (native only) | | op-cli | `op` command-line tool | ❌ (native only) | **Shared library crates:** `op-editor-core` (canonical `.op` state), `op-editor-ui` (platform-free widgets + `RenderBackend`), `op-editor-host-core` (transport-free host state machines), `op-mcp`, `op-ai`, `op-ai-skills`, `op-codegen`, `op-orchestrator`, `op-figma`, `op-git`, `op-opmerge`, `op-pen-loader`, `op-design-lint`, `op-config-store`, `op-process-io`, `op-acp`, `op-i18n`, `op-rpc-transport` — plus `op-smoke` (headless design-turn test runner). The browser bundle renders through the official CanvasKit skia WASM (loaded separately), so the retired `skia-safe-op` wasm fork + `wasm-libc-shim` no longer exist. **Submodule:** `vendor/agent` → `github.com/ZSeven-W/agent-rs` (cross-product Rust agent runtime). ## Contributing Contributions are welcome! See [CLAUDE.md](./CLAUDE.md) for architecture details and code style. 1. Fork and clone 2. Enable the version drift check: `git config core.hooksPath .githooks` 3. Create a branch: `git checkout -b feat/my-feature` 4. Run checks: `cargo test --workspace && cargo clippy --workspace --all-targets -- -D warnings` 5. Commit with [Conventional Commits](https://www.conventionalcommits.org/): `feat(canvas): add rotation snapping` 6. Open a PR against `main` ## Roadmap - [x] Design variables & tokens with CSS sync - [x] Component system (instances & overrides) - [x] AI design generation with orchestrator - [x] MCP server integration with layered design workflow - [x] Multi-page support - [x] Figma `.fig` import - [x] Boolean operations (union, subtract, intersect) - [x] Multi-model capability profiles - [x] Cargo workspace with reusable Rust crates and web SDK packages - [x] Rust desktop & web editor - [x] CLI tool (`op`) for terminal control - [x] Built-in Rust agent runtime with multi-provider support - [x] i18n — 15 languages - [x] Wasm-backed viewer SDKs for JavaScript, React & Vue - [x] Style Guides with tag-based matching and MCP tools - [x] Concurrent Agent Teams with delegation and canvas indicators - [x] Git integration — clone, branch, push/pull, folder-mode three-way merge - [x] Canvas export (SVG / PNG / JPEG / WEBP / PDF) - [ ] Collaborative editing - [ ] Plugin system ## Contributors ## Sponsors OpenPencil is free and open-source. Development is funded by people who find it useful — thank you for keeping the canvas open. Thanks to **[MrQyun](https://github.com/mrqyun)** — want your name here too? **[Become a sponsor →](https://github.com/sponsors/ZSeven-W)** ## Community Join our Discord — Ask questions, share designs, suggest features. **Recognized community: [LINUX DO](https://linux.do/)** ## Star History ## Assessments [](https://mseep.ai/app/zseven-w-openpencil) ## License [MIT](./LICENSE) — Copyright (c) 2026 ZSeven-W