alexweininger / template-still

Create still images with Remotion

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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


Our serverless solution is a work in progress and will be released later in 2021.


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.


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

ezoic increase your site revenue


Create still images with Remotion


Language:TypeScript 89.7%Language:Dockerfile 8.0%Language:Shell 1.7%Language:CSS 0.7%