Vite Plugin

When do you need this?

You need the Vite plugin when your composition references local video files. Without it, the browser can't play raw video files — they must be transcoded to streamable ISOBMFF format first.

Already included in all project templates (npm create @editframe). You only need to install it manually when adding Editframe to an existing Vite project.

Scenario	Need this?
Compositions with local .mp4/.mov files	Yes — JIT transcoding
Compositions with remote URLs only	No
Adding Editframe to existing Vite project	Yes — install manually
Visual regression tests with Vitest	Yes — use vitest entry point

Bundling for Cloud Rendering

For cloud rendering (npx editframe cloud-render), the build must produce a single self-contained dist/index.html with all JS and CSS inlined. Use vite-plugin-singlefile alongside this plugin:

// vite.config.ts
import { defineConfig } from "vite";
import { vitePluginEditframe } from "@editframe/vite-plugin";
import { viteSingleFile } from "vite-plugin-singlefile";
import react from "@vitejs/plugin-react"; // React projects only

export default defineConfig({
  plugins: [
    vitePluginEditframe({ root: "./src", cacheRoot: "./src/assets" }),
    viteSingleFile(),
    react(), // React projects only
  ],
});

npm install vite-plugin-singlefile

Both plugins are already included in all npm create @editframe project templates — this is only needed when setting up an existing project manually.

The Dev Loop with This Plugin

npm run dev
  ↓
Vite starts + plugin registers middleware
  ↓
Composition loads video src="/src/assets/clip.mp4"
  ↓
Plugin transcodes on first request → cached in cacheRoot/
  ↓
Subsequent loads → served from cache (fast)

The @editframe/vite-plugin adds local development capabilities to your Vite project. It handles on-demand video transcoding, local asset serving, and visual regression testing so you can develop Editframe compositions without cloud API dependencies.

Installation

npm install @editframe/vite-plugin

Configuration

// vite.config.ts
import { defineConfig } from "vite";
import { vitePluginEditframe } from "@editframe/vite-plugin";

export default defineConfig({
  plugins: [
    vitePluginEditframe({
      root: "./src",       // Base directory for resolving file paths
      cacheRoot: "./cache", // Directory for cached transcoded assets
    }),
  ],
});

Reference

• references/getting-started.md — Installation and configuration options
• references/jit-transcoding.md — How on-demand video transcoding works
• references/local-assets.md — Local image and caption serving
• references/file-api.md — File API endpoints
• references/visual-testing.md — Visual regression testing with Vitest