The problem
The operating problem behind the interface.
Early design work spreads across notes, reference images, and disconnected mockups. Moving between tools breaks the relationship between an idea, its inspiration, and the layout it becomes.
Scribbleplot
An infinite canvas for mapping ideas with notes, images, sketches, and connected layouts. Shared boards support live collaboration, comments, and portable exports, with a browser-only demo to try without an account.
Interface captured . The live site may have changed since.
- Role
- Canvas interaction design and full-stack engineering
- Delivery
- Self-hosted application + SQLite
- Availability
- Public product
- Workspace
- Infinite canvas + live collaboration
How it works
The system, drawn end to end.
Swipe to see the whole system
Keep ideas in context
Reference images, notes, and layouts sit together, connected by arrows, groups, and named frames.
Make collaboration visible
Shared operations, live cursors, and pinned comments give collaborators a common view of the board, with viewer and editor roles.
Let the work travel
Boards export as editable files with bundled images, while the account-free demo stores its work in the browser.
The approach
A product model designed around the decision.
Scribbleplot keeps inspiration and rough layouts together on one zoomable canvas. Notes, images, drawings, connectors, and frames share a common editing model, with live shared boards and a local demo that can carry into a new account.
Engineering scope
The system behind the surface.
- React and TypeScript canvas with viewport culling, touch gestures, and reversible editing operations
- Fastify and WebSocket synchronization with server-ordered operations and shared permission checks
- SQLite board persistence and portable exports with bundled images
