Skip to main content

saveDefaultProps()v4.0.147

Saves the defaultProps for a composition back to the root file.

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
 zod needs to be installed.

Otherwise, the function will throw.

See also​