Free and open source · macOS, Windows, Linux
Logs, network (including WebSockets), storage, and state from Redux, Zustand, TanStack Query, SWR and React Context, streamed live from your app to a local UI. On React Native 0.85 and later, logs, network and storage need no SDK.
One window for every app on your simulators, phones and browser tabs, updated as things happen.
Browsers only tell your app “Failed to fetch”. Capybara repeats the request's CORS steps from your computer and
names the cause: a missing Access-Control-Allow-Origin, a failing preflight, a blocked port.
Redux, Zustand, TanStack Query, SWR and React Context in one tab: every action with what it changed, the current
state, and query caches you can refetch or invalidate. Redux Toolkit, zustand's devtools() and
Context need no extra code.
Objects, Maps, Sets, Dates and errors arrive as values you can expand, stack included. Filter by level or regex, and copy one entry or all of them.
localStorage, sessionStorage and cookies on the web. AsyncStorage and MMKV in React Native. Values refresh as the app writes them, and JSON opens as a tree.
Start Capybara with --remote-ui and scan the QR code under the device button: the UI opens on a
phone, tablet or another computer on your network. Without the flag it only opens on your computer, since it
shows everything your apps send.
On React Native 0.85 and later, Capybara attaches through Metro. Start your app as usual; nothing to install in it.
fetch, XHR and axios with headers, bodies and timing. WebSocket messages both ways, with socket.io frames decoded.
Capybara's MCP server lets Claude Code, Cursor and other MCP clients add Capybara to your app, then read and filter its logs, requests, storage and state, with credentials hidden.
Pick the kind of app you're working on.
No SDK and no changes to your app.
Capybara
npx capybara-devtools
Install the SDK and call init() in a file your app imports first, so it runs before your stores load.
In Next.js, put it in instrumentation-client.ts. Or let your AI assistant
do it.
npm install @capybara-devtools/web// src/capybara.ts, the first import of main.tsx
import { init } from '@capybara-devtools/web';
if (import.meta.env.DEV) init({ appName: 'My web app' });Your assistant can add Capybara to your app, then read what it records while you debug.
claude mcp add capybara -- npx capybara-devtools mcpnpx capybara-devtools mcp from their MCP settings.
init() where your app loads it first and
connects your state libraries:
Set up Capybara in this project
Older React Native, editing storage, or state in a React Native app? Add @capybara-devtools/react-native;
the README shows how.
Until the packages are on npm, run Capybara from source.
Everything runs on your computer: no account, no cloud service, no telemetry.
Free for macOS, Windows and Linux. Latest release on GitHub
Apple silicon (M1 or later)
This Mac has an Intel chip, and this build needs Apple silicon. You can build Capybara from source instead.
Capybara isn't notarized by Apple yet. If macOS won't open it, go to System Settings › Privacy & Security and click Open Anyway.
Windows 10 and 11, x64
The installer needs no admin rights. SmartScreen may warn about an unknown publisher: choose More info, then Run anyway. When Windows Firewall asks, allow private networks so phones on your Wi-Fi can connect.
x64 and arm64
Make the AppImage executable (chmod +x) and run it; it doesn't need libfuse2. On Ubuntu 24.04 and later,
start capybara-desktop from the tar.gz with --no-sandbox.