editframe/render

Render your video.
Browser, CLI, or cloud.

Export in your app, render from your terminal, or automate with the cloud. One composition works across all three.

Render in the browser →Use the CLI →
Explore the architecture
BrowserCLICloud
Initiated byA person in your productA developer or CI jobYour server or an automated workflow
ExecutionWebCodecs in the browserHeadless Chrome and FFmpegA managed asynchronous job
CompletionEncoded bytes returned to your UIA file written to your chosen pathStatus, stream, or webhook for your application
API key
No
No
Yes

Add an export button.

Call exportVideo() on your workbench. Connect progress events to your UI and save the resulting MP4.
import "@editframe/elements"

const workbench = document.querySelector("ef-workbench")
const result = await workbench.exportVideo()
// Download, upload, or attach result.buffer.

React composition

Render the React components you already use.

Wrap a React composition with TimelineRoot so local export and headless rendering can mount a working copy of it. useTimingInfo keeps the component tied to timeline time.

Read React rendering docs →
import { TimelineRoot, Timegroup, useTimingInfo }
  from "@editframe/react"

function Scene({ id }) {
  const { percentComplete } = useTimingInfo()
  return <Timegroup id={id} mode="fixed" duration="5s"
    style={{ opacity: percentComplete }} />
}

<TimelineRoot id="root" component={Scene} />

Motion catalog

Start from a working composition.

Browse all studies ↗
Proportional Flow motion study previewProportional FlowShow changing quantities as a readable motion system.Contour Slice Volume motion study previewContour Slice VolumeRender dimensional transitions with code.

Render your first video.

Start locally. Add cloud rendering when you need it.

Build browser export →Automate a render →