@grip/devtools

The universal UI layer for Grip. Provides shared components for the extension popup, DevTools panel, and floating tray.

Overview

@grip/devtools houses the Preact-based UI layer for the entire Grip ecosystem. It ensures that features like pick history, comments, and the MCP status badge look and behave identically no matter how you open Grip.

It exposes a single universal entry point (GripView) which seamlessly adapts to run as a popup window, a Chrome DevTools panel, or a floating shadow DOM tray injected directly into a live page.

Where it runs

  • Extension Popup — The compact view opened by clicking the Grip icon in the Chrome toolbar.
  • DevTools Panel — The persistent panel integrated directly into Chrome Developer Tools.
  • Floating Tray — A shadow DOM widget that overlays on the active web page, mounted via mountFloatingGrip.

Want to preview all the UI variants locally? Run pnpm dev:playground to access the dedicated DevTools UI Lab.