> ## 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 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 Vite 8.3 or later.

## Set Up DevTools

<Steps>
  <Step title="Install the packages">
    ```bash theme={null}
    npm install -D @powersync/diagnostics @vitejs/devtools
    ```

    Vite 8 also needs `@vitejs/devtools`, because its `devtools` option loads Vite DevTools from this package.
  </Step>

  <Step title="Add the plugin">
    Enable Vite DevTools and add the PowerSync plugin in `vite.config.ts`.

    <Tabs>
      <Tab title="Vite 8">
        ```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`.
      </Tab>

      <Tab title="Vite 7">
        Vite 7 has no `devtools` option, so add Vite DevTools as a plugin.

        ```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()]
        });
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="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 });
    ```
  </Step>

  <Step title="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.
  </Step>

  <Step title="Open PowerSync DevTools">
    Click the **PowerSync** entry in the dock at the bottom of the page.
  </Step>
</Steps>

<Frame caption="The PowerSync entry 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="Vite DevTools dock with the PowerSync entry open" width="2408" height="1374" data-path="images/tools/devtools-vite-dock.png" />
</Frame>

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

## 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.

<Frame caption="The database list in the DevTools header, with two app tabs attached.">
  <img src="https://mintcdn.com/powersync-diagnostics-docs/tGo6qMjMqnM2PSty/images/tools/devtools-multiple-tabs.png?fit=max&auto=format&n=tGo6qMjMqnM2PSty&q=85&s=552a3c57935f3ebaf246bf3ef0a00d3a" alt="DevTools header with a list of two attached databases, web-1 and web-2" width="1088" height="262" data-path="images/tools/devtools-multiple-tabs.png" />
</Frame>

## Troubleshooting

**The dock has no PowerSync entry.** Check that Vite DevTools is enabled: the `devtools` option on Vite 8, or the `DevTools()` plugin on Vite 7. 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.