Still images - Remotion

Remotion is a great solution for rendering thumbnails of videos or dynamic still images too. See our Still template for an easy way to get started.

If you already have a Remotion project, read on how you can render stills.

Defining a still

Use the <Still /> component instead of the <Composition /> one to define a still. The timeline will disappear, and you will not have to define a duration or FPS value.

Previewing a still in the browser

You can use the <Thumbnail> component from @remotion/player to preview a still image in a regular React app (Next.js, Vite, Create React App, etc.). This is useful if you want to display your still in a web application before rendering it.

Rendering via CLI

You can use the npx remotion still command to render a still image. Example command:

bash

npx remotion still --props='{"custom": "data"}' my-comp out.png

You can use the --image-format flag to determine the output format. The default format is png, with jpeg, webp and pdf being the other options.

By default the frame with number of a composition is being rendered, you can control it using the --frame flag.

Rendering using Node.JS

You can use the renderStill() Node.JS API to render a still frame programmatically.

Rendering in the browser

:::warning Experimental feature - expect bugs and breaking changes at any time.
Track progress on GitHub and discuss in the #web-renderer channel on Discord. :::

You can use the renderStillOnWeb() browser API to render a still frame programmatically.

Rendering using Remotion Lambda

You can use Remotion Lambda to render stills:

Via the renderStillOnLambda() API.
Via the npx remotion lambda still CLI command.

Rendering using Cloud Run

You can use Cloud Run to render stills:

Via the renderStillOnCloudRun() API.
Via the npx remotion cloudrun still CLI command.