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

# PowerSync DevTools for Vite

> Add PowerSync DevTools to the Vite DevTools dock in a React, Vue, Svelte, or other Vite web app.

The `@powersync/diagnostics/vite` plugin adds a **PowerSync** entry to the [Vite DevTools](https://devtools.vite.dev) dock. It works with any web app that uses Vite and `@powersync/web`, such as React, Vue, and Svelte apps.

## Requirements

* `@powersync/web` 2.5.0 or later.
* Vite 7 or later.

## Set Up DevTools

**1. Install the packages**

```bash theme={null}
npm install -D @powersync/diagnostics @vitejs/devtools
```

Both setups in the next step require `@vitejs/devtools`.

**2. Add the plugin**

Enable Vite DevTools and add the PowerSync plugin in `vite.config.ts`. On Vite 8.3 or later, we recommend the `devtools` option. On earlier versions, use the `DevTools()` plugin.

**devtools option (Vite 8.3+)**

```typescript theme={null}
import { defineConfig } from 'vite';
import powersyncDevtools from '@powersync/diagnostics/vite';

export default defineConfig({
  devtools: { apply: 'serve' },
  plugins: [powersyncDevtools()]
});
```

`apply: 'serve'` limits Vite DevTools to the dev server. Without it, Vite DevTools also runs during `vite build`. You can also use `devtools: true`.

**DevTools() plugin (Vite 7+)**

The plugin works on all supported Vite versions. Before Vite 8.3, it is the only setup, because the `devtools` option does not work on the dev server.

```typescript theme={null}
import { defineConfig } from 'vite';
import { DevTools } from '@vitejs/devtools';
import powersyncDevtools from '@powersync/diagnostics/vite';

export default defineConfig({
  plugins: [...(await DevTools()), powersyncDevtools()]
});
```

**3. Optional: Enable diagnostics when you connect**

To show the total number of operations for each bucket in the **Buckets** tab, pass `diagnostics: true` when you connect.

```typescript theme={null}
await db.connect(connector, { diagnostics: true });
```

**4. Start the dev server and trust your browser**

Start the dev server and open your app. The first time, Vite DevTools asks you to trust the browser:

1. Click the Vite DevTools dock entry.
2. Enter the six-digit code from the terminal in the browser, or open the link that the terminal prints.

You'll do this once for each browser profile.

**5. Open PowerSync DevTools**

Click the **PowerSync** entry in the dock at the bottom of the page.

![Vite DevTools dock with the PowerSync entry open](https://mintcdn.com/powersync/_Qarmu1PjiOcxAqE/images/tools/devtools-vite-dock.png?fit=max\&auto=format\&n=_Qarmu1PjiOcxAqE\&q=85\&s=ebe8e37abb2fe5c8d9b952697eb17d04)

The PowerSync entry in the Vite DevTools dock.

To see what each tab shows, read [Using DevTools](/tools/devtools/using-devtools.md). To connect a coding agent, read [MCP Tools](/tools/devtools/mcp.md).

## Plugin Options

| Option | Description |
| - | - |
| `title` | The title of the dock entry. The default is `PowerSync`. |

## Multiple Tabs and Databases

If your app is open in more than one browser tab, DevTools attaches the database from each tab. To switch between them, use the database list in the DevTools header. The list appears only when more than one database is attached.

If one page opens more than one PowerSync database, DevTools shows only the first one.

![DevTools header with a list of two attached databases, web-1 and web-2](https://mintcdn.com/powersync/_Qarmu1PjiOcxAqE/images/tools/devtools-multiple-tabs.png?fit=max\&auto=format\&n=_Qarmu1PjiOcxAqE\&q=85\&s=f1969ffb0d2357ba4a5249eba15bfbf0)

The database list in the DevTools header, with two app tabs attached.

## Troubleshooting

**The dock has no PowerSync entry.** Check that Vite DevTools is enabled: the `devtools` option (Vite 8.3 or later) or the `DevTools()` plugin. Then restart the dev server.

**DevTools shows "No PowerSync database attached".** DevTools gets the database from an open app tab. Open your app in a browser that Vite DevTools trusts. DevTools updates when your app opens its database. If the app tab was in the background for a while, reload the app tab to attach the database again.


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