Configuration Reference

Complete reference for all Domscribe plugin configuration options. Options are organized by category and apply across bundler plugins and framework adapters.

Transform Plugin Options

These are the base options shared across all bundler plugins (@domscribe/transform). Framework adapters (@domscribe/react, @domscribe/vue, @domscribe/next, @domscribe/nuxt) extend these with framework-specific options.

Vite Plugin

import { domscribe } from '@domscribe/transform/plugins/vite';

domscribe({
  include: /\.(jsx|tsx|vue)$/i,
  exclude: /node_modules|\.test\.|\.spec\./i,
  debug: false,
  rootDir: undefined,
  relay: { autoStart: true, port: 0, host: '127.0.0.1', bodyLimit: 10485760 },
  overlay: true,
});

Webpack Plugin

import { DomscribeWebpackPlugin } from '@domscribe/transform/plugins/webpack';

new DomscribeWebpackPlugin({
  enabled: true,
  debug: false,
  relay: { autoStart: true, port: 0, host: '127.0.0.1' },
  overlay: true,
});

Webpack Loader Options

The webpack loader is managed internally by DomscribeWebpackPlugin. If you need to configure it directly via @domscribe/transform/webpack-loader:

Turbopack Loader

Turbopack does not have a plugin system, so the loader is self-initializing -- it manages relay lifecycle and overlay injection directly.

// next.config.ts (turbopack)
{
  turbopack: {
    rules: {
      '*.{tsx,jsx}': {
        loaders: [{
          loader: '@domscribe/transform/turbopack-loader',
          options: {
            enabled: true,
            debug: false,
            relay: { autoStart: true, port: 0, host: '127.0.0.1' },
            overlay: false,
            autoInitPath: undefined,
          },
        }],
      },
    },
  },
}

Relay Options

Control the relay daemon that bridges the browser overlay and coding agents. These options are passed via the relay field on any bundler plugin.

interface RelayPluginOptions {
  autoStart?: boolean;
  port?: number;
  host?: string;
  bodyLimit?: number;
}

Overlay Options

Control the in-browser overlay UI. Pass true for defaults, false to disable, or an object for fine-grained control.

interface OverlayPluginOptions {
  initialMode?: 'collapsed' | 'expanded';
  debug?: boolean;
}

Runtime Options

Control the browser-side context capture system. These options are passed via the runtime field on framework adapter plugins.

interface DomscribeRuntimeOptions {
  phase?: 1 | 2;
  redactPII?: boolean;
  blockSelectors?: string[];
}

React-Specific Options

The @domscribe/react adapter extends the base transform options with React-specific capture settings.

import { domscribe } from '@domscribe/react/vite';

domscribe({
  // ...base transform options (include, exclude, debug, relay, overlay)
  runtime: { phase: 1, redactPII: true, blockSelectors: [] },
  capture: {
    strategy: 'best-effort',
    maxTreeDepth: 50,
    includeWrappers: true,
    hookNameResolvers: undefined,
  },
});

interface DomscribeReactCaptureOptions {
  strategy?: 'devtools' | 'fiber' | 'best-effort';
  maxTreeDepth?: number;
  includeWrappers?: boolean;
  hookNameResolvers?: Record<string, Record<number, string>>;
}

hookNameResolvers Example

By default, React hook state is captured with generic names like hook_0, hook_1. Use hookNameResolvers to give them meaningful names:

domscribe({
  capture: {
    hookNameResolvers: {
      Button: { 0: 'isHovered', 1: 'variant' },
      SearchInput: { 0: 'query', 1: 'results', 2: 'isLoading' },
    },
  },
});

This maps by component name. Keys are component names, values are objects mapping hook index (0-based) to the semantic name.

Vue-Specific Options

The @domscribe/vue adapter extends the base transform options with Vue-specific capture settings.

import { domscribe } from '@domscribe/vue/vite';

domscribe({
  // ...base transform options (include, exclude, debug, relay, overlay)
  runtime: { phase: 1, redactPII: true, blockSelectors: [] },
  capture: {
    maxTreeDepth: 50,
  },
});

interface DomscribeVueCaptureOptions {
  maxTreeDepth?: number;
}

Next.js Options

The @domscribe/next package provides a withDomscribe() config wrapper for Next.js 15 and 16.

import { withDomscribe } from '@domscribe/next';

export default withDomscribe({
  enabled: true,
  include: ['src/**'],
  exclude: ['**/*.test.*'],
  debug: false,
  relay: { autoStart: true, port: 0, host: '127.0.0.1' },
  overlay: { enabled: true },
})(nextConfig);

interface DomscribeNextOptions {
  enabled?: boolean;
  include?: string[];
  exclude?: string[];
  debug?: boolean;
  relay?: { autoStart?: boolean; port?: number; host?: string };
  overlay?: { enabled?: boolean; options?: OverlayPluginOptions };
}

withDomscribe() automatically:

• Applies the transform plugin in dev mode only
• Injects relay globals and overlay scripts via HTML
• Aliases @domscribe/overlay to a no-op stub in production (zero bundle impact)
• Supports both Webpack (Next.js 15) and Turbopack (Next.js 16+)

Nuxt Options

The @domscribe/nuxt module provides zero-config integration for Nuxt 3+.

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@domscribe/nuxt'],
  domscribe: {
    debug: false,
    overlay: { enabled: true },
    relay: { autoStart: true, port: 0, host: '127.0.0.1' },
  },
});

interface DomscribeNuxtOptions {
  debug?: boolean;
  overlay?: { enabled?: boolean; options?: OverlayPluginOptions };
  relay?: { autoStart?: boolean; port?: number; host?: string };
}

The Nuxt module automatically:

• Starts the relay daemon in dev mode
• Injects relay globals via app.head
• Applies Vite and Webpack plugins for AST injection
• Registers a client-only runtime plugin for RuntimeManager and VueAdapter initialization