Lumen

A calm, infinite whiteboard for thinking and diagramming.

Lumen is a browser-based diagramming tool built from scratch with vanilla HTML, CSS, and JavaScript. No frameworks. Clean modular architecture, premium minimal design inspired by Linear, Raycast, Arc, Notion, and Paper by WeTransfer.

Features

• Infinite canvas with smooth pan (Space + drag / middle mouse) and zoom (scroll)
• Freehand pen with pressure support
• Perfect shapes: Rectangle, Ellipse, Diamond, Arrow, Line
• Text tool
• Multi-select, move, resize with handles
• Undo / Redo (deep history via snapshots)
• Floating selection toolbar + style panel
• Raycast-style command bar (⌘K / Ctrl+K)
• Dark & light themes (first-class)
• Grid toggle
• Export PNG / JSON (SVG partial)
• LocalStorage auto-restore + file save/load
• Keyboard-first shortcuts
• Context menu
• Responsive layout

Quick Start

Just open index.html in a modern browser (Chrome, Firefox, Safari, Edge).

No build step required. ES modules are used.

# Optional: serve locally for better module loading
npx serve .
# or
python -m http.server 8080

Then visit the served URL.

Architecture

lumen/
├── index.html          # App shell + UI structure
├── css/
│   └── main.css        # Design system (light/dark tokens, components)
├── js/
│   ├── main.js         # Wiring, events, UI controllers
│   ├── core/
│   │   ├── Engine.js   # Canvas engine, camera, rendering, selection, ops
│   │   └── History.js  # Undo/redo stacks
│   ├── elements/
│   │   ├── Element.js  # Base element
│   │   └── Shape.js    # Shape, Path, Arrow, TextEl
│   └── utils/
│       └── helpers.js  # uid, clamp, colors, etc.
└── README.md

Core concepts

• Engine owns the canvas, camera, element list, selection set, and rendering loop (requestAnimationFrame + dirty flag).
• Elements are plain classes with draw(ctx), toJSON(), bounds, and move/resize methods.
• History stores JSON snapshots of the full element list (simple and reliable for this scale).
• Tools are driven by engine.tool string + pointer state machine in main.js.

Keyboard Shortcuts

Key	Action
V	Select
H	Hand / Pan
P	Pen
R	Rectangle
O	Ellipse
A	Arrow
T	Text
Space + drag	Pan
Scroll	Zoom
⌘/Ctrl + Z	Undo
⌘/Ctrl + Shift + Z	Redo
⌘/Ctrl + D	Duplicate
⌘/Ctrl + A	Select all
⌘/Ctrl + S	Save
⌘/Ctrl + K	Command bar
Delete / Backspace	Delete selection
Escape	Clear selection / close overlays

Extending

• New shape: subclass Element or extend Shape, add to fromJSON factory in Engine.
• New tool: add button + data-tool, handle in pointerdown/move/up in main.js.
• Smart arrows / connectors: extend Arrow with attachment logic on move.
• Groups: add groupId handling and a Group element that transforms children.

Design Notes

• Color tokens live in CSS custom properties; dark mode swaps the entire palette.
• Accent is indigo (#6366f1 / #818cf8).
• UI uses soft shadows, 6–14px radii, Inter + JetBrains Mono.
• Empty state and command bar give the product a distinct personality.

License

MIT — use freely.

Built with care. Enjoy thinking on an infinite canvas.