Build video with code

Declarative HTML + CSS that renders to video. Script it, or use React. Instant preview. Parallel rendering at scale.

Loading
0:00
$npm create @editframe@latest
Get Early AccessDocs & Skills
{
}

Just
Code

HTML and CSS are the foundation. Add scripting for animation. Use React when you want components. No proprietary system to learn.

welcome-video.tsx
import { Timegroup, Video, Text } from '@editframe/react'


// Define your composition as a React component
const WelcomeVideo = ({ user }) => (
  <Timegroup mode="fixed" duration="5s"
    className="w-[1920px] h-[1080px] relative">
    <Video src="background.mp4" className="absolute inset-0" />
    <img
      src={user.avatar}
      className="absolute top-12 left-12 w-48 h-48 rounded-full"
    />
    <Text className="absolute top-32 left-72 text-7xl font-bold text-white">
      Welcome, {user.name}!
    </Text>
  </Timegroup>
)


// Preview instantly in browser (no build, no account)
<Preview>
  <WelcomeVideo user={{ name: 'Alex', avatar: 'avatar.jpg' }} />
</Preview>

HTML & CSS

The foundation. Tailwind, flexbox, grid, animations — standard web layout.

Scripting & React

Add scripting for dynamic content. Use React components when you want them.

Render Anywhere

Same code runs in browser, cloud, or local. Your choice.

Prompt it

Skills are documentation your agent can use as tools. Describe what you want. Get working code.

prompt
@editor-gui
Build a video trim tool. Video preview on top that respects trim bounds. Below it a trim bar: play/pause toggle on the left, thumbnail strip with overlaid draggable trim handles on the right. Info bar with in/out/duration timecodes.
Loading tool...
Explore docs & skills

Render
Anywhere

One composition, three execution contexts. Choose the one that fits.

Browser

Export video directly from the browser. No server round-trip. Nothing to install.

renderToVideo(comp)
H.264, VP9, AV1 via WebCodecs
No upload required
Embed export in your app

CLI

Render from the command line. Same composition, headless Chrome under the hood.

$ editframe render
H.264, VP9, AV1 via WebCodecs
Scriptable and CI-friendly
GPU-accelerated encoding

Cloud

Parallel fragment rendering. Split your video into segments, encode concurrently, reassemble.

$ editframe cloud-render
H.264 via server-side FFmpeg
Parallel fragment processing
API and webhook integration

Under the hood

The rendering infrastructure that makes this possible.

Parallel Fragments

Split, process, recombine

Loading…
JIT Streaming

On-demand transcoding, zero wait

×
Data-Driven

One template, infinite videos

Define your video once. Pass different data via CLI or API. Render thousands of personalized videos automatically.

welcome-sarah.mp4
SC

Welcome

Sarah Chen!

Product Lead at Acme Corp

+47%

growth

0:00 / 0:05
users.json
{
  "name": "Sarah Chen",
  "role": "Product Lead",
  "company": "Acme Corp",
  "metric": "+47%",
  "initials": "SC",
  "color": "#E53935",
  "chartData": [
    0.3,
    0.45,
    0.38,
    0.62,
    0.7,
    0.85,
    0.92
  ]
}
welcome-video.tsx
import { Timegroup, Text } from '@editframe/react';
import { Canvas } from '@react-three/fiber';
import { getRenderData } from '@editframe/elements';
import { FloatingShapes } from './FloatingShapes';
import { Avatar } from './Avatar';
import { GrowthChart } from './GrowthChart';


export function WelcomeVideo() {
  const data = getRenderData<UserData>();
  // Current: { name: "Sarah Chen", metric: "+47%" }


  return (
    <Timegroup mode="fixed" duration="5s"
      className="w-[1920px] h-[1080px] relative">


      {/* 3D background */}
      <Canvas><FloatingShapes color={data.color} /></Canvas>


      {/* Avatar + animated text */}
      <Avatar initials={data.initials} />
      <Text split="word" stagger="80ms"
        style={{ animationName: 'slideUp' }}>
        Welcome, {data.name}!
      </Text>


      {/* Growth chart */}
      <GrowthChart data={data.chartData} />
      <Text split="char" stagger="40ms"
        style={{ animationName: 'scaleIn' }}>
        {data.metric} growth
      </Text>
    </Timegroup>
  );
}
$Terminal
$ npx editframe render \
    --data '{
  "name": "Sarah Chen",
  "role": "Product Lead",
  "company": "Acme Corp",
  "metric": "+47%",
  "color": "#E53935"
}' \
    -o welcome-sarah.mp4
Explore docs & skills

Zero to video

In minutes

One command to scaffold. One command to develop. Hot reload that works.

1

Create project

One command. Pick a template. Start building.

2

Start developing

Dev server with instant preview. Edit code, see video update.

3

Render & deploy

Render locally, in-browser, or push to the cloud.

Explore docs & skills
Terminal