# On-device overlay

The on-device overlay is a small inspector inside your app: a floating badge that opens a live panel of components, their renders and the stores they read. It needs no desktop app and no network.

## Turn it on

`<Squiggle>` includes the overlay (see [SDK reference](https://squiggle.sh/docs/reference/sdk)). It only shows while the app isn’t connected to Studio or the `squiggle` command, and a simulator app connects to them by default. To use the overlay, stop the app connecting on its own:

```
# .env, in your app
EXPO_PUBLIC_SQUIGGLE_WS_URL=off
```

Then restart Metro and launch the app yourself. Studio and `squiggle flow` still connect when they launch the app, and the overlay hides while they do.

## Read the panel

| Row | Means |
| --- | --- |
| `○ CartRow ↻12 s` | A component, how many times it rendered, and why it last did: s for state, p for props, f for forced. |
| `▣ cart △8 [items, total]` | A store, how many times it changed, and the keys that changed last. |
| `← CartRow, CartBadge` | The components that read that store. |
| `CartRow.tsx:42` | Where the component is written. Needs the Babel plugin. |

> **Safe to leave in**
>
> The overlay draws nothing in a Release build, on the web, or while the app is connected to Studio or the CLI. You can leave it in your root component.