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​

VideoConfig

An object describing a composition using id, width, height, fps and durationInFrames, defaultProps and props.
Call selectComposition() or getCompositions() to get an array of possible configs.

serveUrl​

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

port?​

Prefer a specific port that will be used to serve the Remotion project. If not specified, a random port will be used.

output​

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

inputProps?​

optional

Input Props to pass to the selected composition of your video..
Must be a JSON object.
From the root component the props can be read using getInputProps().
You may transform input props using calculateMetadata().

frame?​

optional - default: 0

Which frame should be rendered based on its number. Frames are zero-indexed.

From v3.2.27, negative values are allowed, with -1 being the last frame.

imageFormat?​

optional - default: "png"

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

scale?​

optional

Scales the output dimensions by a factor. See Scaling to learn more about this feature.

jpegQuality?​

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.

logLevel?v4.0.115​

One of verbose, info, warn, error.
Determines how much is being logged to the console.
verbose will also log console.log's from the browser.
Default info.

onArtifact?v4.0.176​

Handle an artifact that was emitted by the <Artifact> component.

overwrite?​

optional - default true

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

browserExecutable?v2.3.1​

optional

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.

onBrowserLog?v3.3.93​

optional

Gets called when your project calls console.log or another method from console. See the documentation for renderFrames for more information.

timeoutInMilliseconds?v2.6.3​

optional

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

cancelSignal?v3.0.15​

optional

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

chromiumOptions?v2.6.5​

optional

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.

enableMultiProcessOnLinux?v4.0.42​

Removes the --single-process flag that gets passed to Chromium on Linux by default. This will make the render faster because multiple processes can be used, but may cause issues with some Linux distributions or if window server libraries are missing.
Default: false until v4.0.136, then true from v4.0.137 on because newer Chrome versions don't allow rendering with the --single-process flag.
This flag will be removed in Remotion v5.0.

ignoreCertificateErrors?​

boolean - default false

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

headless?​

Deprecated - will be removed in 5.0.0. With the migration to Chrome Headless Shell, this option is not functional anymore.

If disabled, the render will open an actual Chrome window where you can see the render happen. The default is headless mode.

gl​

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"
  • "vulkan" (from Remotion v4.0.41)
  • "angle-egl" (from Remotion v4.0.51)

The default is null, letting Chrome decide, except on Lambda where the default is "swangle"

userAgentv3.3.83​

Lets you set a custom user agent that the headless Chrome browser assumes.

offthreadVideoCacheSizeInBytes?v4.0.23​

From v4.0, Remotion has a cache for <OffthreadVideo> frames. The default is null, corresponding to half of the system memory available when the render starts.
This option allows to override the size of the cache. The higher it is, the faster the render will be, but the more memory will be used.
The used value will be printed when running in verbose mode.
Default: null

binariesDirectory?v4.0.120​

The directory where the platform-specific binaries and libraries that Remotion needs are located. Those include an ffmpeg and ffprobe binary, a Rust binary for various tasks, and various shared libraries. If the value is set to null, which is the default, then the path of a platform-specific package located at node_modules/@remotion/compositor-* is selected.
This option is useful in environments where Remotion is not officially supported to run like bundled serverless functions or Electron.

onBrowserDownload?v4.0.137​

Gets called when no compatible local browser is detected on the system and this API needs to download a browser. Return a callback to observe progress. See here for how to use this option.

dumpBrowserLogs?​

optional - default false, deprecated in v4.0

Deprecated in favor of logLevel.

quality?​

Renamed to jpegQuality in v4.0.0.

Return Value​

The return value is a promise that resolves to an object with the following keys:

  • buffer: (available from v3.3.9) A Buffer that only exists if no output option was provided. Otherwise null.

See also​