mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-06-01 03:14:29 +07:00

The world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.

agent agent-team ai claude claude-code codex fimga flutter html mcp opencode openpencil pencil react react-native svelte ui vibecoding vibedesign vue

Find a file

Kayshen-X cc17b372eb feat(canvas): implement parent-child drag and transformation functionality - Introduce a new module for managing parent-child drag sessions, including functions for initiating, ending, and propagating transformations (move, scale, rotate) to descendant objects. - Enhance the canvas event handling to support these transformations, ensuring visual feedback during drag operations. - Add store methods for scaling and rotating descendant nodes in the document structure, maintaining consistency between the canvas and the underlying data model.		2026-02-19 13:53:09 +08:00
.vscode	Initialize OpenPencil project with essential files and configurations	2026-02-17 21:14:16 +08:00
public	feat(ai): add Setup Agents & MCP dialog with multi-provider support	2026-02-19 03:15:36 +08:00
server/api/ai	feat(chat): enhance chat streaming with 'thinking' state and improve SVG handling in toolbar	2026-02-19 12:52:30 +08:00
src	feat(canvas): implement parent-child drag and transformation functionality	2026-02-19 13:53:09 +08:00
.cta.json	Initialize OpenPencil project with essential files and configurations	2026-02-17 21:14:16 +08:00
.gitignore	Initialize OpenPencil project with essential files and configurations	2026-02-17 21:14:16 +08:00
bun.lock	feat(dependencies): update @anthropic-ai/claude-agent-sdk to 0.2.47 and add @anthropic-ai/sdk 0.77.0; enhance error handling in connect-agent and improve chat-message display logic	2026-02-19 11:12:23 +08:00
CLAUDE.md	chore: update documentation and add MIT License	2026-02-18 22:35:17 +08:00
components.json	feat(editor): scaffold core canvas engine and editor layout	2026-02-18 21:49:16 +08:00
LICENSE	chore: update documentation and add MIT License	2026-02-18 22:35:17 +08:00
package.json	feat(dependencies): update @anthropic-ai/claude-agent-sdk to 0.2.47 and add @anthropic-ai/sdk 0.77.0; enhance error handling in connect-agent and improve chat-message display logic	2026-02-19 11:12:23 +08:00
README.md	chore: update documentation and add MIT License	2026-02-18 22:35:17 +08:00
tsconfig.json	Initialize OpenPencil project with essential files and configurations	2026-02-17 21:14:16 +08:00
vite.config.ts	feat(editor): scaffold core canvas engine and editor layout	2026-02-18 21:49:16 +08:00

README.md

OpenPencil

Open-source vector design tool with a Design-as-Code philosophy. An alternative to Pencil.dev.

Features

Canvas: Infinite canvas with pan (Space+drag / middle mouse / Hand tool) and zoom (scroll wheel), smart guides & snapping
Drawing tools: Rectangle, Ellipse, Line, Frame, Text
Property editing: Position, size, rotation, fill (solid + gradient), stroke, corner radius, opacity, effects (shadow, blur)
Layer panel: Tree view, drag reorder, visibility toggle, lock, context menu, selection sync, rename
Undo/Redo: Full history with batched drag operations (Cmd+Z / Cmd+Shift+Z)
Clipboard: Copy, cut, paste, duplicate (Cmd+C/X/V/D)
Grouping: Group / ungroup selected elements (Cmd+G / Cmd+Shift+G)
File operations: Save/open .pen files (JSON-based, Git-friendly), auto-save support
Export: PNG and SVG export with scale options (Cmd+Shift+E)
Code generation: Generate React+Tailwind or HTML+CSS code from designs (Cmd+Shift+C)
AI assistant: Built-in AI chat panel for design assistance (Cmd+J), supports Anthropic API or local Claude Code
Keyboard shortcuts: Tool keys (V/R/O/L/T/F/H), Delete, arrow nudge, bracket keys for z-order, Cmd+A select all

Tech Stack

Framework: TanStack Start (React 19, SSR, file-based routing)
Canvas: Fabric.js v7
State: Zustand v5
UI: shadcn/ui (Radix + Tailwind primitives)
Styling: Tailwind CSS v4
Icons: Lucide React
Server: Nitro (API routes)
Runtime: Bun
Build: Vite 7

Getting Started

bun install
bun --bun run dev

Open http://localhost:3000 and click "New Design" to enter the editor.

AI Configuration

The AI assistant works in two modes:

Anthropic API: Set ANTHROPIC_API_KEY in .env
Local Claude Code: No config needed — uses Claude Agent SDK with OAuth login as fallback

Scripts

Command	Description
`bun --bun run dev`	Start dev server on port 3000
`bun --bun run build`	Production build
`bun --bun run preview`	Preview production build
`bun --bun run test`	Run tests (Vitest)

Project Structure

src/
  canvas/            # Fabric.js canvas engine, drawing, sync, guides
  components/
    editor/          # Editor layout, toolbar, status bar
    panels/          # Layer panel, property panel, AI chat, code panel
    shared/          # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
    ui/              # shadcn/ui primitives (Button, Select, Slider, etc.)
  hooks/             # Keyboard shortcuts
  lib/               # Utility functions (cn class merging)
  services/
    ai/              # AI chat service, prompts, design generation
    codegen/         # React+Tailwind and HTML+CSS code generators
  stores/            # Zustand stores (canvas, document, history, AI)
  types/             # PenDocument/PenNode types, style types, variables
  utils/             # File operations, export, node clone, syntax highlight
  routes/            # TanStack Router pages (/, /editor)
server/
  api/ai/            # Nitro API: streaming chat, AI generation

Roadmap

Component system (reusable components with instances & overrides)
Design variables/tokens with CSS sync
Path / pen tool
Boolean operations (union, subtract, intersect)
Multi-page support
Collaborative editing

License

MIT