> ## Documentation Index
> Fetch the complete documentation index at: https://powersync-diagnostics-docs.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# PowerSync DevTools

> Inspect the live state of your app's PowerSync client during development, in your browser DevTools or through MCP tools for coding agents.

PowerSync DevTools shows the sync status, buckets, Sync Stream subscriptions, local SQLite data, schema, and logs of the PowerSync client in your app. You can also run SQL queries and sync actions. Coding agents can read the same data through [MCP tools](/tools/devtools/mcp) when you use Vite, Nuxt DevTools 4, or Node.js.

DevTools runs in development only and adds nothing to a production build.

<Frame caption="PowerSync DevTools in the Vite DevTools dock.">
  <img src="https://mintcdn.com/powersync-diagnostics-docs/tGo6qMjMqnM2PSty/images/tools/devtools-vite-dock.png?fit=max&auto=format&n=tGo6qMjMqnM2PSty&q=85&s=46df404bc65224bf927e517580dedbb8" alt="PowerSync DevTools panel showing the Sync Status tab" width="2408" height="1374" data-path="images/tools/devtools-vite-dock.png" />
</Frame>

## How It Works

Your Vite or Nuxt dev server serves DevTools. In a Node.js app, your app process serves it instead.

```mermaid theme={null}
flowchart LR
  App["Your app<br/>(browser tab or Node process)"] -- "live database" --> Host["Dev server<br/>(Vite, Nuxt, or your Node app)"]
  Host --> UI["DevTools window"]
  Host --> Agent["Coding agent<br/>(MCP)"]
```

DevTools reads from the database that your app has open, so it shows the same data that your app sees.

## Choose Your Environment

<CardGroup cols={2}>
  <Card title="Vite" icon="bolt" href="/tools/devtools/vite">
    React, Vue, Svelte, or any web app that uses Vite 7 or 8.
  </Card>

  <Card title="Nuxt" icon="vuejs" href="/tools/devtools/nuxt">
    Nuxt apps that use `@powersync/nuxt` with Nuxt DevTools 3 or 4.
  </Card>

  <Card title="Node.js" icon="node-js" href="/tools/devtools/node">
    Node.js apps that use `@powersync/node`.
  </Card>

  <Card title="Dart & Flutter" icon="flutter" href="/tools/dart-devtools-extension">
    Flutter and Dart apps, in Dart & Flutter DevTools.
  </Card>
</CardGroup>

<Info>
  Support for more platforms is under consideration. To ask for a specific integration, submit an idea or vote for it on the [PowerSync Roadmap](https://roadmap.powersync.com).
</Info>

## Tabs and MCP Tools

<CardGroup cols={2}>
  <Card title="Using DevTools" icon="table-columns" href="/tools/devtools/using-devtools">
    What each tab is for and which actions you can run.
  </Card>

  <Card title="MCP Tools" icon="robot" href="/tools/devtools/mcp">
    Give a coding agent access to your app's live PowerSync client.
  </Card>
</CardGroup>

## DevTools vs. Sync Diagnostics Client

Use DevTools to inspect the client in your running app. Use the [Sync Diagnostics Client](/tools/diagnostics-client) to see the data that the Service syncs to a specific user. You can use both in tandem.

| | PowerSync DevTools | Sync Diagnostics Client |
| - | - | - |
| **How it connects** | To your running app | With a user JWT and the PowerSync endpoint |
| **What you inspect** | Local SQLite data and sync state in your app | Sync data: buckets, operations, stream subscriptions |
| **Environment** | Development only | Any environment |
| **SDK-specific** | Yes | No. It works with all SDKs. |


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.