vite-plugin

Vite plugin for Editframe — local JIT transcoding and asset serving with zero configuration.

Adds the Editframe media server as middleware on your Vite dev server. JIT transcoding, local asset serving, and URL signing all run on the same origin as your app — no separate port, no api-host configuration needed.

Installation

npm install --save-dev @editframe/vite-plugin

Configuration

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

export default defineConfig({
  plugins: [
    vitePluginEditframe({
      root: "./src",
      cacheRoot: "./src/assets/.cache",
    }),
  ],
});

Option	Type	Description
`root`	`string`	Base directory for resolving local media file paths
`cacheRoot`	`string`	Directory where transcoded tracks and thumbnails are cached

Environment variables

Variable	Description
`EF_TOKEN`	Your Editframe API token — required for URL signing
`EF_HOST`	Override the Editframe API host (optional)

How it works

The plugin registers a Connect middleware on Vite's dev server that handles:

/api/v1/transcode/* — JIT transcoding: converts local and remote video to streamable fMP4 segments on first request, cached for subsequent loads
/api/v1/assets/* — Local image and caption serving
/@ef-sign-url — URL token signing via the Editframe API
/@ef-clear-cache — Cache invalidation

It also injects window.__EDITFRAME__ = { apiHost: "http://localhost:<port>" } into your HTML during dev so elements route requests to the correct origin automatically.

Referencing media

Because the media server runs on the same origin as your app, src paths work as standard URL references:

<!-- Local file at src/clip.mp4 -->
<ef-video src="/clip.mp4"></ef-video>

<!-- Remote URL — transcoded on demand -->
<ef-video src="https://cdn.example.com/footage.mp4"></ef-video>

// React
<Video src="/clip.mp4" />
<Video src="https://cdn.example.com/footage.mp4" />

No ef-configuration or apiHost prop needed during development.

Caching

Transcoded tracks are written to cacheRoot. Commit this directory to avoid re-transcoding on CI or after a fresh clone. Clear it with:

npx editframe dev-server --cache-root ./src/assets/.cache  # then DELETE via /@ef-clear-cache

Or just delete the directory manually — it will be rebuilt on next use.