Editor

A timeline editor's plumbing — projects, panes, a timeline and a preview — with storage behind one interface.

The editor surface is a timeline editor in the shape of Frametic, Scenetic and Kinetic: a projects dashboard, an editor with a resizable canvas, timeline and inspector, a full-screen preview, and settings. It is built on Once UI core's SplitView, Scrubber and Setting rows.

Bash

node scripts/scaffold.mjs --surfaces editor --out ../my-editor

It requires no slices and runs on zero environment variables. Without the landing surface, / redirects to /editor.

Routes

/editor — the projects dashboard: create, duplicate, delete.
/editor/settings — preferences and keyboard shortcuts.
/editor/[id] — the editor.
/editor/[id]/preview — the project played back full-screen.

What it is, and what it is not

A project is a fixed-length composition of tracks, and a track is a row of clips that never overlap. There are three track kinds — scene, caption and audio — and every time is an integer in milliseconds. The editor moves, trims, splits and deletes clips, snaps to a step, locks and hides tracks, and keeps an undo history. The model is in src/lib/editor/types.ts and the pure operations on it are in timeline.ts. It is plumbing, not a renderer. Scenes and captions are drawn in the DOM by Stage.tsx, audio clips are data only and make no sound, and there is no export pipeline: nothing turns a project into a video file. That part is yours.

The seam

Projects live behind ProjectStore, in src/lib/editor/store.ts:

export interface ProjectStore {
  list(): Promise<ProjectSummary[]>;
  get(id: string): Promise<Project | null>;
  create(input: { name: string; aspect: Aspect; duration: number }): Promise<Project>;
  save(project: Project): Promise<Project>;
  duplicate(id: string): Promise<Project | null>;
  remove(id: string): Promise<void>;
  reset(): Promise<void>;
}

It ships as localProjectStore, which keeps projects in localStorage and seeds them with samples. Every method is async already, so a server store — a Supabase table, an API route, a file — is a new object with this shape assigned to projectStore in the same file, and nothing in the UI changes. The dashboard, the settings page's reset and useEditor all go through it. Preferences (default aspect and duration, snapping, autosave, loop) are per-browser and live separately in preferences.ts.

Adding a track kind

The kinds are a union rather than a registry on purpose. A new kind is a new clip type in types.ts, a new inspector and a new layer in the stage, and the type checker walks you to each place that has to handle it.

Last updated October 18, 2026

Edit this page on GitHub