Own product · 2025

LumenFull-Stack Canvas + Docs Workspace

Docs and an infinite canvas in one workspace, with an AI sidebar.

Own product
—
Year
2025
Role
Design + Full-stack
Services
Product design, Full-stack
Stack
Next.js · React · TypeScript · Tailwind CSS · Framer Motion · Radix UI · Supabase · PostgreSQL · Google Gemini · HTML5 Canvas

The challenge

Structured docs and freeform thinking usually live in two different apps.

The idea

One workspace that flips between a block editor and an infinite canvas, on the same data, with a Gemini sidebar for rewrites and summaries.

Read the full build notes

A workspace that doesn't make you choose between structured docs and freeform thinking. Switch between a block editor and an infinite canvas — same app, same data, zero context switching. The docs side is a full block editor with headings, code blocks, images, todos, callouts, and comments. Every page can be shared publicly with a unique link. Flip to canvas mode and you get an infinite whiteboard with sticky notes, freehand drawing (pen, eraser, highlighter), and smooth pan/zoom. An AI sidebar powered by Gemini handles rewrites, summaries, brainstorming, and grammar fixes without leaving the editor. Auth, database, and row-level security are all Supabase. Updates are optimistic — UI moves first, debounced sync writes to Postgres 300ms later. The canvas drawing system uses raw HTML5 Canvas API with device pixel ratio scaling, no external drawing library. Everything runs on a single Next.js app with the App Router.

Lumen

Key screens

In motion

On the phone

Lumen — On the phone 1
Lumen — On the phone 2
Lumen — On the phone 3
Start a project