How OpenLoom Works
Under the Hood

The Architecture

Three independent layers. You own the first two. The third is replaceable.

Your Browser, Your Rules

settings
├── provider: "supabase"           # Backend provider
├── supabaseProjectUrl: "https://…"# Your Supabase project URL
├── supabaseServiceRoleKey: "…"    # Service role key
│                                  # ⚠ NEVER uploaded. NEVER shared.
├── supabaseProjectRef: "…"        # Project reference ID
└── provisioned: true              # Backend setup complete

IndexedDB (openloom-blobs)
└── recording-blob                 # Temp recording before upload
                                   # Cleaned up after share

Inside Your Backend Project

OpenLoom currently uses Supabase as its backend. It stores video files, metadata, and reactions using Supabase's native services. Convex and Firebase support are coming soon.

storage/videos/
  {short-code}.webm     (12.4 MB)
  {short-code}.mp4      (14.1 MB)

Public URL:
  {project-url}/storage/v1/
    object/public/videos/{code}.webm

videos (table)
  ├── short_code: "a1b2c3d4"
  ├── title: "Q3 Product Demo"
  ├── storage_url: "https://..."
  ├── view_count: 142
  ├── duration_ms: 45200
  └── capture_mode: "window"

reactions (table)
  ├── video_short_code: "a1b2c3d4"
  ├── emoji: "🔥"
  └── timestamp: 12.5

ALTER TABLE videos ENABLE ROW LEVEL SECURITY;
ALTER TABLE reactions ENABLE ROW LEVEL SECURITY;

-- Only service role has access
CREATE POLICY "service_role_access" ON videos
  FOR ALL USING (true) WITH CHECK (true);

The Public API Surface

Each backend exposes a public API through its serverless function layer. These are the only way anyone — including the official viewer — can interact with your recordings. No backdoors, no admin panels, no hidden routes.

The Viewer is a Dumb Client

The OpenLoom web player at openloom.live is a completely stateless single-page application. It carries zero secrets and has zero special access. It's a static Next.js app exported and deployed on GitHub Pages — nothing more.

What happens when someone opens a link

The viewer does not know your admin credentials, your database schema, or your storage bucket name. It only knows the public serverless function URL — the same URL available to anyone with the link.

Deployed on GitHub Pages

The official web player at openloom.live is deployed as a static Next.js export on GitHub Pages. No server, no runtime, no build service — just static HTML/CSS/JS served from GitHub's CDN. This gives the viewer maximum transparency and zero operational complexity.

# The webviewer is a Next.js app with static export
# next.config.ts → output: "export"

# GitHub Actions workflow triggers on push to main:

1. Checkout repo → Install dependencies
2. next build → generates static /out directory
3. Upload /out as GitHub Pages artifact
4. Deploy to GitHub Pages environment

# Result: static files served at openloom.live
# Custom domain configured via CNAME record
# HTTPS provided automatically by GitHub

Deploy Your Own Viewer

Because the viewer is just a static web app with no built-in secrets, you can fork and deploy your own instance. This gives you full control and eliminates any dependency on openloom.live.

# 1. Fork the repository on GitHub
$ git clone https://github.com/your-fork/OpenLoom.git
$ cd OpenLoom/webviewer

# 2. Enable GitHub Pages in repo Settings → Pages
#    Source: "GitHub Actions"

# 3. Push to main — GitHub Actions builds & deploys automatically
$ git push origin main

# 4. (Optional) Add a custom domain in Settings → Pages
#    watch.yourcompany.com → CNAME to your-fork.github.io