dev-server

Starts the Editframe dev media server as a standalone HTTP service on its own port. Handles JIT video transcoding, local asset serving, and URL signing — the same middleware that @editframe/vite-plugin and @editframe/nextjs-plugin mount internally.

npx editframe dev-server

Use this when your app doesn't use Vite or Next.js, or when you want the media server running independently from the application server.

Usage

# Start on the default port (3099) in the current directory
npx editframe dev-server

# Specify a directory and port
npx editframe dev-server ./my-project -p 4000

Flags

Connecting your composition

The dev server runs on its own port, separate from your app server. Elements default their API host to window.location.origin on localhost, so they'll send transcode requests to the app server's port instead. You must point them at the dev server explicitly using ef-configuration or window.__EDITFRAME__.

HTML

<ef-configuration api-host="http://localhost:3099">
  <ef-timegroup mode="sequence" class="w-[1920px] h-[1080px]">
    <ef-video src="./clip.mp4"></ef-video>
  </ef-timegroup>
</ef-configuration>

React

import { Configuration, Timegroup, Video } from "@editframe/elements/react";

export function Composition() {
  return (
    <Configuration apiHost="http://localhost:3099">
      <Timegroup mode="sequence" className="w-[1920px] h-[1080px]">
        <Video src="./clip.mp4" />
      </Timegroup>
    </Configuration>
  );
}

Global injection

For apps where you can't wrap the composition in ef-configuration, set window.__EDITFRAME__ before any elements load:

window.__EDITFRAME__ = { apiHost: "http://localhost:3099" };

Referencing media

Local files — paths are resolved relative to the directory passed to dev-server (defaults to the current directory):

<ef-video src="./interview.mp4"></ef-video>
<ef-audio src="./music/bg.mp3"></ef-audio>
<ef-image src="./logo.png"></ef-image>

Remote URLs — transcoded on demand via ffmpeg, no local copy needed:

<ef-video src="https://cdn.example.com/footage.mp4"></ef-video>

When to use the Vite or Next.js plugin instead

If your project already uses Vite or Next.js, use the framework plugin — it mounts the same media server as middleware on the app's own port, so elements work without any api-host configuration.