DevTools API

Reference for @quantajs/devtools runtime integration.

Exports

import { mountDevTools, DevTools } from '@quantajs/devtools';
  • mountDevTools(options?)
  • DevTools (Preact component)

mountDevTools(options?)

Mounts Quanta DevTools and returns a cleanup function.

Signature

function mountDevTools(options?: DevToolsOptions): () => void;

DevToolsOptions

interface DevToolsOptions {
  visible?: boolean;
  target?: HTMLElement | string;
  onError?: (error: Error) => void;
}

Option Details

  • visible
    • undefined (default): auto-detect development mode
    • true: force visible
    • false: no-op mount
  • target
    • default is 'body'
    • supports CSS selector string or HTMLElement
  • onError
    • optional callback for non-fatal mount issues (for example, missing target)

Return Value

Returns cleanup() => void to unmount and release listeners/timers.

Examples

Basic

import { mountDevTools } from '@quantajs/devtools';

mountDevTools();

Custom Target

mountDevTools({ target: '#devtools-root' });

Error Hook

mountDevTools({
  target: '#missing-root',
  onError(error) {
    console.warn(error.message);
  },
});

Dynamic Import (Production-Safe)

if (import.meta.env.DEV) {
  import('@quantajs/devtools').then(({ mountDevTools }) => {
    mountDevTools();
  });
}

DevTools Component

Low-level Preact component for manual composition.

import { render } from 'preact';
import { DevTools } from '@quantajs/devtools';

render(<DevTools />, document.body);

For React apps, prefer QuantaDevTools from @quantajs/react.

Bridge Events (for context)

DevTools subscribes to the global bridge exposed by Quanta core and consumes:

  • STORE_INIT
  • STATE_CHANGE
  • ACTION_CALL

In most apps, this is fully automatic and requires no manual bridge wiring.