Clipkit vs Remotion: JSON video infra vs React video framework

Remotion and Clipkit are both serious answers to the same question (how do you make video with code?) but they're different bets on what "code" should mean. Remotion bets on React: your video is a React component tree, rendered frame by frame in a headless browser. Clipkit bets on data: your video is a JSON document conforming to an open protocol, rendered by a GPU engine that runs the same in a browser tab and a render job.

Both bets are defensible. This page lays out where each one wins, using numbers we measured and publish rather than adjectives. Where Remotion is the better choice, we say so plainly, and there's a whole section on that below.

The architectural difference (everything else follows from it)#

Remotion renders your actual React components. useCurrentFrame() drives animation, and a headless Chromium screenshots each frame server-side. The profound consequence: anything React can render, Remotion can render: your design system, a CSS animation, any npm package, a Three.js scene. The cost: a video is a program, so producing one means a Node toolchain, a bundler, and a render pipeline (typically Remotion Lambda or your own farm), and correctness means "the program runs without crashing on every frame."

Clipkit renders a JSON document (scenes, layers, text, shapes, images, audio, keyframes, effects) against a documented schema (the Clipkit Protocol, Apache-2.0). The engine composites on the GPU via WebGPU/WebGL2 and encodes with WebCodecs. The profound consequence: a video is data, so it can be validated before rendering, diffed, stored in a database row, generated by an agent, and rendered for free in a browser tab with no toolchain at all. The cost: the expressive ceiling is the schema. If it isn't in the protocol, you can't render it.

The same video, both ways#

Here's a title card: headline slides in, holds, and we cut. In Remotion, it's a component:

export const Title = () => {
  const frame = useCurrentFrame();
  const x = interpolate(frame, [0, 20], [-300, 100], {
    extrapolateRight: "clamp",
  });
  return (
    <AbsoluteFill style={{ backgroundColor: "#181717" }}>
      <h1 style={{ transform: `translateX(${x}px)`, color: "#FFB800",
        fontSize: 96, marginTop: 400 }}>
        SHIP FRIDAY
      </h1>
    </AbsoluteFill>
  );
};
"tok-cmt">// plus: Composition registration, package.json, bundler config,
"tok-cmt">// and a render pipeline to actually produce an MP4

In Clipkit, it's a document:

{
  "width": 1920, "height": 1080, "duration": 4, "frame_rate": 30,
  "output_format": "mp4",
  "elements": [
    { "type": "shape", "shape": "rectangle", "layer": 1,
      "width": 1920, "height": 1080, "fill_color": "#181717" },
    { "type": "text", "text": "SHIP FRIDAY", "layer": 2,
      "x": 100, "y": 400, "font_size": 96, "fill_color": "#FFB800",
      "animations": [{ "type": "slide-in", "direction": "left", "duration": 0.7 }]
    }
  ]
}

Neither is "better" in the abstract: the TSX gives you the entire React universe, the JSON gives you validation, diffing, and a renderer that runs anywhere. But notice what the JSON version doesn't need: a repository, a dependency tree, a build step, or a deploy. That difference compounds at scale and it's decisive for machine authors.

What we measured#

All numbers are from our published benchmark corpus: 13 briefs implemented idiomatically in both tools, plus a 60-cell agent-authoring benchmark (5 briefs × 3 model tiers × 4 lanes, real agents, artifacts validated and rendered). Methodology and raw results are in the open repo, so you can rerun them.

Three honest footnotes. First, cost-per-video is a wash. Remotion's failures are what separate the tools, not its cost. When a Remotion agent run succeeds, it's cheap; the 13% of runs that typecheck and then crash at render time are where the money and the pipeline pages go. Second, the token gap matters mostly for agent authoring at volume. A human developer doesn't feel it. Third, these are our benchmarks; the corpus and scripts are public because comparison pages that can't be rerun are marketing.

The pipeline you operate#

This is the difference that shows up six months in, so it deserves its own section.

Running Remotion in production means owning a render pipeline: Remotion Lambda (their well-built AWS deployment: you provision the Lambda functions, S3 buckets, and concurrency limits in your account) or your own render farm. Every video costs compute you pay for. Every dependency update is a change to software that runs on every frame. Preview-to-render fidelity is generally good but lives at the mercy of headless-browser quirks: fonts, timing, memory limits on long renders.

