Skip to main content

saveDefaultProps()v4.0.147

Saves the defaultProps for a composition back to the root file.
If you just want to update the default props in the Props Editor (right sidebar in the Studio) without saving them to the root file, use updateDefaultProps().

Examples​

Saving {color: 'green'} to Root.tsx
tsx
import { saveDefaultProps } from "@remotion/studio";
 
await saveDefaultProps({
  compositionId: "my-composition",
  defaultProps: () => {
    return {
      color: "green",
    };
  },
});
Saving {color: 'green'} to Root.tsx
tsx
import { saveDefaultProps } from "@remotion/studio";
 
await saveDefaultProps({
  compositionId: "my-composition",
  defaultProps: () => {
    return {
      color: "green",
    };
  },
});

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

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

If you modified props in the Props Editor (right sidebar in the Studio), you can also access the unsaved props from there, and for example save them:

Save props from the Props Editor
tsx
import { saveDefaultProps } from "@remotion/studio";
 
await saveDefaultProps({
  compositionId: "my-composition",
  defaultProps: ({ unsavedDefaultProps }) => {
    return unsavedDefaultProps;
  },
});
Save props from the Props Editor
tsx
import { saveDefaultProps } from "@remotion/studio";
 
await saveDefaultProps({
  compositionId: "my-composition",
  defaultProps: ({ unsavedDefaultProps }) => {
    return unsavedDefaultProps;
  },
});

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

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

Requirements​

In order to use this function:

1
 You need to be inside the Remotion Studio.
2
 The Studio must be running (no static deployment)
3
 zod needs to be installed.

Otherwise, the function will throw.

See also​