Skip to main content

updateJsxNodeProps()v4.0.528

Updates JSX props, nested object properties, and supported text children.

warning

Draft API: This API is experimental and may change.

update-jsx-node-props.ts
import {updateJsxNodeProps, type CodemodProject, type JsxNodeReference} from '@remotion/codemods';

declare const project: CodemodProject;
declare const node: JsxNodeReference;

const result = updateJsxNodeProps({
  project,
  node,
  props: {'style.opacity': 0.5, title: 'Preview'},
});

console.log(result);

Throws for computed props, including props potentially overridden by a spread. Setting a keyframed prop replaces the animation with the supplied static value; use updateJsxNodeKeyframes() to edit its animation. Unchanged surrounding source is preserved.

Options​

project​

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

node​

A JsxNodeReference from getJsxNodes() or a previous operation. It contains filePath and nodePath.

props​

A record of new values, such as {from: 30, 'style.opacity': 0.5}. A value of undefined removes the prop or nested property. Only one level of nested keys is supported. Use children to replace static text.

schema?​

A Remotion InteractivitySchema for schema-specific defaults and enum variants. By default, no schema-specific behavior is applied.

videoConfig?​

The composition's width, height, fps, and durationInFrames. Supply these to interpret supported expressions using useVideoConfig(). By default, those runtime values are unknown.

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.

nodePathRemappings​

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.

updatedNode​

The edited node's reference 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​