Skip to main content

updateDefaultProps()v4.0.154

Updates the default props in the Props Editor (in the right sidebar in the Studio).
Your component will be re-rendered with the new props.
The props will not be saved to the Root file - use saveDefaultProps() for that.

Examples

Setting {color: 'green'} as the default props
tsx
import { updateDefaultProps } from "@remotion/studio";
 
updateDefaultProps({
compositionId: "my-composition",
defaultProps: () => {
return {
color: "green",
};
},
});
Setting {color: 'green'} as the default props
tsx
import { updateDefaultProps } from "@remotion/studio";
 
updateDefaultProps({
compositionId: "my-composition",
defaultProps: () => {
return {
color: "green",
};
},
});

You can access the current unsaved default props to only override part of it (reducer-style):

Accessing the current props
tsx
import { saveDefaultProps } from "@remotion/studio";
 
await saveDefaultProps({
compositionId: "my-composition",
defaultProps: ({ unsavedDefaultProps }) => {
return { ...unsavedDefaultProps, color: "green" };
},
});
Accessing the current props
tsx
import { saveDefaultProps } from "@remotion/studio";
 
await saveDefaultProps({
compositionId: "my-composition",
defaultProps: ({ unsavedDefaultProps }) => {
return { ...unsavedDefaultProps, color: "green" };
},
});

If you only want to override on top of the saved changes:

Accessing the saved props
tsx
import { updateDefaultProps } from "@remotion/studio";
 
updateDefaultProps({
compositionId: "my-composition",
defaultProps: ({ savedDefaultProps }) => {
return {
...savedDefaultProps,
color: "green",
};
},
});
Accessing the saved props
tsx
import { updateDefaultProps } from "@remotion/studio";
 
updateDefaultProps({
compositionId: "my-composition",
defaultProps: ({ savedDefaultProps }) => {
return {
...savedDefaultProps,
color: "green",
};
},
});

If you have a Zod schema, you can also access its runtime value:

Save props from the Props Editor
tsx
import { updateDefaultProps } from "@remotion/studio";
 
updateDefaultProps({
compositionId: "my-composition",
defaultProps: ({ schema, unsavedDefaultProps }) => {
// Do something with the Zod schema
 
return {
...unsavedDefaultProps,
color: "red",
};
},
});
Save props from the Props Editor
tsx
import { updateDefaultProps } from "@remotion/studio";
 
updateDefaultProps({
compositionId: "my-composition",
defaultProps: ({ schema, unsavedDefaultProps }) => {
// Do something with the Zod schema
 
return {
...unsavedDefaultProps,
color: "red",
};
},
});

Requirements

In order to use this function:

You need to be inside the Remotion Studio.


The Studio must be running (no static deployment)


zod needs to be installed.



Otherwise, the function will throw.

See also