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.

Template	Rendering runtime	Output storage	Best fit
Vercel	Vercel Sandbox	Vercel Blob	A Next.js application already deployed on Vercel
Cloudflare	Cloudflare Container	R2	A Workers application that needs a containerized renderer
Modal	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

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

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.

uv sync
source .venv/bin/activate
modal setup
modal deploy src/app.py

Use your own composition

Author and check the project locally first:

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 or Google Cloud Run.

Source

Vercel

Next.js, Sandbox, and Blob

Cloudflare

TanStack Start, Containers, and R2

Modal

FastAPI, spawned functions, and Volume storage