Deploy Now

SaaS Alternative

Figma Canva Sketch Adobe XD

Categories

Developer Tools AI Collaboration MCP Server Design Tools Design Editor Figma Alternative

Stars

8,148

Forks

791

Watchers

53

Developer links

Last Updated: 09-03-2026
Share on X

OpenPencil

OpenPencil is the open-source design editor that reads and writes native Figma .fig files using the same Kiwi binary format — enabling bidirectional copy-paste between Figma and OpenPencil without data loss. The built-in AI assistant provides 90+ design tools through a chat interface, creating and modifying shapes, fills, strokes, auto-layout, components, variables, and boolean operations from natural language prompts, with BYOK support for Anthropic, OpenAI, Google AI, OpenRouter, Z.ai, MiniMax, and compatible endpoints. A Skia CanvasKit WASM renderer paired with Yoga WASM layout engine delivers Figma-parity rendering with flex and CSS Grid support including gap, padding, and alignment. The headless CLI inspects node trees via XPath queries, lints naming and accessibility, converts between document formats, analyzes color and typography patterns, extracts design tokens, and exports to PNG, SVG, JSX/Tailwind, and HTML. An MCP server exposes all design operations over stdio and HTTP, connecting Claude Code, Cursor, Windsurf, and Gemini CLI for AI-assisted design automation. Real-time P2P collaboration via WebRTC with Yjs CRDT synchronization requires no server and no account. The Vue SDK provides headless components for embedding the editor into custom applications. Ships as a 7 MB Tauri v2 desktop app for macOS, Windows, and Linux, or runs in any browser as a PWA. Running on a dedicated VPS on RepoCloud with guaranteed CPU, RAM, and SSD, full root SSH access, and a browser serial console. MIT licensed.

OpenPencil
OpenPencil
OpenPencil
OpenPencil

Benefits

  • Native Figma File Compatibility
  • Read and write .fig files using the same Kiwi binary codec as Figma, enabling bidirectional copy-paste of nodes and preserving layers, components, variables, and auto-layout without data loss during import or export.
  • AI-Driven Design Automation
  • Built-in chat with 90+ tools creates shapes, manages layout, edits components, and analyzes tokens from natural language prompts using Anthropic, OpenAI, Google AI, OpenRouter, or any compatible endpoint via BYOK keys.
  • Fully Programmable Design Toolkit
  • Headless CLI with XPath queries, Figma Plugin API via eval, MCP server over stdio and HTTP, and a Vue SDK with composables enable scripting, CI integration, and embedding the editor into custom applications.
  • Real-Time P2P Collaboration
  • WebRTC peer-to-peer connections with Yjs CRDT synchronization provide real-time cursors, selection presence, and follow mode without requiring a central server, user accounts, or any external infrastructure dependency.

Features

  • CanvasKit WASM Rendering
  • Skia-based CanvasKit WASM renderer with Yoga WASM layout engine provides Figma-parity vector rendering with flex and CSS Grid support for auto-layout.
  • MCP Server Integration
  • Model Context Protocol server over stdio and HTTP connects Claude Code, Cursor, Windsurf, and Gemini CLI for headless design file inspection, modification, and export.
  • Design-to-Code Export
  • Export selections as JSX/Tailwind components, HTML fragments, or standalone HTML pages with external assets, and import HTML/CSS back into editable design layers.
  • Design File Analysis
  • CLI commands analyze colors, typography, spacing, and repeated patterns across design files, extract design tokens, and lint for naming, layout, and accessibility issues.
  • Component System
  • Create reusable components with instance overrides, group variants into component sets, define design variables with modes and collections for theming across documents.
  • Cross-Platform Deployment
  • Ships as a 7 MB Tauri v2 desktop app for macOS, Windows, and Linux, runs as a PWA in any browser, and supports Docker via Dev Container.