cloud-render

Render a composition in the Editframe cloud.

Packages your composition, uploads it to Editframe's infrastructure, and renders it server-side. No local FFmpeg or browser required.

EF_TOKEN=your_key npx editframe cloud-render [directory]

directory defaults to . (current directory). It must contain an index.html.

Simple HTML

A self-contained HTML file is the fastest path to a cloud render. Load the elements bundle from CDN, write your composition, and point cloud-render at the directory.

my-video/
└── index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module" src="https://cdn.editframe.com/elements/latest/index.js"></script>
    <link rel="stylesheet" href="https://cdn.editframe.com/elements/latest/styles.css" />
  </head>
  <body>
    <ef-timegroup id="root" mode="sequence" class="w-[1920px] h-[1080px] bg-black">
      <ef-timegroup mode="fixed" duration="3s" class="absolute w-full h-full bg-indigo-900 flex items-center justify-center">
        <ef-text class="text-white text-7xl font-bold">Scene One</ef-text>
      </ef-timegroup>
      <ef-timegroup mode="fixed" duration="3s" class="absolute w-full h-full bg-rose-900 flex items-center justify-center">
        <ef-text class="text-white text-7xl font-bold">Scene Two</ef-text>
      </ef-timegroup>
    </ef-timegroup>

    <script type="module">
      const root = document.getElementById("root");

      root.initializer = (instance) => {
        // frame tasks registered here run on render clones
      };
    </script>
  </body>
</html>
EF_TOKEN=your_key npx editframe cloud-render ./my-video

Vite bundled

For projects with local npm dependencies, Tailwind CSS, or TypeScript, scaffold with npm create @editframe and point cloud-render at the project root.

npm create @editframe -- html -d my-video -y
cd my-video

The generated project structure:

my-video/
├── index.html
├── vite.config.ts        # vite-plugin-singlefile + vitePluginEditframe + Tailwind
├── package.json
└── src/
    ├── index.js          # imports @editframe/elements
    ├── styles.css        # Tailwind entry
    └── assets/           # local media files (video, audio, images)

Edit index.html and src/index.js to build your composition, then render:

EF_TOKEN=your_key npx editframe cloud-render .

cloud-render runs vite build first, which uses vite-plugin-singlefile to produce a self-contained dist/index.html with all JavaScript and CSS inlined. Local asset references in ef-video, ef-audio, and ef-image are replaced with uploaded CDN asset IDs before the bundle is sent to the cloud.

How it works

  1. Syncs pre-processed asset tracks from src/assets/.cache to Editframe's CDN
  2. Runs vite build to produce dist/index.html
  3. Launches a headless browser to extract composition metadata (dimensions, fps, duration)
  4. Rewrites local asset src attributes with their uploaded CDN asset IDs
  5. Creates a render job via the API
  6. Tars dist/ and uploads the bundle to the render job