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

> Learn Remotion Studio deployment options. Self-host the visual editor easily on static platforms, containers, or CDNs. Get the complete guide now.

- Repository: [Remotion/remotion](https://github.com/remotion-dev/remotion)
- Tags: tutorial
- Published: 2026-02-16

---

**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](https://github.com/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`](https://github.com/remotion-dev/remotion/blob/main/packages/remotion-studio/package.json).

Run the build command from the repository root:

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

```

The output lands in **`packages/remotion-studio/dist/`**. This directory contains the entry [`index.html`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/packages/remotion-studio/package.json)** – Defines the `build` script (`vite build`) and workspace dependencies.
- **[`packages/remotion-studio/vite.config.ts`](https://github.com/remotion-dev/remotion/blob/main/packages/remotion-studio/vite.config.ts)** – Configures Vite, including path aliases, plugins, and environment variable handling.
- **[`packages/remotion-studio/src/index.tsx`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/vercel.json) that instructs Vercel to build the Studio workspace and serve the `dist` folder.

**Minimal [`vercel.json`](https://github.com/remotion-dev/remotion/blob/main/vercel.json) configuration:**

```json
{
  "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)](https://github.com/remotion-dev/remotion/blob/main/packages/remotion-studio/vercel.json)

## Deploying to Netlify

Netlify works similarly, using a [`netlify.toml`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/netlify.toml) configuration:**

```toml
[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`](https://github.com/remotion-dev/remotion/blob/main/netlify.toml) and executes the workspace build.
3. The redirect rule ensures that refreshing `/editor/composition-id` serves [`index.html`](https://github.com/remotion-dev/remotion/blob/main/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)](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:**

```dockerfile

# 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:**

```bash
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`](https://github.com/remotion-dev/remotion/blob/main/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:**

```bash
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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/index.html). | Configure a fallback rewrite to [`index.html`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/vercel.json) with `@vercel/static-build`.
- **Netlify**: Use [`netlify.toml`](https://github.com/remotion-dev/remotion/blob/main/netlify.toml) with a rewrite rule to [`index.html`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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`](https://github.com/remotion-dev/remotion/blob/main/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.