Settings

App ID: dev-toolbar:settings

The Settings app provides a UI for every user-adjustable preference. Changes are applied immediately and persisted to localStorage under the key __v_dt__frame_state, so they survive page reloads. Plugin-level defaults (from vite.config.ts) are used as the initial values; user choices always take priority.

Setting Groups

Appearance

Toolbar

Panel

Editor

Select from a dropdown of all editors supported by launch-editor (VS Code, WebStorm, Cursor, Vim, etc.). Choose Auto-detected to let launch-editor detect the running IDE from the OS process list or EDITOR / VISUAL environment variables.

Keyboard Shortcuts

Each keyboard shortcut has a Record button that enters capture mode — the next key combination you press (excluding lone modifier keys) is saved as the new binding. A Reset link appears next to a customised binding to restore the default.

Recording a Custom Shortcut

1. Click Record next to the shortcut you want to change
2. The button pulses and reads "Press keys…"
3. Press the desired key combination (e.g. Ctrl+Shift+F)
4. The new binding is saved immediately
5. A Reset link appears if the binding differs from the default

To cancel without saving, click the ✕ button.

Supported Key Formats

Key names follow the browser's KeyboardEvent.key specification. Modifier prefixes are:

Examples: Alt+Shift+D, Control+Shift+P, Meta+K, F12

localStorage Schema

All settings are stored as a JSON object:

interface DevToolsFrameState {
    closeOnOutsideClick: boolean;
    editor: string; // preferred editor key, "" = auto-detect
    height: number; // panel height % (20–95)
    isPip: boolean; // picture-in-picture mode
    isFirstVisit: boolean; // onboarding hint shown
    keybindings: {
        toggle: string; // e.g. "Alt+Shift+D"
        close: string; // e.g. "Escape"
    };
    left: number; // pill horizontal position % (0–100)
    minimizePanelInactive: number; // ms, -1 = never
    open: boolean; // panel open state (never restored on load)
    position: "top" | "bottom" | "left" | "right";
    preferShowFloatingPanel: boolean;
    reduceMotion: boolean;
    route: string;
    top: number; // pill vertical position % (0–100)
    viewMode: "default" | "fullscreen" | "wide";
    width: number; // panel width % (0–100)
}

Storage key: __v_dt__frame_state

Plugin Defaults

You can set project-level defaults in vite.config.ts. These are used as the initial values when no localStorage state exists:

devToolbar({
    closeOnOutsideClick: true,
    editor: "webstorm", // seeds the "Preferred editor" dropdown for all users
    height: 60,
    keybindings: {
        toggle: "Alt+Shift+D",
        close: "Escape",
    },
    minimizePanelInactive: 5000,
    position: "bottom",
    reduceMotion: false,
    width: 80,
});

User choices in the Settings app always override these defaults.

View Modes

The panel supports three view modes accessible via the panel header controls:

View mode can also be set programmatically via the Global API.