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 to compositionFile only. It does not create a component file: the component implementation must already exist. To generate and register a Canvas Capture component together, use addCanvasCaptureComposition().

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 static IDs or folder names. Aliased and namespace imports from remotion are supported.

When folder is omitted, the file must have one component containing registrations, or a single component if no registrations exist yet. The first JSX return in the selected component is used; returns in nested functions are ignored.

compositionId​

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

component​

The component to register.

importName​

The named component export, beginning with an uppercase letter, _, or $.

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.

changes​

An array containing the registration file's {filePath, previousContents, nextContents} change. No component-file change is returned.

nodePathRemappingsv4.0.530​

An array of {filePath, oldNodePath, newNodePath} mappings. A null old path indicates an insertion; a null new path indicates removal. Apply these mappings to references from the input project. See node references.

insertedNodev4.0.530​

The reference of the inserted registration in the new project.

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​