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 video, use renderMedia() 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,
  serveUrl: bundleLocation,
  output: "/tmp/still.png",
  inputProps: {
    custom: "data",
  },
});
ts
await renderStill({
  composition,
  serveUrl: bundleLocation,
  output: "/tmp/still.png",
  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.

serveUrl​

Either a local path pointing to a Remotion Webpack bundle generated by bundle() or a URL where the bundle is hosted.

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.

scale?​

number - default: 1 - available from v2.6.7

Scales the output frames by the factor you pass in. For example, a 1280x720px frame will become a 1920x1080px frame with a scale factor of 1.5. Vector elements like fonts and HTML markups will be rendered with extra details.

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.

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.

timeoutInMilliseconds?​

optional, available from v2.6.3

A number describing how long the render may take to resolve all delayRender() calls before it times out. Default: 30000

cancelSignal?​

optional, available from v3.0.15

A token that allows the render to be cancelled. See: makeCancelSignal()

chromiumOptions?​

optional, available from v2.6.5

Allows you to set certain Chromium / Google Chrome flags. See: Chromium flags.

note

Chromium flags need to be set at browser launch. If you pass an instance using puppeteerInstance, options passed to renderStill() will not apply, but rather the flags that have been passed to openBrowser().

disableWebSecurity​

boolean - default false

This will most notably disable CORS among other security features.

ignoreCertificateErrors​

boolean - default false

Results in invalid SSL certificates, such as self-signed ones, being ignored.

headless​

boolean - default true

If disabled, the render will open an actual Chrome window where you can see the render happen.

gl​

string

Changelog
  • From Remotion v2.6.7 until v3.0.7, the default for Remotion Lambda was swiftshader, but from v3.0.8 the default is swangle (Swiftshader on Angle) since Chrome 101 added support for it.
  • From Remotion v2.4.3 until v2.6.6, the default was angle, however it turns out to have a small memory leak that could crash long Remotion renders.

Select the OpenGL renderer backend for Chromium. Accepted values:

  • "angle",
  • "egl",
  • "swiftshader"
  • "swangle"
  • null - Chromiums default

Default: null.
Default for Lambda rendering: "swangle".

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.