Skip to main content

renderStill()

Part of the @remotion/renderer package. Available from v2.3.

Renders a single frame to an image and writes it to the specified output location.

If you want to render a full image sequence and possibly encode it to a video later, use renderFrames() instead.

Example usage

You first need to bundle the project and fetch the compositions. Read the code snippet on the site for server-side rendering for an example how to come up with the bundleLocation and composition variables.

ts
await renderStill({
  composition,
  webpackBundle: bundleLocation,
  output: "/tmp/still.png",
  onError: (error) => {
    console.error(
      "The following error occured when rendering the still: ",
      error.message
    );
  },
  inputProps: {
    custom: "data",
  },
});
ts
await renderStill({
  composition,
  webpackBundle: bundleLocation,
  output: "/tmp/still.png",
  onError: (error) => {
    console.error(
      "The following error occured when rendering the still: ",
      error.message
    );
  },
  inputProps: {
    custom: "data",
  },
});

Arguments

Takes an object with the following properties:

composition

A video composition object, consisting of id, height, width, durationInFrames and fps. Use getCompositions() to get a list of available video configs.

webpackBundle

The absolute location of your webpack bundle. Use bundle() to bundle your project programmatically.

output

An absolute path to where the frame should be rendered to.

inputProps?

optional

Custom props which will be passed to the component. Useful for rendering videos with dynamic content. Can be an object of any shape.

frame?

optional - default: 0

Which frame should be rendered based on its number.

imageFormat?

optional - default: "png"

Which output format the image should have, either png or jpeg.

quality?

optional - default: undefined

Sets the JPEG quality - must be an integer between 0 and 100 and can only be passed if imageFormat is set to jpeg.

puppeteerInstance?

optional - default null

An already open Puppeteer Browser instance. Reusing a browser across multiple function calls can speed up the rendering process. You are responsible for opening and closing the browser yourself. If you don't specify this option, a new browser will be opened and closed at the end.

envVariables?

optional - default {}

An object containing key-value pairs of environment variables which will be injected into your Remotion project and which can be accessed by reading the global process.env object.

dumpBrowserLogs?

optional - default false

A boolean value deciding whether Puppeteer logs should be printed to the console, useful for debugging only.

onError?

optional

Allows you to react to an exception thrown in your React code. The callback has an argument which is the error.

tsx
renderStill({
  // ... other arguments
  onError: (err: Error) => {
    // Handle error here
  }
})
tsx
renderStill({
  // ... other arguments
  onError: (err: Error) => {
    // Handle error here
  }
})

overwrite?

optional - default true

Whether the file should be overwritten if the output already exists.

browserExecutable?

optional, available from v2.3.1

A string defining the absolute path on disk of the browser executable that should be used. By default Remotion will try to detect it automatically and download one if none is available. If puppeteerInstance is defined, it will take precedence over browserExecutable.

Return value

A promise with no value. If the render succeeded, the still has been saved to output. If the render failed, the promise rejects.