Live Canvas

Experiment with real-time canvas collaboration using sveltekit.

The goal is to create an interactive canvas with controls to manipulate images and text. Users create projects and share sessions with external users for real-time collaboration. Projects always reflect the latest canvas state from the most recent session without the need for timed autosaves or user interaction.

Stack

List of key libraries and services used in the project.

library / service	scope	description
SvelteKit	framework	app framework with svelte + vite
Supabase	auth db storage	user management, postgres, and file store
Fabric	canvas	html5 canvas library for object/layer methods
Liveblocks	websocket storage	real-time data store for canvas state
Tailwind	styles	css utility framework
Vercel	infrastructure	serverless deployments

note: list may change over the course of the project while trying different strategies. I'll update as roadmap items are closed and considered stable.

Roadmap

• layout - app structure and core pages
• auth - user sign up / sign in
• projects - create new project with general settings
• projects - launch and edit existing project
• projects - share collaborative session via url

Develop

Setup

# create environment variables
cp .env.example .env

# install packages
pnpm install

Local Dev Server

pnpm dev

# shortcuts:
  # r - to restart server
  # u - to show server url
  # o - to open in browser
  # c - to clear console
  # q - to quit

Build / Preview

# output production build
pnpm build

# preview production build
pnpm preview