Build video into
your product.

Write video in HTML, CSS and React. Put a player and an editor in your app, then render MP4s in the browser or on our cloud.

Start buildingRender in the cloud

Try it locally. No account required.

Motion catalog ↗

Turn app data into personalized videos.

Give each customer a recap with their activity, totals, and progress.

Download HTML sourceIllustrative examples, rendered with Editframe.

Follow one video from HTML to every customer.

Daybreak Coffee is a fictional customer. The elements, commands and API calls in the film are real.

How Editframe works
0:00 / 0:52
Film outline
  1. Write the video in HTML. Daybreak Coffee, a fictional customer, types its morning greeting as an ef-timegroup holding an ef-video and ef-text elements. The frame beside the code assembles as each element lands.
  2. Scrub every frame in the browser. A playhead drags back and forth across the footage, headline and detail tracks, and the frame follows it. The footage plays from its own URL and loads in segments as the playhead reaches them.
  3. Let your users edit it in your app. Inside Daybreak’s own studio page, a cursor selects the headline on the canvas, types a new one and switches the palette. The frame updates with every keystroke.
  4. Render it in the browser, a terminal or our cloud. The edited composition renders from an Export MP4 button, from the editframe render command and from the Renders API. Each path produces the same video.
  5. Long videos render as parallel 15-second slices. A 60-second Daybreak video is cut into four 15-second slices plus an init segment. GPU workers render them alongside slices from other renders, the fragments are joined without re-encoding, and render.completed reaches your webhook.
  6. Each row of data becomes a video. Each customer row becomes its own HTML document and render job, filling a wall of personalized Daybreak videos. The film ends on npm create @editframe@latest.

Send one render job per customer.

Post each composition’s HTML to the Renders API. GPU workers render it, and your webhook receives render.completed when the MP4 is ready.

See how cloud rendering works Renders API reference
server/send-mornings.ts
import { Client, createRender } from "@editframe/api";

const client = new Client(process.env.EDITFRAME_API_KEY);

for (const customer of customers) {
  await createRender(client, {
    html: morningHtml(customer),
    width: 1920,
    height: 1080,
    fps: 30,
    metadata: { customerId: customer.id },
  });
}

Keep your API key on your server.

Start with a working composition.

Reuse a transition, a title treatment, or a complete sequence.

Browse the motion catalog ↗

Build your
first video.

Start with npm create @editframe@latest. Local projects need no account or API key.

Start buildingTalk to us