Running Clipkit in production splits into two modes. Browser mode: the engine ships to the client (~2 MB), and users render and export their own MP4s on their own hardware via WebGPU, so your render bill for this path is zero, at any volume. Cloud mode: POST a document to the render API, get an MP4 back, pay per second of output. Most products use both: free in-browser exports for interactive users, cloud renders for automation and pro formats (ProRes, AV1). Determinism holds across all of it: the document renders byte-identically in the user's preview and the cloud job, which is what makes "human approves the preview, pipeline ships the render" a safe workflow.

When Remotion is the right choice#

This isn't a rhetorical section.

• Your video needs arbitrary React. A specific npm chart library, your existing design-system components, CSS keyframe animations, a WebGL scene. Remotion renders them because it renders React. Clipkit cannot; its ceiling is the protocol schema. This is the single biggest fork in the decision and it's binary.
• The video is your app's UI. Product walkthroughs that animate your actual screens, built from your actual components, are Remotion's home turf. Reimplementing those as JSON would be absurd.
• You want the mature ecosystem. Remotion has years of head start: templates, community packages, tutorials, a hiring pool, answered questions. Ecosystem gravity is a real engineering input.
• A skilled human is the author. The validity and token gaps we measured are agent-authoring gaps. A React developer who knows Remotion isn't paying either tax, and their existing skills transfer completely.

When Clipkit is the right choice#

• An agent or pipeline is the author. JSON plus schema validation is why our benchmark came back 100% valid: an invalid composition is caught by the validator with an actionable error ("elements.0.layer: Required") before rendering, instead of crashing a headless browser after the typecheck passed. If LLMs produce your videos, this is the whole ballgame: reliability at the 87th percentile means a human babysitting the pipeline.
• You need free rendering. There is no Remotion equivalent of "the user's browser renders and exports the MP4, watermark-free, at no cost to you." For products with a video-export feature, this deletes a whole line item.
• Videos are rows, not repos. Personalized video, templated generation, user-customized exports: one JSON document per video, stored next to the rest of your data, diffed like the rest of your data. No deploy to change a template.
• Determinism is a requirement. Same document, same output, byte-for-byte, browser and cloud. No font races, no flaky screenshot diffs, no "it rendered differently in CI."

Migrating (and when not to)#

A realistic pilot beats a rewrite plan. Pick one video that's currently a data-driven Remotion composition, one where props effectively define the video and components mostly lay them out. Those translate cleanly: the props were already the document, and a day of work usually gets the first one rendering. Compositions that lean on custom React components, npm visualizations, or CSS tricks do not translate, and that's the signal to keep them in Remotion. Plenty of teams run both: structured, high-volume, agent-authored video on Clipkit; bespoke React-native video where it belongs.

Two things make the pilot cheap. The no-login editor at clipkit.dev renders in your browser, so evaluating costs nothing and requires nobody's approval. And if your team uses AI agents at all, the MCP server means your pilot can literally be "describe the video to Claude and compare the output," and our benchmark suggests you'll get a valid result on the first try.

Licensing and cost, honestly#

Neither tool is OSI open-source at the engine level, and both are candid about it in different ways. Remotion is source-available under its own license: free for individuals, nonprofits, and for-profit companies up to 3 employees; larger companies need a paid Company License (per-developer seats), plus render infrastructure costs either way. Clipkit's protocol, CLI, editor, and tooling are Apache-2.0; the render engine is source-available under BSL 1.1 (each release converts to Apache-2.0 after four years) with production rendering free up to 250 output-minutes per month, and a commercial license beyond that. Browser rendering is free at any scale for personal, educational, and non-commercial use.

Practical translation for a 10-person company: Remotion costs per developer seat plus render compute from day one. Clipkit costs nothing until you ship more than ~4 hours of production video a month, and in-browser exports never hit a meter at all.

The one-paragraph verdict#

If your videos are React apps (bespoke, design-heavy, built from components you already own), use Remotion and don't look back. If your videos are data (generated, templated, personalized, agent-authored, or high-volume), Clipkit renders them with validation, determinism, and a free browser path that changes the economics. And if you're not sure which kind yours are, the test is one afternoon: take your most data-shaped Remotion composition and see how it feels as a document.