vndangkhoa/openpencil
1
0
Fork 0
mirror of https://github.com/ZSeven-W/openpencil.git synced 2026-05-31 19:04:29 +07:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
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.
3 commits 3 branches 23 tags 44 MiB
TypeScript 99.3%
JavaScript 0.5%
Shell 0.1%
Find a file
Kayshen-X a56577ea85 feat(panels): add property inspector and layer management 
Implement property panel with sections for size, fill, stroke, corner
radius, text, appearance, and effects. Add layer panel with drag-and-drop
reordering, visibility toggles, and right-click context menu. Shared
form components: color picker, number input, and dropdown select.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-18 21:49:24 +08:00
.vscode Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
public Initialize OpenPencil project with essential files and configurations 2026-02-17 21:14:16 +08:00
src feat(panels): add property inspector and layer management 2026-02-18 21:49:24 +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(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
CLAUDE.md feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
components.json feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
package.json feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +08:00
README.md feat(editor): scaffold core canvas engine and editor layout 2026-02-18 21:49:16 +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)
  • 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

Getting Started

bun install
bun --bun run dev

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

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
    panels/        # Layer panel, property panel, AI chat, code panel
    shared/        # Reusable UI (ColorPicker, NumberInput, ExportDialog, etc.)
  hooks/           # Keyboard shortcuts
  services/
    ai/            # AI chat service, prompts, design generation
    codegen/       # React and HTML code generators
  stores/          # Zustand stores (canvas, document, history, AI)
  types/           # PenDocument/PenNode types, style types
  utils/           # File operations, export, node clone, syntax highlight
  routes/          # TanStack Router pages (/, /editor)
server/
  api/             # Server-side API endpoints

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