Design Desk

Design Desk is a local-first design studio for building and reviewing UI. It includes a polished starter document, strong typing across the model and ops engine, real-time collaboration over a bundled WebSocket server, replayable history, and export to both JSON and React + Tailwind.

Quick start (one command)

npm install
npm run dev

• App: http://localhost:5173
• Local collaboration server health: http://localhost:8787
• The app auto-creates a ?sessionId=... URL so two tabs can collaborate immediately.

Scripts

• npm run dev: start Vite and the local collaboration server together
• npm run build: typecheck via project references, then build the app
• npm run lint: run ESLint with zero warnings allowed
• npm run typecheck: run TypeScript project reference checks
• npm run test: run the Vitest suite
• npm run export -- --input <file> --out <dir>: deterministic export pipeline

Export example

npm run export -- --input ./examples/starter.design.json --out ./tmp/export

This writes canonical JSON plus deterministic React + Tailwind output to ./tmp/export.

What you can do

1. Design on a canvas: insert frames, groups, shapes, text, images, icons, buttons, and charts
2. Collaborate in real time: presence, cursors, selections, and edits sync across tabs in the same session
3. Edit with precision: inspector controls for geometry, styling, and text
4. Organize layers: search, rename, lock, hide, and reorder via drag and drop
5. Move faster with guides: grid, alignment, and distribution snapping during drag
6. Review changes: version history snapshots with restore
7. Time travel: replay your edit timeline and branch from any point
8. Prototype and preview: add hotspots and navigate flows in preview mode
9. Comment in context: pinned threads with resolve and reopen
10. Save, import, export: file menu actions plus CLI export to JSON and React + Tailwind

How to enable multiplayer mode in two tabs

1. Run npm run dev
2. Copy the session link from the top bar
3. Open the same link in a second tab
4. Move objects in one tab and watch cursors, selections, and edits sync

Replay mode

1. Make a few edits on the canvas
2. Open the Replay tab in the left panel
3. Scrub backward, change playback speed, and step frame by frame
4. Use "Branch from here" to replace the live document with the selected frame

Repository map

• src/core/*: framework-agnostic model, ops, determinism, sync, replay, export
• src/features/*: UI features (canvas, layers, inspector, prototype, comments, replay)
• src/app/*: app shell layout and wiring
• src/ui/*: shared UI primitives
• server/*: local WebSocket collaboration server
• scripts/*: repo scripts, including the export CLI
• examples/*: demo-ready design files
• docs/*: architecture and brand guidance
• documentation.md: concise operator guide kept in sync with the milestones
• plans.md: source-of-truth execution plan and decision log

Architecture and docs

• Architecture overview: docs/architecture.md
• Working guide: documentation.md
• Milestones and decisions: plans.md