# elah

> Framework-agnostic, browser-native video infrastructure. The timeline, rendering, and editing foundation for professional creative applications built entirely on the web. Currently supports Next.js and React, with React Native and more frameworks coming soon.

Elah is a browser-native, frame-accurate video editing engine: a framework-agnostic
core (timeline engine, pure resolver, WebGL2 renderer, WebCodecs decode, MP4 export)
with React bindings on top, shipped as five packages (@elah/core, @elah/react,
@elah/timeline, @elah/editor and the headless @elah/cli). Time is integer frames; every edit funnels through one
engine; `resolveTimeline(frame, project) → Scene` is the pure bridge to any renderer.

For full blog content in one fetch, see https://www.elah.dev/llms-full.txt. Individual posts are
available as raw markdown at https://www.elah.dev/blog/<slug>/md.

## Documentation

- [Docs home](https://www.elah.dev/docs): Overview of the Elah SDK and how its five packages fit together.
- [Installation](https://www.elah.dev/docs/installation): Install @elah/editor and its peer dependencies.
- [Getting started](https://www.elah.dev/docs/getting-started): Mount EditorProvider, Preview, and Timeline into a working editor.
- [Timeline](https://www.elah.dev/docs/timeline): The @elah/timeline UI: tracks, clips, ruler, playhead, drag/trim, zoom, clip virtualization, multiple video tracks.
- [Editor](https://www.elah.dev/docs/editor): The @elah/editor SDK: EditorProvider, Preview, AssetPanel, transform overlays with crop, text overlays, transitions.
- [Clips & tracks](https://www.elah.dev/docs/clips): Multiple video tracks, Clip.speed, Clip.crop, Clip.cornerRadius, protected and pinned tracks, growClipToAssetDuration.
- [Text templates & motion](https://www.elah.dev/docs/text-templates-and-motion): Layered MotionSpec animation, easings, sampleTextAnimation, the 14 built-in text templates, applyTextTemplate, text style presets.
- [Frame sequences](https://www.elah.dev/docs/frame-sequences): Ordered image sets (360 degree orbits, storyboards): createFrameSequence, FrameSequenceController, createFramePreloader, frameSequenceToProject.
- [Project documents](https://www.elah.dev/docs/project-documents): readProjectDocument, ProjectDocumentError, PROJECT_VERSION, relinkProjectMedia, loadProject options, media library snapshots.
- [Theming](https://www.elah.dev/docs/theming): The --elah-* design tokens, the elah-root scope, the three stylesheets, the classNames slot API.
- [@elah/react](https://www.elah.dev/docs/react): React bindings: EditorContext, useEditor, store hooks, media library and audio mixer hooks, and using the vanilla stores without React.
- [For AI agents](https://www.elah.dev/docs/agents): The one-file integration guide, AGENTS.md, headless rendering with @elah/cli, llms.txt, and the planned WebMCP tools (coming soon, not shipped).
- [Export](https://www.elah.dev/docs/export): Render a project to MP4 with exportVideo (worker + OffscreenCanvas + mediabunny). outputHeight is the stage short edge.
- [CLI & Server](https://www.elah.dev/docs/cli): The @elah/cli headless runtime: build specs, one-shot exports, and elah serve — a self-hosted HTTP render server with bit-identical output.
- [Architecture](https://www.elah.dev/docs/architecture): Engine design: integer frames, the one mutation funnel, pure resolver, dumb renderers.
- [API reference](https://www.elah.dev/docs/api): Public API surface across @elah/core, @elah/react, @elah/timeline, and @elah/editor.
- [Plugins](https://www.elah.dev/docs/plugins): Extension points and integration patterns.

## Resources

- [Playgrounds](https://www.elah.dev/playgrounds): Live, editable examples running the SDK in the browser.
- [Examples](https://www.elah.dev/examples): Focused code samples for common tasks.
- [Blog](https://www.elah.dev/blog): Engineering notes and release posts.
- [Changelog](https://www.elah.dev/changelog): Release history for @elah/core, @elah/react, @elah/timeline, @elah/editor, and @elah/cli.

## Blog posts

- [0.6.0: multiple video tracks, clip speed, layered text motion and stored projects](https://www.elah.dev/blog/elah-0-6-0/md): The engine used to refuse a second video track. 0.6.0 allows several, adds clip speed, crop and corner radius, layered text motion with 14 templates, and a way to open a stored project without ever getting half of one back.
- [Verifying a 25-commit port: the eight defects](https://www.elah.dev/blog/verifying-a-25-commit-port/md): We ported a premium editor into the open-source packages and the tests passed. Verifying it anyway found eight real defects, from a disposed GPU texture to a ruler that read 00:90. Here is each one, and what only a build catches.
- [Frame sequences: 360° orbits as timelines](https://www.elah.dev/blog/frame-sequences-as-timelines/md): A product orbit, a generated image set and a storyboard are all the same thing: ordered images addressed by index. The core now models that directly, and turns it into an ordinary project when you want to edit or export it.
- [WebMCP and the editor as a tool surface](https://www.elah.dev/blog/webmcp-and-the-editor-as-a-tool-surface/md): Agents already drive Elah from a one-file guide and a JSON render spec. WebMCP would let them drive an open editor in the browser. What the timeline already gets right for that, and where this stands: planned, with no date.
- [Solving WebCodecs Frame Pool Exhaustion](https://www.elah.dev/blog/webcodecs-frame-pool-exhaustion/md): When the hardware output pool fills up, WebCodecs VideoDecoder stalls silently. Here's how we found it, why the copy-and-close pattern fixes it, and what to watch for in your own decode pipeline.
- [Why the Core Has No Renderer Imports](https://www.elah.dev/blog/renderer-agnostic-core/md): A renderer-agnostic core means resolveTimeline() runs identically in the browser, in a worker, and in tests. Here's the interface boundary we drew and how it keeps preview and export in sync.
- [Frames as the Primitive Unit of Time](https://www.elah.dev/blog/integer-frames/md): Every NLE that uses floating-point seconds eventually ships a subtle drift bug. Using integer frames eliminates an entire class of problems at the cost of one invariant every developer needs to know.
- [Snapshot-Overlay Transitions: Preview and Export in Sync](https://www.elah.dev/blog/transition-architecture/md): GPU crossfade is the obvious approach. It is also the wrong one for a renderer-agnostic system. Here is the snapshot-overlay architecture that keeps CSS preview and OffscreenCanvas export using the same resolver output.
- [Building a WebGL2 Renderer for an NLE](https://www.elah.dev/blog/webgl2-gpu-renderer/md): Textured quads, zIndex sorting, context-loss recovery, and the 2D-canvas-to-texture pipeline for text. A walkthrough of the GpuRenderer architecture.
- [One Mutation Funnel: TimelineEngine with Immer](https://www.elah.dev/blog/immer-timeline-engine/md): All edits go through one commit path. Structural sharing, batching, typed events, and a redo stack that does not bloat memory — how the TimelineEngine is designed.

## Source & packages

- [Elah for AI agents — complete integration guide](https://raw.githubusercontent.com/elahlabs/elah/main/docs/ai/ELAH_FOR_AI_AGENTS.md): Single self-contained file with the full API surface, bundler setup, 12 copy-paste recipes, and the common mistakes. Written for coding agents building a custom editor UI — start here if you are generating code against this SDK.
- [GitHub repository](https://github.com/elahlabs/elah): Source, ARCHITECTURE.md, and AGENTS.md (the brief for coding agents in the checkout).
- [@elah/editor on npm](https://www.npmjs.com/package/@elah/editor): The full React editor SDK package.
- [@elah/timeline on npm](https://www.npmjs.com/package/@elah/timeline): React timeline UI components and hooks.
- [@elah/react on npm](https://www.npmjs.com/package/@elah/react): React bindings: editor context, store hooks, audio mixer hooks.
- [@elah/core on npm](https://www.npmjs.com/package/@elah/core): The framework-agnostic headless engine, resolver, renderer, and export pipeline.
- [@elah/cli on npm](https://www.npmjs.com/package/@elah/cli): Headless CLI and render server: elah build / export / serve, plus a Node library API.