Tooling · Package reference

@wrnexus/dev-toolbar

Development toolbar diagnostics, inspection, and runtime status.

v0.8.8Private registryTooling

Install the package

After WorkRoot approves private registry access, install the release-aligned package:

bun add @wrnexus/dev-toolbar@0.8.8

Request preview access. Never put registry tokens in source control.

Development-only page quality toolbar for WRNexusJS.

Features

Runtime, resource and unhandled promise error capture
Accessibility, SEO, image, media, color, HTML, form, link, responsive and security checks
Performance and network observations
First-class application tabs for runtime, stores, cache, accessibility, SEO, performance,

security, images, links, and JavaScript

Plugin-contributed applications with badges, descriptions, issue feeds, and structured data
Element highlighting and issue filtering
Server-side issue collector
Development-only asset strings for direct serving by @wrnexus/dev-server
Safe open-in-editor helper

Dev-server integration

Serve DEV_TOOLBAR_RUNTIME at /__wrnexus/dev-toolbar.js and DEV_TOOLBAR_CSS at /__wrnexus/dev-toolbar.css, then inject this before </body> in development:

<script type="module" src="/__wrnexus/dev-toolbar.js" data-wrnexus-dev-toolbar></script>

The browser runtime exposes window.__wrnexusDevToolbar.

Plugin panels returned through devToolbarPanels() are automatically added to the application strip. Their issue category is filterable, and structured data is rendered as escaped diagnostic content so a plugin never needs to inject toolbar HTML.

Complete TypeScript API

Generated from the exact installed package declarations.

export { DevToolbarCategory, DevToolbarClientApi, DevToolbarConfig, DevToolbarElementTarget, DevToolbarFix, DevToolbarIssue, DevToolbarMetrics, DevToolbarPageReport, DevToolbarPanel, DevToolbarPlatformSnapshot, DevToolbarServerMessage, DevToolbarSeverity, DevToolbarSourceLocation } from './types.js';
export { DEV_TOOLBAR_RULES, DevToolbarRule, DevToolbarRuleContext, accessibilityRules, accessibleName, colorRules, contrastRatio, createFingerprint, createIssue, effectiveBackground, formRules, getStableSelector, htmlRules, imageRules, isVisible, linkRules, luminance, mediaRules, parseRgb, parseSource, performanceRules, responsiveRules, runDevToolbarRules, securityRules, seoRules } from './rules/index.js';
export { BuiltinPanelOptions, DevToolbarApp, DevToolbarCollector, DevToolbarIssueListener, DevToolbarRegistry, DevToolbarRouteOptions, OpenEditorOptions, OpenEditorRequest, buildEditorCommand, builtinDevToolbarPanels, createDevToolbarCollector, createDevToolbarRegistry, createServerIssue, handleDevToolbarRoute, issueFromError, openInEditor, resolveEditorFile, serializeDevToolbarJson } from './server/index.js';
export { DEV_TOOLBAR_CSS, DEV_TOOLBAR_RUNTIME } from './client/index.js';

Examples

Copy-ready examples from the installed package documentation.

Serve DEVTOOLBARRUNTIME at /wrnexus/dev-toolbar.js and DEVTOOLBARCSS at /wrnexus/dev-toolbar.css, then inject this before </body> in development

<script type="module" src="/__wrnexus/dev-toolbar.js" data-wrnexus-dev-toolbar></script>

Run development-toolbar rules

import { runDevToolbarRules } from "@wrnexus/dev-toolbar";

const issues = runDevToolbarRules(context);