revideo

Revideo is an open-source framework designed for programmatic video editing. It allows developers to create video templates using TypeScript and render them with dynamic inputs.

Key features include:

• Template Creation: Build video templates in TypeScript.
• Dynamic Rendering: Use an API to render templates with varying data.
• Web Player: Embed a player component into websites to allow users to preview videos before exporting them to MP4.

Common use cases include automating video editing tasks or building web-based video editors.

Nodes that do not extend the Layout class (such as a standard Node) are ignored by the layout engine. This allows you to group nodes to apply transformations or filters without affecting the Flexbox hierarchy of the layout root. From the perspective of the layout, only the direct Layout descendants are considered siblings.

<Layout direction={'column'} width={960} gap={40} layout>
  <Node opacity={0.1}>
    <Rect height={240} fill={'#ff6470'} />
    <Rect height={240} fill={'#ff6470'} />
  </Node>
  <Rect height={240} fill={'#ff6470'} />
</Layout>

In version 0.10.x, scenes are no longer imported using the ?scene query parameter. Instead, they are treated as plain modules. To upgrade:

1. Add the JSX pragma /** @jsxImportSource @revideo/2d/lib */ to the top of your scene file.
2. Provide a name as the first argument to makeScene2D().
3. Import the scene in your project file without the ?scene suffix.

// example.tsx (0.10.x)
/** @jsxImportSource @revideo/2d/lib */
import {makeScene2D} from '@revideo/2d';

export default makeScene2D('example', function* (view) {
  // ...
});

// project.ts (0.10.x)
import example from './example';

To use Revideo, ensure you have Node.js version 16 or greater installed.

Linux Users: You must also install nscd for ffmpeg support:

sudo apt-get install nscd

To create a new project, run the following command and select the default project when prompted:

npm init @revideo@latest

After creation, navigate to the project directory and install dependencies:

cd <project-path>
npm install

Scenes in Revideo are organized as a tree hierarchy of nodes, starting from the view (the scene view) at the root. This structure is similar to the DOM.

Revideo uses a custom JSX runtime to allow writing XML-like markup for node instantiation. Note that Revideo does not use React; there is no virtual DOM or reconciliation. JSX tags map directly to Node instances.

Equivalent ways to add nodes:

Using JSX:

view.add(
  <>
    <Circle />
    <Layout>
      <Rect />
      <Txt>Hi</Txt>
    </Layout>
  </>
);

Using standard instantiation:

view.add([
  new Circle({}),
  new Layout({
    children: [
      new Rect({}),
      new Txt({text: 'Hi'}),
    ],
  }),
]);

You can join the Revideo Discord community to interact with the team and get help with issues. Use the invite link below to join.

https://discord.gg/MVJsrqjy3j

Generating a large number of new nodes inside a spawner every time a dependency changes can cause performance issues. To mitigate this, use an object pool by pre-creating a set of nodes and then using a spawner to slice the pool based on the current state.

const count = createSignal(10);

// Pre-create a pool of nodes
const pool = range(64).map(i => (
  <Circle x={i * 32} width={32} height={32} fill={'lightseagreen'} />
));

const layout = createRef<Layout>();
view.add(
  <Layout layout ref={layout}>
    {/* Use the spawner to select a subset of the pool */}
    {() => pool.slice(0, count())}
  </Layout>
);

To avoid repeating highlighter configuration, you can create a custom component for a specific language using the withDefaults helper function. This allows you to extend the Code component with your own default properties, such as a specific highlighter.

import {Code, LezerHighlighter, withDefaults} from '@revideo/2d';
import {parser} from '@lezer/rust';

const RustHighlighter = new LezerHighlighter(parser);

export const RustCode = withDefaults(Code, {
  highlighter: RustHighlighter,
});

import {RustCode} from '../nodes/RustCode';

// ...

view.add(
  <RustCode
    code={`
fn hello() {
  println!("Hello!");
}
`}
  />,
);