Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
September 27, 2023 16:52
August 9, 2023 10:25
August 7, 2021 15:48
August 7, 2021 13:26
August 8, 2021 12:01
August 7, 2021 17:09
August 9, 2023 10:05
July 3, 2023 13:59
April 3, 2023 17:23

Remotion Still Image template

A template for designing still images with dynamic data with built-in server for deploying to the cloud.


Design mode: Create an image in React

npm run dev

Render it

npm run render

Keep Remotion up to date

npm run upgrade


You can run a server that serves dynamic images based on it's URL. Run

npm run server

And then visit http://localhost:8000/PreviewCard.png?title=Hello+World in your browser to render an image.

  • Specify the ID of the composition you want to render after the /. You can edit the compositions in src/Video.tsx.
  • Add either a .png or a .jpeg extension depending on which image format you want.
  • You can add input props to your React component by adding query strings: ?title=Hello+World&description=foobar will pass {"title": "Hello World", "description": "foo bar"} to the component.


In src/server/config.ts, you can configure three types of caching:

  • "filesystem", the default, will cache generated images locally. This is a good way of caching if you host the server on a non-ephemereal platform and have enough storage.

  • "none" will disable all caching and calculate all images on the fly.

  • "s3-bucket" will cache images in a S3 bucket. If you choose this option, you need to provide AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY environment variables containing AWS credentials which have permission of reading and writing to S3 as well as configure a bucket name and region in src/server/config.ts.

How to set up an S3 bucket
  • Go to and create a new bucket. You can leave the "Deny all public access" checkbox checked.
  • Fill out region and bucket name in src/server/config.ts.
  • Go to to create a new user. While creating, enable "Programmatic Access". When adding permissions, choose "Attach existing policies directly" and then search for "AmazonS3FullAccess" and assign it.
  • In the last step you will get a value for AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY which you need to set as an environment variable. Locally, you can rename the .env.example file to .env. When you deploy the server, you can set the environment variables in the dashboard of your provider.

Deploy to Heroku

To deploy the server to Heroku, you need to add the Google Chrome Buildpack. Go to the settings of your Heroku app and in the Buildpacks section, add as a buildpack.

Deploy to DigitalOcean

The easiest way to deploy to DigitalOcean is to use the dockerized image and run it on the DigitalOcean App Platform. Go to and connect your Github repository and deploy the


Use Remotion Lambda if you want to render stills inside a Lambda function.


Get started with Remotion by reading the fundamentals page.


We provide help on our Discord server.


Found an issue with Remotion? File an issue here.


Note that for some entities a company license is needed. Read the terms here.


Create still images with Remotion






No releases published


No packages published