Revideo — Code-Driven Video Editor

What it is

Revideo is an open-source framework for creating videos programmatically using TypeScript. It is a fork of Motion Canvas, designed for developers who want to define scenes, animations, and transitions in code rather than in a GUI timeline editor. Revideo supports API-driven rendering, dynamic inputs, and a local preview server.

This tool targets developers and content teams who produce videos at scale: product demos, explainer animations, data visualizations, or automated social media clips. If your video content follows repeatable patterns and needs dynamic data, Revideo eliminates manual editing.

How it saves time or tokens

This workflow provides the project scaffold and startup commands. Instead of configuring a video rendering pipeline from scratch, you run npm create revideo@latest and get a working project with a local preview server at http://localhost:9000. Changes to your code are reflected in real-time in the preview, and rendering to video files is a single API call.

How to use

1. Create a new Revideo project:

npm create revideo@latest
cd my-project
npm start

1. Open http://localhost:9000 to see the visual preview of your project.

1. Edit scenes in TypeScript. Each scene defines a sequence of animations:

import { makeScene2D, Txt, all } from '@revideo/2d';
import { createRef, waitFor } from '@revideo/core';

export default makeScene2D(function* (view) {
  const title = createRef<Txt>();
  view.add(<Txt ref={title} text='Hello Revideo' fontSize={72} />);
  yield* all(
    title().opacity(1, 0.5),
    title().y(-100, 0.8)
  );
  yield* waitFor(1);
});

1. Render the final video via the CLI or API.

Example

// Dynamic data-driven scene
import { makeScene2D, Rect, Txt } from '@revideo/2d';

export default makeScene2D(function* (view) {
  const data = [40, 70, 55, 90, 65];
  const bars = data.map((val, i) =>
    <Rect
      x={-200 + i * 100}
      y={200 - val}
      width={60}
      height={val * 2}
      fill='#3b82f6'
    />
  );
  view.add(...bars);
  for (const bar of bars) {
    yield* bar.opacity(0).opacity(1, 0.3);
  }
});

Related on TokRepo

• Video tools -- Other video creation and editing tools for developers
• Automation tools -- Automate repetitive content production workflows

Common pitfalls

• Revideo uses generator functions (function) for animation sequencing. Forgetting the yield keyword causes animations to run instantly instead of being sequenced.
• The local preview server requires Node.js 18+. Older Node versions cause startup errors.
• Rendering performance depends on scene complexity. Scenes with many animated elements benefit from reducing resolution during preview and only rendering at full resolution for final output.