Remotion Data-Driven Video — Auto-Generate Videos from API/DB Data
Pattern for safely injecting external data into videos with calculateMetadata + delayRender
Remotion's most powerful use case is data-driven video generation.
calculateMetadata: Fetches async data before rendering based on Composition props. Can dynamically determine video duration (durationInFrames) based on API results. Example: news summary video whose length varies by number of articles.
getInputProps(): Method to pass external data as JSON when rendering from CLI or Lambda. Used like npx remotion render --props='{"productId": 123}'.
delayRender() / continueRender(): Delays screenshotting a frame until async operations (image loading, API calls) complete inside the component. Without this safeguard, screenshots might capture before images load, resulting in blank frames.
Combining all three enables pipelines like "read 1000 products from DB and auto-generate 15-second promotional videos for each".
How It Works
Connect calculateMetadata function to Composition to fetch data from API/DB before rendering
Dynamically determine and return props and durationInFrames from fetch results
Call delayRender() in component to start loading async resources (images, fonts)
Call continueRender() after resource loading completes to allow frame screenshot
Inject JSON data via --props in CLI or pass inputProps in Lambda for bulk rendering
Pros
- ✓ Full automation: videos auto-update when data changes
- ✓ Bulk generation: 1000 products = 1000 videos, no manual work
- ✓ delayRender guarantees async safety → prevents blank frame incidents in production
Cons
- ✗ External API dependency: rendering fails if API is down/changed → error handling required
- ✗ delayRender timeout: rendering aborts if continueRender not called within 30 seconds