Follow us on X

Install and configure the Visulima Dev Toolbar in your Vite project in under two minutes.

Install

bash npm install -D @visulima/dev-toolbar

bash pnpm add -D @visulima/dev-toolbar

bash yarn add -D @visulima/dev-toolbar

bash bun add -d @visulima/dev-toolbar

The package is a development-only tool. It is automatically excluded from production builds — the Vite plugin no-ops when command !== 'serve'.

Add the Vite Plugin

Open your vite.config.ts and add the devToolbar plugin:

vite.config.ts

import { defineConfig } from "vite";
import { devToolbar } from "@visulima/dev-toolbar/vite";

export default defineConfig({
    plugins: [devToolbar()],
});

That's it. Start your dev server and press Alt+Shift+D to open the toolbar.

A small pill appears at the bottom-center of your page. Click any app icon to open its panel, or use the keyboard shortcut:

Action	Shortcut
Toggle toolbar open/close	`Alt`+`Shift`+`D`
Close active app / panel	`Escape`

Minimal Configuration

By default only the Vite Config and Settings apps are shown. Enable whichever optional apps you need:

vite.config.ts

import { defineConfig } from "vite";
import { devToolbar } from "@visulima/dev-toolbar/vite";

export default defineConfig({
    plugins: [
        devToolbar({
            // Toolbar placement
            placement: "bottom-right",

            // Opt-in to the apps you want
            apps: {
                inspector: true,
                performance: true,
                seo: true,
            },

            // Change the default keyboard shortcuts
            keybindings: {
                toggle: "Alt+Shift+D",
                close: "Escape",
            },
        }),
    ],
});

SSR frameworks such as TanStack Start, Nuxt, and SvelteKit render the full HTML document server-side. Vite's transformIndexHtml hook — which the toolbar normally uses to inject its <script> — is never called on those server-rendered responses.

TanStack Start (auto-detected)

The plugin automatically detects TanStack Start and injects the toolbar via the module graph (targeting router.tsx) — no extra configuration needed:

vite.config.ts

import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { devToolbar } from "@visulima/dev-toolbar/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
    plugins: [
        tanstackStart(),
        viteReact(),
        devToolbar(),
    ],
});

Because TanStack Start renders on the server, any window.__DEV_TOOLBAR_HOOK__ calls must be placed inside a useEffect to ensure they only run in the browser:

React.useEffect(() => {
    if (typeof window !== "undefined" && window.__DEV_TOOLBAR_HOOK__) {
        window.__DEV_TOOLBAR_HOOK__.addTimelineEvent("custom", { /* ... */ });
    }
}, []);

Other SSR / Non-HTML Setups

For any project without a static index.html entry point that is not auto-detected, use the appendTo option to inject the toolbar via the JavaScript module graph instead of the HTML pipeline. The transform hook that powers appendTo automatically skips SSR builds (transformOptions.ssr === true), so the import is only added to the client bundle.

Point appendTo at a module that is guaranteed to run client-side only:

vite.config.ts

devToolbar({
    appendTo: "src/main.ts",
});

Framework Examples

vite.config.ts

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { devToolbar } from "@visulima/dev-toolbar/vite";

export default defineConfig({
    plugins: [
        react(),
        devToolbar(),
    ],
});

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { devToolbar } from "@visulima/dev-toolbar/vite";

export default defineConfig({
    plugins: [
        vue(),
        devToolbar(),
    ],
});

vite.config.ts

import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";
import { devToolbar } from "@visulima/dev-toolbar/vite";

export default defineConfig({
    plugins: [
        svelte(),
        devToolbar(),
    ],
});

vite.config.ts

import { defineConfig } from "vite";
import { devToolbar } from "@visulima/dev-toolbar/vite";

export default defineConfig({
    plugins: [
        devToolbar(),
    ],
});

vite.config.ts

import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import { devToolbar } from "@visulima/dev-toolbar/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsConfigPaths from "vite-tsconfig-paths";

export default defineConfig({
    plugins: [
        tsConfigPaths({ projects: ["./tsconfig.json"] }),
        tanstackStart(),
        viteReact(),
        // TanStack Start is auto-detected — no appendTo needed.
        devToolbar(),
    ],
});

Next Steps

Full configuration reference — every plugin option explained
Built-in apps — learn what each app does
Creating custom apps — build your own devtools panel
Library integration — add devtools support to your library

Getting Started

Install

Add the Vite Plugin

Minimal Configuration

Using with SSR Frameworks

TanStack Start (auto-detected)

Other SSR / Non-HTML Setups

Framework Examples

Next Steps

On this page

Contribute to our work and keep us going

Ready to help us out?

Submit a pull request

Good first issues