Getting Started

The Editframe Vite plugin integrates video transcoding, asset management, and visual testing into your Vite development workflow.

Installation

npm install @editframe/vite-plugin

Configuration

Add the plugin to your vite.config.ts:

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

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

Configuration Options

root

The base directory for resolving relative file paths. When the plugin receives a request for a local file, it resolves the path relative to this directory.

vitePluginEditframe({
  root: "./src",
  cacheRoot: "./cache",
})

cacheRoot

Directory where transcoded video assets are cached. On first request for a video, the plugin transcodes it and stores the result here for fast subsequent loads.

vitePluginEditframe({
  root: "./src",
  cacheRoot: "./cache",
})

Vitest Configuration

For visual testing with Vitest browser mode, use the vitest-specific entry point:

// vitest.config.ts
import { defineConfig } from "vitest/config";

export default defineConfig(async () => {
  const { vitePluginEditframe } = await import(
    "@editframe/vite-plugin/src/index.vitest.js"
  );

  return {
    plugins: [
      vitePluginEditframe({
        root: "./test-assets",
        cacheRoot: "./test-assets",
      }),
    ],
    test: {
      browser: {
        enabled: true,
        provider: "playwright",
      },
    },
  };
});