packages/docs/docs/renderer/render-still.mdx
Part of the @remotion/renderer package.
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.
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 serveUrl and composition variables.
import {bundle} from '@remotion/bundler';
import {getCompositions, renderStill} from '@remotion/renderer';
// The composition you want to render
const compositionId = 'HelloWorld';
const serveUrl = await bundle({
entryPoint: require.resolve('./src/index.ts'),
});
const comps = await getCompositions(serveUrl, {
inputProps: {
custom: 'data',
},
});
const composition = comps.find((c) => c.id === compositionId);
if (!composition) {
throw new Error(`No composition with the ID ${compositionId} found`);
}
// ---cut---
await renderStill({
composition,
serveUrl,
output: '/tmp/still.png',
inputProps: {
custom: 'data',
},
});
Takes an object with the following properties:
compositionVideoConfig
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.
serveUrlstring
Either a local path pointing to a Remotion Webpack bundle generated by bundle() or a URL where the bundle is hosted.
outputstring
An absolute path to where the frame should be rendered to.
inputProps?object
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().
port?number
Prefer a specific port that will be used to serve the Remotion project. If not specified, a random port will be used.
frame?Which frame should be rendered based on its number. Default: 0. Frames are zero-indexed.
From v3.2.27, negative values are allowed, with -1 being the last frame.
imageFormat?string <TsType type="StillImageFormat" source="@remotion/renderer" href="/docs/renderer/types#stillimageformat" />
Which output format the image should have, either png, jpeg, webp or pdf. Default: "png".
scale?jpegQuality?Sets the JPEG quality - must be an integer between 0 and 100 and can only be passed if imageFormat is set to jpeg.
puppeteerInstance?An already open Browser instance. Use openBrowser() to create a new 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.
:::note
Despite the name, not actually compatible with puppeteer, only with openBrowser().
:::
envVariables?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. Default: {}.
logLevel?<AvailableFrom v="4.0.115"/>onArtifact?<AvailableFrom v="4.0.176" />function <TsType type="OnArtifact" source="@remotion/renderer" href="/docs/renderer/types#onartifact" />
Handle an artifact that was emitted by the <Artifact> component.
overwrite?Whether the file should be overwritten if the output already exists. Default: true.
browserExecutable?<AvailableFrom v="2.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.
onBrowserLog?<AvailableFrom v="3.3.93" />function <TsType type="BrowserLog" source="@remotion/renderer" href="/docs/renderer/types#browserlog" />
Gets called when your project calls console.log or another method from console. See the documentation for renderFrames for more information.
timeoutInMilliseconds?<AvailableFrom v="2.6.3" />A number describing how long the render may take to resolve all delayRender() calls before it times out. Default: 30000
cancelSignal?<AvailableFrom v="3.0.15" />A token that allows the render to be cancelled. See: makeCancelSignal()
chromiumOptions?<AvailableFrom v="2.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().
:::
disableWebSecurityboolean - default false
This will most notably disable CORS among other security features.
enableMultiProcessOnLinux?<AvailableFrom v="4.0.42" />ignoreCertificateErrors?boolean - default false
Results in invalid SSL certificates, such as self-signed ones, being ignored.
headless?gluserAgent<AvailableFrom v="3.3.83"/>Lets you set a custom user agent that the headless Chrome browser assumes.
darkMode?<AvailableFrom v="4.0.381"/>mediaCacheSizeInBytes?<AvailableFrom v="4.0.352"/>offthreadVideoCacheSizeInBytes?<AvailableFrom v="4.0.23"/>offthreadVideoThreads?<AvailableFrom v="4.0.261"/>binariesDirectory?<AvailableFrom v="4.0.120" />onBrowserDownload?<AvailableFrom v="4.0.137" />chromeMode?<AvailableFrom v="4.0.248" />licenseKey?<AvailableFrom v="4.0.409"/>isProduction?<AvailableFrom v="4.0.409"/>default true
apiKey?<AvailableFrom v="4.0.375"/>deprecated in v4.0.409
<Options id="api-key" />dumpBrowserLogs?Deprecated in v4.0 in favor of logLevel.
quality?Renamed to jpegQuality in v4.0.0.
The return value is a promise that resolves to an object with the following keys:
buffer: <AvailableFrom v="3.3.9" inline /> A Buffer that only exists if no output option was provided. Otherwise null.contentType: <AvailableFrom v="4.0.426" inline /> The content type of the rendered output, e.g. "image/png", "image/jpeg".