Remotion Studio Deployment Options: A Complete Guide to Self-Hosting the Visual Editor

Deploy Remotion Studio by building the Vite-powered React app with npm run build --workspace=@remotion/studio and hosting the resulting dist/ folder on any static site platform, container, or CDN.

Remotion Studio is the visual editor that ships with the remotion-dev/remotion framework for programmatic video creation. Because the Studio is a standard Vite application that compiles to static HTML, JavaScript, and CSS, you can deploy it anywhere static assets are served—from serverless platforms like Vercel to Docker containers behind a corporate firewall.

Building Remotion Studio for Production

Before deploying, you must generate the production bundle. The build process is defined in the workspace configuration at packages/remotion-studio/package.json.

Run the build command from the repository root:

npm install
npm run build --workspace=@remotion/studio

The output lands in packages/remotion-studio/dist/. This directory contains the entry index.html, hashed JavaScript chunks, and static assets required to render the Studio UI.

Key source files controlling the build:

• packages/remotion-studio/package.json – Defines the build script (vite build) and workspace dependencies.
• packages/remotion-studio/vite.config.ts – Configures Vite, including path aliases, plugins, and environment variable handling.
• packages/remotion-studio/src/index.tsx – The React entry point for the Studio application.

Deploying to Vercel

Vercel is the recommended platform for teams already using the Vercel ecosystem. The repository includes a pre-configured vercel.json that instructs Vercel to build the Studio workspace and serve the dist folder.

Minimal vercel.json configuration:

{
  "builds": [
    {
      "src": "packages/remotion-studio/package.json",
      "use": "@vercel/static-build",
      "config": {
        "distDir": "packages/remotion-studio/dist"
      }
    }
  ],
  "routes": [
    { "src": "/(.*)", "dest": "/packages/remotion-studio/dist/$1" }
  ]
}

Deployment steps:

1. Push your repository to GitHub.
2. Import the project in the Vercel dashboard.
3. Vercel automatically detects the @vercel/static-build builder and deploys the contents of dist/.

Reference: [packages/remotion-studio/vercel.json](https://github.com/remotion-dev/remotion/blob/main/packages/remotion-studio/vercel.json)

Deploying to Netlify

Netlify works similarly, using a netlify.toml file to define the build command and publish directory. Because Remotion Studio uses client-side routing (React Router), you must add a redirect rule to ensure deep links work correctly.

Minimal netlify.toml configuration:

[build]
  command = "npm run build --workspace=@remotion/studio"
  publish = "packages/remotion-studio/dist"

[[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200

Deployment steps:

1. Connect your GitHub repository in the Netlify UI.
2. Netlify reads netlify.toml and executes the workspace build.
3. The redirect rule ensures that refreshing /editor/composition-id serves index.html and lets React Router handle the path.

Reference: [packages/remotion-studio/netlify.toml](https://github.com/remotion-dev/remotion/blob/main/packages/remotion-studio/netlify.toml)

Deploying with Docker

For self-hosted environments or private networks, package the built Studio into a lightweight container. The repository provides a multi-stage Dockerfile that builds the app with Node.js and serves it with nginx.

Dockerfile example:

# Stage 1: Build

FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm ci && npm run build --workspace=@remotion/studio

# Stage 2: Serve

FROM nginx:alpine
COPY --from=builder /app/packages/remotion-studio/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Build and run:

docker build -t remotion-studio .
docker run -p 8080:80 remotion-studio

The Studio UI is now available at http://localhost:8080.

Reference: packages/remotion-studio/Dockerfile

Static File Hosting (S3, Cloudflare Pages, GitHub Pages)

Because Remotion Studio compiles to static assets, you can deploy the dist/ folder to any static host without additional configuration.

Typical workflow for AWS S3:

aws s3 sync packages/remotion-studio/dist s3://my-remotion-studio-bucket \
    --acl public-read \
    --cache-control max-age=31536000

Ensure the S3 bucket is configured for static website hosting with index.html as the index document. For Cloudflare Pages or GitHub Pages, drag-and-drop the dist/ folder or use the respective CLI tools.

Common Deployment Issues and Fixes

Issue	Root Cause	Solution
404 on page refresh	Server looks for a physical file at /editor/composition-id instead of serving index.html.	Configure a fallback rewrite to index.html (see Netlify [[redirects]] or Vercel routes).
Missing environment variables	Studio reads process.env at build time; variables not injected during CI.	Set env vars in the host’s dashboard (Vercel, Netlify) or pass --build-arg in Docker.
Large bundle size	Unused dependencies or lack of code splitting.	Verify tree-shaking is enabled in vite.config.ts and use dynamic imports where possible.
Stale assets after update	Browser caches old hashed chunks.	Vite automatically hashes filenames; ensure your host serves files with long-term cache headers but respects the new hashes.

Summary

• Remotion Studio is a Vite-based React app that builds to static files in packages/remotion-studio/dist/.
• Build command: npm run build --workspace=@remotion/studio.
• Vercel: Use the provided vercel.json with @vercel/static-build.
• Netlify: Use netlify.toml with a rewrite rule to index.html for client-side routing.
• Docker: Use the multi-stage Dockerfile (Node build → nginx serve).
• Static hosts: Upload the dist/ folder to S3, Cloudflare Pages, or GitHub Pages.
• Critical fix: Always configure a fallback to index.html to support deep links and browser refreshes.

Frequently Asked Questions

Can I deploy Remotion Studio to Vercel without using the provided configuration files?

Yes, but you must manually configure the build settings. In the Vercel dashboard, set the Root Directory to packages/remotion-studio, the Build Command to npm run build, and the Output Directory to dist. However, using the provided vercel.json at the repository root automates these settings and ensures routes are correctly mapped.

Why do I get a 404 error when refreshing the page on a deployed Studio?

This occurs because Remotion Studio uses client-side routing (React Router). When you refresh /editor/my-composition, the server looks for a physical file at that path instead of serving index.html. Fix this by adding a fallback rewrite rule: in Netlify use [[redirects]] with to = "/index.html", and in Vercel ensure your routes array catches all paths and points to the dist folder.

Is Docker the best option for self-hosting Remotion Studio behind a firewall?

Yes, Docker is ideal for air-gapped or corporate environments where you cannot use public SaaS platforms. The multi-stage Dockerfile in packages/remotion-studio/Dockerfile builds the app with Node.js and serves it with nginx, resulting in a lightweight image (~20MB) that exposes port 80. You can run this on any container orchestrator (Kubernetes, Docker Compose) without external internet access after the image is built.

How do I handle environment variables when deploying Remotion Studio?

Remotion Studio reads environment variables at build time, not runtime. Define variables in your host’s build environment—for example, in Vercel’s Environment Variables dashboard or Netlify’s Build & Deploy settings. If using Docker, pass them as build arguments (--build-arg KEY=VALUE) and ensure your vite.config.ts exposes them to the client via define or envPrefix. Never commit sensitive keys to the repository; use the host’s secret management instead.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}