Buoy for React web apps — the React Native devtools, in the browser

Buoy in your web app, in 2 minutes

For Angular, use the Angular guide. It has its own AI install prompt.

For 3D apps, use the three.js (Beta) guide.

Use the phone app guide for Capacitor / Ionic (Beta).

Buoy's web build is the React Native one. Every package ships a /web entry that uses the same tool panels, stores, filters, actions, snapshots and sync protocol, with React Native Web drawing the UI. A small set of browser modules replaces what differs: storage, routing, DOM inspection, the clipboard, images and performance timing. A fix to a shared tool reaches both platforms.

Web support is in beta. Browser builds first shipped in 7.0.41.

Three ways to reach your running web app:

In the page — the same floating menu and dial as on a phone.
On your desktop — Buoy Desktop lists the browser tab in the device switcher next to your phones.
Through your AI — the MCP server lets Claude Code, Cursor or another MCP client read and drive the tab. Free has the basic MCP. Pro adds the full MCP.

Start here

Let your coding agent install Buoy in your app:

Let your coding agent install itClaude Code · Cursor · Codex

Read the prompt before you paste it

Install Buoy, the in-app devtools, in this React web project. Read the full instructions first: curl -fsSL https://buoy.gg/install-web.md Read the raw text, not a summary. If curl is unavailable, use any HTTP tool you have. Ask me to paste the document only if nothing can fetch it. Do the install yourself: inspect the repo, run the commands, edit the files. Do not hand me steps you can run. Work out the routine decisions from the repo: package manager, which app to target, the framework, where the early hook goes, where the host mounts, which Buoy tools match the dependencies already installed. If Buoy is already partly installed, repair and extend it; never add a second host, provider, or package set. When instructions conflict, follow this order: what I say here, then the document's rules about which packages exist and what needs my permission, then this project's own constraints, then the rest of the document, then your judgment. Ask me before: adding a dependency other than Buoy packages and react-native-web, showing Buoy outside development, opening a browser or creating an account, changing what a release build does beyond what the document specifies, or anything hard to undo. Do not commit. You are not done when the package installs. Run this project's existing typecheck and build; add no tooling. Then report what you installed and why, what you skipped and why, every file you changed, what you verified, and the exact steps I take in the browser to confirm the menu appears and captures a request.

The prompt asks your agent to inspect the project, choose matching tools and guide setup. Review its edits and verify the connection on your device.Read the setup instructions

To install by hand, follow the Quick Start.

What you need

React and React DOM, plus react-native-web 0.21. You don't need React Native or Expo.
The state libraries your tools inspect, such as Zustand, Jotai, Redux or TanStack Query.
A Free or Pro Buoy account key.

What works in the browser

The tools in the web sidebar all have browser builds. Their docs are shared with React Native, and each page has a note on what changes on the web. The largest differences:

Tool	In the browser
Network	The page's `fetch` and XHR calls from the moment the early hook loads, including overrides and network conditions.
Storage	`localStorage` and `sessionStorage`.
Routes	History API and hash navigation, plus any router you connect.
Perf Monitor	Frame rate, JS heap where available, long tasks.
Highlight Updates	React renders, through an import that loads before React DOM.

Installation has the setup for every tool.

Known limits

Only the current page is captured. Workers, other frames, WebSockets and browser-internal traffic need separate collectors.
CORS still applies. Buoy can only read the headers and bodies the page itself can read, and cross-origin timings may need Timing-Allow-Origin.
Browser APIs differ from native ones. IndexedDB, cookies and secure storage don't show up in Storage, and CPU, memory and thermal readings have no browser equivalent.
Not every tool has a browser build. Simulator Camera works with the iOS Simulator only, and TV Remote and Focus Inspector only observe keyboard and DOM focus events in a browser.
Development builds by default. Release connections need a Pro license and an explicit opt-in, the same as on native.

Next: Quick Start. For Next.js, React Router or TanStack Start, see Frameworks for where each piece goes.

Overview

Start here

What you need

What works in the browser

Known limits