> ## Documentation Index
> Fetch the complete documentation index at: https://hyperframes-codex-docs-human-first-refactor.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Deploy a preview and render API

> Start from an official Vercel, Cloudflare, or Modal template when you need a hosted preview and MP4 render endpoint.

HyperFrames has three official hosting templates. Each one previews a bundled
composition in `<hyperframes-player>` and renders it to MP4 on server-side
Chrome and FFmpeg.

Use these templates for a small hosted application. For managed rendering,
distributed infrastructure, or a Node backend, start with
[Choose a rendering path](/deploy/overview).

| Template                                                                    | Rendering runtime      | Output storage | Best fit                                                           |
| --------------------------------------------------------------------------- | ---------------------- | -------------- | ------------------------------------------------------------------ |
| [Vercel](https://github.com/heygen-com/hyperframes-vercel-template)         | Vercel Sandbox         | Vercel Blob    | A Next.js application already deployed on Vercel                   |
| [Cloudflare](https://github.com/heygen-com/hyperframes-cloudflare-template) | Cloudflare Container   | R2             | A Workers application that needs a containerized renderer          |
| [Modal](https://github.com/heygen-com/hyperframes-modal-template)           | Spawned Modal Function | Modal Volume   | A Python service with render jobs that run outside the web request |

## Vercel

The Vercel template is a Next.js application. Its `/api/render` route restores
a prepared Sandbox, runs `hyperframes render`, uploads the MP4 to Blob, and
returns a public URL.

[Deploy the Vercel template](https://vercel.com/new/clone?demo-title=HyperFrames+on+Vercel\&demo-description=Preview+HTML+video+compositions+in+the+browser+and+render+MP4s+server-side+on+Vercel+Sandbox.\&demo-image=https%3A%2F%2Fraw.githubusercontent.com%2Fheygen-com%2Fhyperframes-vercel-template%2Fmain%2Fdocs%2Fpreview.png\&demo-url=https%3A%2F%2Fhyperframes-on-vercel.vercel.app\&from=templates\&project-name=hyperframes-on-vercel\&repository-name=hyperframes-on-vercel\&repository-url=https%3A%2F%2Fgithub.com%2Fheygen-com%2Fhyperframes-vercel-template\&stores=%5B%7B%22type%22%3A%22blob%22%2C%22access%22%3A%22public%22%7D%5D)

Deployment provisions the Blob store. Sandbox access uses Vercel's runtime
identity. Follow the repository README for current account requirements and
platform limits.

## Cloudflare

The Cloudflare template is a TanStack Start application on Workers. A
`RenderContainer` Durable Object runs the renderer and streams the result to
R2. The template also includes optional prompt-based generation with a user's
own OpenRouter credential.

[Deploy the Cloudflare template](https://deploy.workers.cloudflare.com/?url=https://github.com/heygen-com/hyperframes-cloudflare-template)

Cloudflare Containers require a Workers Paid plan. Disable the optional AI
generation surface before hosting a public demo unless you intend visitors to
submit their own compositions.

## Modal

The Modal template exposes a FastAPI application. `POST /api/render` starts a
separate render function and returns a call ID; the browser polls until the MP4
is available from a Modal Volume.

```bash theme={null}
uv sync
source .venv/bin/activate
modal setup
modal deploy src/app.py
```

## Use your own composition

Author and check the project locally first:

```bash theme={null}
npx hyperframes init my-video
cd my-video
npx hyperframes preview
npx hyperframes check
```

Then replace the bundled composition in the selected template:

| Template   | Composition folder            | Select the composition                                                       |
| ---------- | ----------------------------- | ---------------------------------------------------------------------------- |
| Vercel     | `public/compositions/<name>/` | Update `PREVIEW_COMPOSITION_DIR` in `lib/preview.ts`                         |
| Cloudflare | `public/compositions/<name>/` | Set `PREVIEW_COMPOSITION_DIR=compositions/<name>` when building or deploying |
| Modal      | `compositions/<name>/`        | Update `PREVIEW_COMPOSITION` in `src/app.py`                                 |

If the authored canvas is not 1920×1080, also update the player dimensions in
the template. Each repository README names the current file.

## Before exposing the endpoint

These repositories are working examples, not a complete multi-tenant render
service. Add authentication, request limits, input validation, and cost controls
before accepting public render requests. Add a queue when jobs need retries,
priorities, or controlled concurrency.

For infrastructure designed around distributed jobs, use
[AWS Lambda](/deploy/aws-lambda) or [Google Cloud Run](/deploy/gcp-cloud-run).

## Source

<CardGroup cols={3}>
  <Card title="Vercel" icon="github" href="https://github.com/heygen-com/hyperframes-vercel-template">
    Next.js, Sandbox, and Blob
  </Card>

  <Card title="Cloudflare" icon="github" href="https://github.com/heygen-com/hyperframes-cloudflare-template">
    TanStack Start, Containers, and R2
  </Card>

  <Card title="Modal" icon="github" href="https://github.com/heygen-com/hyperframes-modal-template">
    FastAPI, spawned functions, and Volume storage
  </Card>
</CardGroup>