JustDraw is a local-first technical sketchbook for drawing ideas, system architecture, and product flows. It combines a tactile, hand-drawn canvas with practical architecture and interface presets—all in a fast browser-based editor with no account required.
Requirements: Node.js 20.9+ and pnpm 10.
pnpm install
pnpm devThe development server runs at http://localhost:5173. Production mode uses the same port:
pnpm build
pnpm start- Serializable, React-driven SVG scene with crisp rendering at every zoom level
- Rectangle, ellipse, diamond, line, arrow, freehand, text, and sticky-note tools
- Deterministic Rough.js outlines with hachure, cross-hatch, and solid fills
- Pressure-aware perfect-freehand pencil strokes with natural rounded ends
- Multi-select, marquee, group move, resize, endpoint editing, duplicate, delete, and reorder
- Editable labels through a native textarea overlay with clipboard and IME support
- Searchable preset library for people, flowcharts, architecture, and product/UI diagrams
- Insertable system-flow and product-map templates
- Pointer-centered trackpad zoom, pan, reset, and fit-to-content controls
- Undo/redo, copy/paste, keyboard shortcuts, and touch/pen pointer support
- JSON import/export, editable SVG export, and high-resolution PNG export
- Floating canvas-first chrome, contextual visual style controls, and mobile bottom sheets
- Drag eraser, reusable tool lock, optional dot paper, and editable compound library scenes
| Action | Shortcut |
|---|---|
| Select | V or 1 |
| Hand / pan | H or hold Space and drag |
| Rectangle / ellipse / diamond | R / O / D |
| Arrow / line | A / L |
| Pencil / text / note | P / T / N |
| Eraser | E |
| Lock active drawing tool | Q |
| Select all | Ctrl/Cmd+A |
| Nudge selection | Arrow keys (Shift for 10px) |
| Delete selected | Delete or Backspace |
| Undo / redo | Ctrl/Cmd+Z / Shift+Ctrl/Cmd+Z |
| Copy / paste / duplicate | Ctrl/Cmd+C / Ctrl/Cmd+V / Ctrl/Cmd+D |
| Zoom | + / - |
| Fit content | 0 |
| Help | ? |
Hold Shift while drawing to constrain box proportions or snap lines and arrows to 45-degree angles. Double-click text, notes, icons, or labeled shapes to edit their text.
Documents save automatically after a short debounce to the versioned browser key justdraw.document.v2. Data stays on the device. On first load, JustDraw attempts a safe one-time migration from the old localStorage.canvasData format; malformed data falls back without breaking the editor.
- JustDraw JSON preserves the complete editable document, including viewport and styles.
- SVG exports a scalable vector scene suitable for design tools and documentation.
- PNG exports a 2× raster image on the warm paper background.
Browser storage is not a backup. Export a JustDraw JSON file for important boards.
pnpm typecheck
pnpm lint
pnpm test
pnpm buildUnit tests cover scene geometry, element creation, history behavior, persistence validation and migration, and pointer-centered viewport zoom.
Next.js 16 App Router, React 19, TypeScript 6, Tailwind CSS 4, Rough.js, perfect-freehand, Lucide React, and Vitest 4. pnpm is the sole package manager.