---
url: /mobx-view-model/other/dev-tools.md
---
# DevTools

::: warning Work in Progress
`mobx-view-model-devtools` is currently a **WIP** project. The API and features may change at any time.
:::

A standalone devtools panel for inspecting and debugging your `ViewModel` instances in real time.

![DevTools screenshot 1](/devtools-screen-1.png)
![DevTools screenshot 2](/devtools-screen-2.png)

Source: [js2me/mobx-view-model-devtools](https://github.com/js2me/mobx-view-model-devtools)

***

## Installation

The easiest way to inject the devtools is via a `<script>` tag — no npm install required.

### Option 1 — async script (recommended)

```html
<script
  async
  crossorigin="anonymous"
  src="https://unpkg.com/mobx-view-model-devtools/auto.global.js"
></script>
```

### Option 2 — dynamic fetch

Use this approach when you need finer control over when the script is loaded (e.g. only in development mode):

```html
<script>
  fetch('https://unpkg.com/mobx-view-model-devtools/auto.global.js').then(async response => {
    const script = await response.text();
    const scriptElement = document.createElement('script');
    scriptElement.innerHTML = script;
    document.head.appendChild(scriptElement);
  });
</script>
```

### Option 3 — package dependency

Install the devtools package with your package manager:

::: code-group

```bash [npm]
npm install mobx-view-model-devtools
```

```bash [pnpm]
pnpm add mobx-view-model-devtools
```

```bash [yarn]
yarn add mobx-view-model-devtools
```

:::

Then import and connect it directly from your application code:

```ts
import { ViewModelDevtools } from 'mobx-view-model-devtools';

ViewModelDevtools.connect(viewModelStore);
```

To keep the devtools out of production bundles, load the package only in development:

```ts
if (process.env.NODE_ENV === 'development') {
  import('mobx-view-model-devtools').then(({ ViewModelDevtools }) => {
    ViewModelDevtools.connect(viewModelStore);
  });
}
```

### Option 4 — Vite plugin

If you're using Vite, the [mobx-view-model-vite-plugin](/other/vite-plugin) can connect the devtools automatically — no manual setup required:

```ts
import { mobxVmVitePlugin } from "mobx-view-model-vite-plugin";

export default {
  plugins: [mobxVmVitePlugin({ devtools: true })],
};
```

***

## Connecting to a ViewModelStore

The automatic script and the Vite plugin subscribe to store creation and connect stores for you. The automatic script also connects the most recently created store if it loads after that store. Call `connect()` only when you import the package directly:

```ts
ViewModelDevtools.connect(viewModelStore);
```

### Example

```ts
import { ViewModelStoreBase } from 'mobx-view-model';

const viewModelStore = new ViewModelStoreBase();

ViewModelDevtools.connect(viewModelStore);
```

***

## Connecting extra data

You can also expose arbitrary data (e.g. global stores, services) alongside your ViewModels:

```ts
ViewModelDevtools.connectExtras({ foo: 'bar' });
```

This is useful for attaching a `RootStore` or any other object you want to inspect in the panel.

***

## Development-only setup

To avoid loading devtools in production, wrap the injection in a condition:

```ts
if (import.meta.env.DEV) {
  const script = document.createElement('script');
  script.src = 'https://unpkg.com/mobx-view-model-devtools/auto.global.js';
  script.crossOrigin = 'anonymous';
  script.async = true;
  document.head.appendChild(script);
}
```