Advanced development tooling

Build custom route inspectors, runtime panels, overlays, and SSR development hosts on the public experimental development boundary.

Use the public experimental boundary

@tavojs/core/dev is a public experimental entry point. Its exports are suitable for custom development hosts and tools, but can evolve faster than stable application entry points. Import only this package boundary; files under Core src/runtime, src/ssr, src/framework, and src/auto-pages are not public imports.

API / contract	Type / boundary	Default / result	Behavior
`route inspection`	`build / server`	read-only	Discover modules and build manifests or diagnostics without creating a route runtime.
`runtime snapshots`	`browser`	privacy-safe	Inspect route lifecycle and DOM counts without loader data, headers, cookies, tokens, or store values.
`diagnostics / overlay`	`browser development`	opt-in	Collect traces and hydration mismatches or display a dependency-free error overlay.
`SSR Vite host`	`Node development`	127.0.0.1:4174	Starts middleware-mode Vite with `Tavo.js` routes, actions, plugins, images, and development cache behavior.

Inspect route modules without rendering

The CLI is the normal application inspection surface and owns route discovery.
Experimental hosts that already own an explicit module map can use createPagesManifest, createPagesManifestDetailed, and inspectPages from @tavojs/core/dev.
createPagesManifest returns sorted routes. createPagesManifestDetailed also returns 404, global error, and diagnostics metadata.

BASH

bashnpx tavo routes
npx tavo inspect route /dashboard --json

Subscribe to runtime state and dispose

subscribeTavoRuntime emits immediately unless immediate: false is supplied.
The subscription follows pathname and route-status changes and returns one unsubscribe function.
The panel returns element, refresh, and dispose. dispose removes its subscription, event listener, and DOM element.
Snapshots omit application data but expose route structure and operational counts; keep production installation opt-in.

tsimport {
  inspectTavoRuntime,
  installTavoDevtoolsPanel,
  subscribeTavoRuntime
} from "@tavojs/core/dev";

export function installRuntimeInspection(): () => void {
  console.debug(inspectTavoRuntime());

  const stop = subscribeTavoRuntime(
    function printRuntimeSnapshot(snapshot) {
      console.debug(snapshot.route, snapshot.status, snapshot.dom);
    },
    { immediate: false }
  );

  const panel = installTavoDevtoolsPanel({
    initiallyOpen: false
  });

  return function disposeRuntimeInspection() {
    stop();
    panel.dispose();
  };
}

Configure diagnostics and the development overlay

API / contract	Type / boundary	Default / result	Behavior
`configureDevDiagnostics`	`browser diagnostics`	disabled	Configures traces, mismatch callbacks, error handling, development reporting, and strict hydration.
`installDevOverlay`	`browser development`	traces: false	Installs the error overlay; optional traces add development lifecycle context.

tsimport {
  configureDevDiagnostics,
  installDevOverlay,
} from "@tavojs/core/dev";

configureDevDiagnostics({
  enabled: true,
  devMode: true,
  strictHydration: false,
});

installDevOverlay({ traces: true });

Start and close a custom SSR development host

The host reads root tavo.config.ts in the selected mode and uses its pages, CSS, plugins, and nested SSR options.
Set host deliberately. Binding 0.0.0.0 exposes the development server to the local network.
TAVO_MONITOR_TOKEN protects the development monitor endpoint with an exact Bearer header.
Always await server.close in tests and editor integrations so Vite watchers and the HTTP listener are released.

tsimport {
  startViteAutoPagesDevServer
} from "@tavojs/core/dev";

async function main(): Promise<void> {
  const server = await startViteAutoPagesDevServer({
    root: process.cwd(),
    mode: "development",
    host: "127.0.0.1",
    port: 4174
  });

  console.log(server.url);

  process.once("SIGTERM", function closeServer() {
    void server.close();
  });
}

await main();

Look up exact public types

Follow linked API names to their canonical TypeScript declarations and package boundaries.