Getting Started

Installation

Add elah to your React application. The SDK is published to npm as @elah/editor — install it with your package manager and wire it into Next.js or Vite.

Requirements

React

≥ 18.0

Concurrent mode required for Zustand subscription performance

TypeScript

≥ 5.0

Strict mode recommended

Node.js

≥ 18.0

Required for build tooling

Browser

Chromium 108+

WebCodecs + WebGL2 required; Firefox partial support

mediabunny

bundled

Ships as a dependency of @elah/core — no separate install needed

Install

Install @elah/editor. The decode/export backend (mediabunny) ships bundled — there's nothing else to add:

npm

npm install @elah/editor

Using a different package manager:

pnpm / yarn / bun

pnpm add @elah/editor
yarn add @elah/editor
bun add @elah/editor

Peer Dependencies

@elah/editor only expects React to be provided by your app — mediabunny and the rest of the pipeline are pulled in transitively. A typical package.json looks like:

package.json

{
  "dependencies": {
    "@elah/editor": "^0.2.0",
    "react": "^18 || ^19",
    "react-dom": "^18 || ^19"
  }
}

The package ships ESM with bundled TypeScript declarations — no separate @types install required.

Next.js Setup

Add the SDK packages to transpilePackages so the bundler can resolve the export Web Worker that @elah/core spawns via new URL('./ExportWorker.js', import.meta.url):

next.config.mjs

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  // @elah/editor (+ its @elah/core / @elah/timeline deps) and mediabunny
  // ship modern ESM that must be transpiled by the consuming app.
  transpilePackages: ['@elah/editor', '@elah/core', '@elah/timeline', 'mediabunny'],
}

export default nextConfig

The editor touches browser-only APIs (Canvas, Web Audio, Workers), so render it client-side only with a dynamic import:

app/editor/page.tsx

'use client'

import dynamic from 'next/dynamic'

// ssr: false keeps the editor out of the server bundle.
const Editor = dynamic(() => import('@/components/Editor'), {
  ssr: false,
})

export default function Page() {
  return <Editor />
}

Vite Setup

Serve the SDK packages from their real files (instead of esbuild's pre-bundle) so the new URL(...) worker reference inside @elah/core resolves correctly:

vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  worker: {
    // @elah/core spawns the MP4 export worker as a module worker.
    format: 'es',
  },
  optimizeDeps: {
    exclude: ['@elah/editor', '@elah/core', '@elah/timeline', 'mediabunny'],
  },
})

Up Next

Quick Start

Build the full editor in under 20 lines — wire your demuxer, mount Preview, and add the Timeline.

Continue to Quick Start →