Skip to main content

addComposition()v4.0.528

Adds a <Composition> registration referencing an existing named component export.

warning

Draft API: This API is experimental and may change.

add-composition.ts
import {addComposition, type CodemodProject} from '@remotion/codemods';

declare const project: CodemodProject;

const result = addComposition({
  project,
  compositionFile: 'src/Root.tsx',
  compositionId: 'MyComposition',
  component: {importName: 'Video', importPath: './Video'},
  metadata: {width: 1920, height: 1080, fps: 30, durationInFrames: 90},
});

console.log(result);

Adds the registration and required imports. The component implementation must already exist. Use a file containing one registration component.

Options​

project​

An in-memory CodemodProject. The input project is not mutated.

compositionFile​

The project file containing the composition registrations. Registration edits support <Composition>, <Still>, and <Folder> with their original import names and static IDs or folder names.

compositionId​

The new composition ID. Must contain only letters, numbers, or hyphens and be unused in this file.

component​

The component to register.

importName​

The named component export.

importPath​

Its module specifier, relative to the registration file for relative imports.

metadata​

The initial composition metadata.

width​

A positive integer width in pixels.

height​

A positive integer height in pixels.

fps​

A positive, finite frame rate.

durationInFrames​

A positive integer duration in frames.

folder?​

An existing folder reference {name, parentName}. By default, adds the composition at the registration root.

Return value​

Returns an object with the following properties.

project​

The updated project. Unchanged files and extra project fields are preserved.

changes​

An array of {filePath, previousContents, nextContents} file changes. A null content value indicates a created or deleted file.

Errors​

Throws when the target cannot be resolved, the requested edit is unsupported, or an option is invalid. Failed edits leave the input project unchanged.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​