Intermediate

Rendering Videos

Learn how to render your Remotion compositions to video files, use cloud rendering for scale, set up batch processing, and integrate with CI/CD pipelines.

Preview in Browser

Before rendering to a file, always preview in the Remotion Studio:

Terminal 
# Start the preview server
npx remotion studio

# The studio opens at http://localhost:3000
# Use the frame scrubber to inspect individual frames
# Use play/pause to watch the full animation

Rendering to MP4

The most common output format. Requires FFmpeg (Remotion installs it automatically):

Terminal - Render Commands 
# Render the default composition to MP4
npx remotion render src/index.ts MyComposition out/video.mp4

# Render with specific options
npx remotion render src/index.ts MyComposition out/video.mp4 \
  --codec h264 \
  --crf 18 \
  --fps 30

# Render only a range of frames (for testing)
npx remotion render src/index.ts MyComposition out/clip.mp4 \
  --frames 0-90

Output Formats

Format Codec Flag Best For File Size
MP4 (H.264) --codec h264 Universal playback, social media uploads Small
MP4 (H.265) --codec h265 High quality at smaller size, newer devices Smaller
WebM (VP8) --codec vp8 Web embedding, transparent backgrounds Medium
WebM (VP9) --codec vp9 High quality web video Small
GIF --codec gif Short loops, social media, previews Large
PNG Sequence --image-format png Post-processing in other tools Very large

Cloud Rendering with Remotion Lambda

For fast rendering at scale, use Remotion Lambda to render on AWS:

Cloud Rendering Setup 
# Install the Lambda package
npm install @remotion/lambda

# Deploy your video to AWS Lambda
npx remotion lambda deploy

# Render in the cloud
npx remotion lambda render MyComposition

# Cloud renders split the video across multiple
# Lambda functions for parallel processing
# A 60-second video can render in ~15 seconds
💡
Lambda pricing: Remotion Lambda uses your own AWS account. Costs are based on Lambda execution time and S3 storage. A typical 30-second video costs fractions of a cent to render. This makes it very cost-effective for batch rendering.

Batch Rendering

Render multiple videos with different data using Remotion's programmatic API:

Claude Code Prompt for Batch Rendering 
"Create a Node.js script called render-batch.ts
that reads a JSON file with an array of objects
containing { name, title, stats }. For each entry,
render the StatsCard composition with those props,
saving each as 'out/{name}.mp4'. Use Remotion's
bundle() and renderMedia() APIs."

Quality Settings

Control the quality-to-file-size tradeoff with the CRF (Constant Rate Factor) setting:

  • CRF 0: Lossless (huge files, maximum quality)
  • CRF 18: Visually lossless (recommended for high quality)
  • CRF 23: Default (good balance of quality and size)
  • CRF 28: Lower quality (smaller files, acceptable for web)
  • CRF 51: Worst quality (smallest files)

Performance Optimization

  • Reduce resolution for testing: Use --scale 0.5 for half-resolution renders during development
  • Render frame ranges: Use --frames 0-30 to render only the section you are working on
  • Concurrency: Remotion renders frames in parallel. Adjust with --concurrency flag
  • Preload assets: Use preloadImage() and preloadAudio() to prevent delays
  • Avoid heavy computation: Pre-calculate animation values when possible

CI/CD Rendering

Automate video rendering in your deployment pipeline:

GitHub Actions Workflow 
name: Render Videos
on:
  push:
    branches: [main]
jobs:
  render:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - run: npx remotion render src/index.ts
              MyComp out/video.mp4 --codec h264
      - uses: actions/upload-artifact@v4
        with:
          name: rendered-video
          path: out/video.mp4
✅
Pro tip: Use Remotion Lambda in CI/CD for faster renders. Local rendering in GitHub Actions works but is slower since it uses a single machine. Lambda distributes the work across many functions for parallel rendering.

💡 Try It: Render Your First Video

Take the multi-scene video from the previous lesson and render it to MP4. Experiment with different CRF values (18, 23, 28) and compare the file sizes and quality. Then try rendering a GIF version of just the first 3 seconds.