Skip to content

joerambo/live-canvas-sveltekit

Repository files navigation

Live Canvas: Real-Time Canvas Collaboration

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