Documentation
Add Buoy to a React web app and open the floating menu. The examples use Vite; any bundler that reads the browser export condition works. Frameworks has the setup for Next.js, React Router and TanStack Start.
1. Install
npm install @buoy-gg/core @buoy-gg/network @buoy-gg/storage react-native-webFor plain Markdown readers, the command is:
npm install @buoy-gg/core @buoy-gg/network @buoy-gg/storage react-native-web
npm install @buoy-gg/core @buoy-gg/network @buoy-gg/storage react-native-web
Add other tools the same way. Your app doesn't need React Native or Expo.
2. Get an account key
From the app directory:
npx --package=@buoy-gg/core buoy login
npx --package=@buoy-gg/core buoy login
In a Vite app, the CLI writes VITE_BUOY_KEY to .env.development.local for a Free account, or to .env.local for a paid one. Restart the dev server afterward.
3. Register the early hook
Put this import at the top of your entry file, before React DOM loads:
// main.tsx
import '@buoy-gg/core/web/register';
import ReactDOM from 'react-dom/client';
// main.tsx
import '@buoy-gg/core/web/register';
import ReactDOM from 'react-dom/client';
It lets the render, layout and element tools see React, and it starts recording fetch and XHR calls so Network can show the requests your page makes while it loads. Other tools work without it.
4. Mount the host
import { FloatingDevTools } from '@buoy-gg/core/web';
import * as network from '@buoy-gg/network/web';
import * as storage from '@buoy-gg/storage/web';
// Keep this outside the component so it stays stable.
const modules = { network, storage };
export function App() {
return (
<>
{/* your app */}
<FloatingDevTools modules={modules} licenseKey={import.meta.env.VITE_BUOY_KEY} />
</>
);
}
import { FloatingDevTools } from '@buoy-gg/core/web';
import * as network from '@buoy-gg/network/web';
import * as storage from '@buoy-gg/storage/web';
// Keep this outside the component so it stays stable.
const modules = { network, storage };
export function App() {
return (
<>
{/* your app */}
<FloatingDevTools modules={modules} licenseKey={import.meta.env.VITE_BUOY_KEY} />
</>
);
}
Import from the /web entries and pass each namespace in modules, keyed by package name ('react-query', 'route-events', 'time-machine'). Mount the host inside the providers your tools inspect, such as QueryClientProvider or the Redux Provider.
Reload the page. The floating menu appears, and Network lists the page's requests, including the ones made before Buoy loaded.
5. Connect Buoy Desktop (optional)
npm install @buoy-gg/external-sync
npm install @buoy-gg/external-sync
import * as externalSync from '@buoy-gg/external-sync/web';
const modules = { network, storage, 'external-sync': externalSync };
import * as externalSync from '@buoy-gg/external-sync/web';
const modules = { network, storage, 'external-sync': externalSync };
Open Buoy Desktop and the tab appears in the device switcher.
More detail, including the setup for each tool, is in Installation.