Remotion Still Image template

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

Commands

Design mode: Create an image in React

pnpm run dev

Render it

pnpm run render

Keep Remotion up to date

pnpm run upgrade

Server

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

pnpm 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.

Caching

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 https://s3.console.aws.amazon.com/s3/home 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 https://console.aws.amazon.com/iamv2/home?#/users 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 https://github.com/heroku/heroku-buildpack-google-chrome 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 https://cloud.digitalocean.com/apps/new and connect your Github repository and deploy the

Serverless

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

Docs

Get started with Remotion by reading the fundamentals page.

Help

We provide help on our Discord server.

Issues

Found an issue with Remotion? File an issue here.

License

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