A React video editor for your web app, in your brand

Everything renders in the user's browser. The SDK needs no server of yours or ours to edit or export; the only network request it makes is a license check, at most once a day. Export runs in a worker, so the editor stays smooth while it encodes, and returns the MP4 (H.264 video, AAC audio) as a Blob you can download or upload:

const mp4 = await editor.export({
  shortSide: 1080,                      // or omit for the project's size
  onProgress: (f) => setProgress(f),
  signal: abortController.signal,       // to cancel
})
const link = Object.assign(document.createElement('a'), {
  href: URL.createObjectURL(mp4),
  download: 'video.mp4',
})
link.click()

npm install @nitrakit/react

useNitrakitEditor creates the editor when the component mounts and frees it when it unmounts. NitrakitPreview and NitrakitEditor each render a div the editor fills:

import { useNitrakitEditor, NitrakitPreview, NitrakitEditor } from '@nitrakit/react'

export function VideoEditor() {
  const editor = useNitrakitEditor({
    width: 1080,
    height: 1920,
    onRequest: async (request) => {
      if (request.kind === 'addMedia') {
        const file = await openMyMediaLibrary()
        return file ? { source: (await editor!.addMedia(startUpload(file), file)).source } : null
      }
      // anything else: the built-in picker
    },
  })

  return (
    <>
      <NitrakitPreview editor={editor} style={{ height: '60vh' }} />
      <NitrakitEditor editor={editor} style={{ height: 320 }} />
    </>
  )
}

Callbacks always call your latest version, so they can use current state. The full guide: React video editor component.

Each framework has a thin package over the same SDK, with everything from @nitrakit/web re-exported:

No framework? Use @nitrakit/web directly. Check support, load the WebAssembly module once, then give the preview and the controls an element each:

npm install @nitrakit/web

import { isSupported, load, setLicense } from '@nitrakit/web'

if (!isSupported()) showUnsupportedMessage()
await load()
setLicense('nk2.…')

import { createEditor } from '@nitrakit/web'

const editor = await createEditor({
  preview: document.getElementById('preview')!,
  editor: document.getElementById('editor')!,
  width: 1080,
  height: 1920, // the project's size: 9:16 vertical video
})

With Vite, exclude the package from dependency pre-bundling (optimizeDeps: { exclude: ['@nitrakit/web'] }) so its WebAssembly and font files resolve in development. See JavaScript video editor SDK for the web.

On the web the SDK has simple built-in pickers for every request: a file chooser for media, the browser's colour input, and lists for fonts, filters and text styles. They're there to get started. Files from the built-in media picker get random ids and aren't uploaded anywhere, so once you store media, answer onRequest with your own library and resolveMedia with a URL (signed, if you like) for each id. Media from another origin needs CORS. See Your pickers.

• Theme: colours, font and bar sizes.
• Fonts: the editor brings Inter; pass your brand fonts (TTF or OTF) and add a font for each script your users write in.
• Layouts: both parts, the timeline alone, or the preview with controls of your own.

You can build video editing on the web from parts: ffmpeg.wasm for processing, WebCodecs for decoding and encoding, a canvas or WebGPU for drawing. Each solves a piece. The editor around them (a timeline, a preview that matches the export, text, undo, pickers, saved projects) is the larger job, and it's the part Nitrakit ships ready to theme.