Shareable diagrams with real-time collaboration
Each participant in a space gets assigned a random bright color. Their cursor is shown in that color to everyone else in the room.

- Checkout the repo
- Start a local web server, e.g.
python3 -m http.server --cgi 8080
- Open http://localhost:8080/ in the browser
-
Create environment variables
.env
with your project credentials:VITE_SUPABASE_URL=your-project-url VITE_SUPABASE_ANON_KEY=your-anon-key
-
In Supabase, create a table documents with the following columns:
id
(text, primary key)data
(text)user_id
(uuid, referencesauth.users
)
-
Enable Row Level Security for the table and add a policy:
user_id = auth.uid()
. -
Create a public storage bucket named images.
-
Deploy an Edge Function called generate-link-preview that accepts
{ url }
in the body and returns preview information.
Authentication with email/password is enabled via the Supabase dashboard. The
app wraps all React components in SessionContextProvider
and uses the Supabase
client from src/lib/supabase.ts
.
