Visulima Dev Toolbar
A framework-agnostic development toolbar for Vite applications with built-in accessibility auditing, performance monitoring, SEO inspection, and an extensible app system.
Last updated:
@visulima/dev-toolbar is a powerful, extensible development toolbar for any Vite-based project — React, Vue, Svelte, SolidJS, or plain HTML. Inspired by Astro DevToolbar, Vue DevTools, and Nuxt DevTools, it brings a consistent developer experience regardless of your framework.
The toolbar renders inside a Shadow DOM custom element for complete CSS isolation, communicates with the Vite dev server over type-safe RPC, and ships seven built-in apps covering the most common development workflows.
Features
Framework Agnostic
Works with any Vite project. React, Vue, Svelte, SolidJS — zero framework assumptions.
7 Built-in Apps
Accessibility auditing, Performance metrics, SEO inspection, Vite Config viewer, Module Graph, Timeline events, and Settings — out of the box.
Extensible App System
Register custom apps with Preact components, full RPC access, and tooltip support. Build your own devtools panel in minutes.
Type-safe RPC
Bidirectional communication between the browser and Vite's Node.js process. Inspect files, open editors, read configs — all typed end-to-end.
Persistent State
Panel size, position, theme, and keyboard shortcuts are saved to localStorage and restored across page reloads automatically.
Library Integration
Third-party libraries can hook in via __DEV_TOOLBAR_HOOK__ without any direct dependency, enabling zero-config devtools for your users.
Built-in Apps at a Glance
| App | ID | What it does |
|---|---|---|
| Accessibility | dev-toolbar:a11y | axe-core WCAG audit with live element overlays |
| Performance | dev-toolbar:performance | Web Vitals, resource timing, navigation metrics |
| SEO | dev-toolbar:seo | Social preview cards + meta tag audit |
| Timeline | dev-toolbar:timeline | Chronological event log from your app and libraries |
| Module Graph | dev-toolbar:module-graph | Browse and filter Vite's live module graph |
| Vite Config | dev-toolbar:vite-config | Inspect the resolved Vite configuration |
| Settings | dev-toolbar:settings | Theme, toolbar behaviour, keyboard shortcuts |
How it Works
The toolbar is injected into the page by a Vite plugin as a <dev-toolbar> custom element. It renders a Preact UI inside Shadow DOM — so no styles leak in or out. Each "app" is a Preact component that receives RPC helpers and renders inside a resizable, draggable panel.
Browser Vite Dev Server
────────────────────────────── ────────────────────────
<dev-toolbar> (Shadow DOM) ←── HTML injection (script tag)
├── Toolbar pill ├── RPC handler
├── Panel canvas ←──────→ ├── getViteConfig()
│ ├── App: A11y ├── getModuleGraph()
│ ├── App: Performance └── openInEditor()
│ └── App: SEO
└── Settings (localStorage)Keyboard Shortcuts
| Action | Default |
|---|---|
| Toggle toolbar open/close | Alt+Shift+D |
| Close active app / panel | Escape |
Both shortcuts are fully configurable in the Settings app or via the plugin options.