devbar.shBLOCK

Drop-in toolbar for any website. Annotate the UI and capture selectors, computed styles, React component trees, and screenshots as an agent-ready prompt.

[](https://www.npmjs.com/package/devbar.sh) [](./LICENSE)

It follows the host page's theme, so it does not look pasted onto a light app:

Installation

bun add devbar.sh

Usage

Mount `` once, anywhere in your tree. It renders a fixed toolbar and owns its own overlays.

import { Devbar } from "devbar.sh";

function App() {
return (
<>



);
}

The stylesheet ships as a separate file — import it once alongside the component:

import "devbar.sh/styles.css";

The CDN build (devbar.sh/cdn) inlines its own styles, so it needs no separate import.

Server-rendered apps

The toolbar is safe to import from a server-rendered tree — a Next.js root layout, a Remix root, an Astro island. It renders nothing on the server and nothing on the first client render, then appears once mounted, because what it draws depends on the host page's theme, a stored bar position and stored settings; producing markup without them would only fail to hydrate.

In Next.js, mount it in the root layout from a 'use client' module:

"use client";

import { Devbar } from "devbar.sh";

import "devbar.sh/styles.css";

export function DevToolbar() {
if (process.env.NODE_ENV !== "development") return null;

return ;
}

That still ships the toolbar's stylesheet to production, where the guard means it is never used. To keep it out, put the two imports in a module of their own and pull that module i