Skip to main content

Rendering in the Editor Starter

Rendering videos to MP4 works using Remotion Lambda, a distributed renderer on AWS Lambda.

Setup​

Follow the Remotion Lambda setup instructions step-by-step to set up your AWS account.

note

If you have already setup asset uploads, you should skip steps 4 and 5 of the Remotion Lambda setup instructions.
Don't create a new user, but select the user you created before.

After that, fill in the following values in the .env file:

REMOTION_AWS_REGION=
REMOTION_AWS_ACCESS_KEY_ID=
REMOTION_AWS_SECRET_ACCESS_KEY=
REMOTION_AWS_BUCKET_NAME=

Now, you can deploy a Lambda function and create a site:

ts
bun deploy.ts

You should re-execute this command whenever:

  • You change the structure of the state, e.g. add new fields or items
  • You change how videos are rendered visually
  • You upgrade to a new Remotion version

Running this script if the infrastructure already exists will not do anything.
Therefore, you can run it as often as you want.

We recommend to run this script in your build pipeline as well, so that it executes whenever you deploy your app.
For example, if you deploy to Vercel, you can create a vercel.json file:

vercel.json
json
{
  "buildCommand": "bun deploy.ts && bun run build"
}
note

If you get an error 'MemorySize' value failed to satisfy constraint: Member must have value less than or equal to 3008, you need to lower the memory size of your Lambda function by changing the MEM_SIZE_IN_MB variable to a lower value. You might be on the AWS free tier or have a low concurrency limit, which may hinder your ability to render many videos.

Rendering​

Is very simple: When no item is selected in the Editor Starter, a Render button shows up in the inspector (i.e., composition inspector).

The backend endpoint /api/render is invoked to trigger a render.
Once triggered, /api/progress is polled to check the progress of the render.

Once the render is done, it is being uploaded to your S3 bucket and is publicly available.
Tweak the params you pass to renderMediaOnLambda() to change various settings - for example the privacy settings, the output format, quality, etc.

See also​