Skip to main content

createElement()v4.0.530

Describes an element to insert into source code. Pass the result to addElement() to add it to a composition or next to an existing node, or to wrapNode() to wrap an existing node.

warning

Draft API: This API is experimental and may change.

create-element.ts
import {createElement} from '@remotion/codemods';

const solid = createElement({
  component: 'Solid',
  importPath: 'remotion',
  props: {width: 1920, height: 1080, color: 'gray'},
});

const sequence = createElement({
  component: 'Sequence',
  importPath: 'remotion',
  props: {from: 30, durationInFrames: 60},
}).withChild(solid);

Inserting sequence produces the following JSX and adds import {Sequence, Solid} from 'remotion' if the imports are missing:

Generated JSX
<Sequence from={30} durationInFrames={60}>
  <Solid width={1920} height={1080} color="gray" />
</Sequence>

An element is a description, not source code. Imports, local names, and formatting are decided when the element is inserted into a file. If the file already declares a binding with the same name, the import is aliased, for example import {Solid as Solid2} from 'remotion'.

Options​

Pass an object with the following properties.

component​

The tag name. Use a component name such as Solid, a member expression such as Interactive.Div, or an HTML tag such as div.

importPath?​

The module to import component from, such as remotion, @remotion/media, or a relative path such as ./Title. The first identifier of component is imported as a named export. Relative paths are resolved from the file that receives the element. Omit it for HTML tags and identifiers that are already in scope.

importName?​

The named export to import when it differs from component. For example, {component: 'Title', importName: 'AnimatedTitle', importPath: './Title'} adds import {AnimatedTitle as Title} from './Title' and renders <Title />. Requires importPath. By default, the first identifier of component is imported.

props?​

A record of prop values. Strings become string attributes, other values become expressions. Values must be strings, finite numbers, booleans, null, arrays, or plain objects. Use staticFileValue() to reference a file in the public folder. Defaults to {}.

children?​

An array of children. Each child is a string, an element created with createElement(), or a plain element description with the same shape as these options. Text that JSX cannot hold verbatim, such as text containing braces, is wrapped in a string expression. Defaults to [].

Return value​

A CodemodElement. It is immutable: the following methods return a new element and leave the original unchanged, so an element can be reused as a template.

component, importPath, importName, props, children​

The values passed to createElement(), with importPath and importName defaulting to null. JSON.stringify() serializes an element to a plain description that createElement() accepts again.

withProp(name, value)​

Returns a copy with the prop set to the value.

withProps(props)​

Returns a copy with the props merged into the existing props.

withoutProp(name)​

Returns a copy without the prop.

withChild(child)​

Returns a copy with the child appended after the existing children.

withChildren(children)​

Returns a copy whose children are replaced.

Errors​

Throws when the tag name, a prop name, or a prop value is invalid, or when importPath is set for a tag that does not start with an uppercase letter, _, or $.

Compatibility​

BrowsersServersEnvironments
Chrome
Firefox
Safari
Node.js
Bun
Serverless Functions

See also​