22bcd8a713
Enhance CLAUDE.md with detailed architecture, key modules, and AI configuration. Introduce LICENSE file with MIT License terms. Remove obsolete Header component to streamline the codebase.
92 lines
3.6 KiB
Markdown
92 lines
3.6 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), 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](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
|
|
- **UI:** [shadcn/ui](https://ui.shadcn.com/) (Radix + Tailwind primitives)
|
|
- **Styling:** [Tailwind CSS](https://tailwindcss.com/) v4
|
|
- **Icons:** [Lucide React](https://lucide.dev/)
|
|
- **Server:** [Nitro](https://nitro.build/) (API routes)
|
|
- **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.
|
|
|
|
### 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](./LICENSE)
|