Remotion Render

Render video compositions to output files.

Quick Commands

# Start dev studio (browser preview)
npm run dev

# List available compositions
npx remotion compositions src/index.tsx

# Render specific composition
npx remotion render <CompositionId> out/<filename>.mp4

# Render with options
npx remotion render HelloWorld out/hello.mp4 --codec=h264 --crf=18

Render Workflow

1. •Preview first: npm run dev → open http://localhost:3000
2. •Check composition: Verify it looks correct in studio
3. •Render: npx remotion render <id> out/<name>.mp4

Common Render Commands

Standard quality (YouTube, general use)

npx remotion render HelloWorld out/video.mp4

High quality

npx remotion render HelloWorld out/video.mp4 --crf=18

Fast preview (half resolution)

npx remotion render HelloWorld out/preview.mp4 --scale=0.5

Specific frames only

npx remotion render HelloWorld out/clip.mp4 --frames=0-60

With props override

npx remotion render HelloWorld out/custom.mp4 --props='{"text":"Custom Text"}'

Output Formats

Troubleshooting

Slow render?

• •Use --scale=0.5 for testing
• •Check --log=verbose for bottlenecks
• •Reduce concurrency if memory issues: --concurrency=2

Black frames?

• •Assets not loaded - use Remotion's <Img>, <Video> components
• •Check paths use staticFile() for public/ assets

See ../video-common/references/codecs.md for detailed codec options.