vite-plugin

The default plugin adds local editor navigation to your Vite application. The installed bridge owns runtime state, compilation, media, and export.

Install the runtime from Agent plugins, then install the adapter:

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

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

export default defineConfig({
  plugins: [
    vitePluginEditframe({
      projectRoot: process.cwd(),
      executable: "/absolute/editframe-bridge",
    }),
  ],
});

Use the absolute path of your installed bridge, or replace executable with componentRoot pointing to a verified component installation. A bare bridge also needs its editor/compiler assets selected when the workflow requires them; a verified component supplies its packaged asset paths.

Navigate to /@ef/workspace on your local HTTP development server. The plugin redirects to the authenticated browser editor. The application does not receive its bearer token. This route accepts local navigation only; do not expose it as a hosted editor endpoint.

Watch application source

Set source to select the exact existing files to mirror into a composition. For a single HTML composition:

vitePluginEditframe({
  projectRoot: process.cwd(),
  executable: "/absolute/editframe-bridge",
  source: {
    kind: "html",
    entryPath: "composition.html",
    files: ["composition.html"],
    onError: (error) => console.error(error),
  },
});

Use project-relative file paths. Source applications use kind: "source" and an entry path included in files. New files and assets require explicitly updating the selected workspace. The bridge owns compilation and revision checks.

Migrating previous configuration

The default entry point no longer starts an embedded media server or accepts the old root/cacheRoot configuration. See CLI migration. Legacy advanced application integrations are explicitly separated under @editframe/vite-plugin/advanced.