01cc22412e
Set up the Fabric.js v7 canvas integration with bidirectional sync to a Zustand document store. Includes drawing tools (select, rectangle, ellipse, line, text, frame, hand), viewport pan/zoom, smart guides, dimension labels, and the main editor layout with toolbar and status bar. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
81 lines
3 KiB
Markdown
81 lines
3 KiB
Markdown
# OpenPencil
|
|
|
|
Open-source vector design tool with a Design-as-Code philosophy. An alternative to [Pencil.dev](https://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
|
|
|
|
- **Framework:** [TanStack Start](https://tanstack.com/start) (React 19, SSR, file-based routing)
|
|
- **Canvas:** [Fabric.js](http://fabricjs.com/) v7
|
|
- **State:** [Zustand](https://zustand-demo.pmnd.rs/) v5
|
|
- **Styling:** [Tailwind CSS](https://tailwindcss.com/) v4
|
|
- **Icons:** [Lucide React](https://lucide.dev/)
|
|
- **Runtime:** [Bun](https://bun.sh/)
|
|
- **Build:** [Vite](https://vite.dev/) 7
|
|
|
|
## Getting Started
|
|
|
|
```bash
|
|
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
|