# @solid-devtools/overlay

> On-page Devtools Overlay for SolidJS Applications.

Latest version **0.33.5** (published 2025-07-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @solid-devtools/overlay
pnpm add @solid-devtools/overlay
yarn add @solid-devtools/overlay
bun add @solid-devtools/overlay
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 0.33.5 |
| Published | 2025-07-01 |
| First published | 2022-10-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 254.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 660 |
| Author | Damian Tarnawski |
| Maintainers | thetarnav. |
| Keywords | solid, devtools |

## Links

- npm: https://www.npmjs.com/package/@solid-devtools/overlay
- Repository: https://github.com/thetarnav/solid-devtools
- Homepage: https://github.com/thetarnav/solid-devtools/tree/main/packages/overlay#readme
- Issues: https://github.com/thetarnav/solid-devtools/issues
- npm.io page: https://npm.io/package/@solid-devtools/overlay

## Dependencies (8)

- [@nothing-but/utils](https://npm.io/package/@nothing-but/utils.md) ~0.17.0
- [@solid-devtools/shared](https://npm.io/package/@solid-devtools/shared.md) ^0.20.0
- [@solid-primitives/media](https://npm.io/package/@solid-primitives/media.md) ^2.3.1
- [@solid-primitives/utils](https://npm.io/package/@solid-primitives/utils.md) ^6.3.1
- [@solid-devtools/debugger](https://npm.io/package/@solid-devtools/debugger.md) ^0.28.1
- [@solid-devtools/frontend](https://npm.io/package/@solid-devtools/frontend.md) ^0.15.4
- [@solid-primitives/cursor](https://npm.io/package/@solid-primitives/cursor.md) ^0.1.1
- [@solid-primitives/event-listener](https://npm.io/package/@solid-primitives/event-listener.md) ^2.4.1

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 0.33.5 (latest) — 2025-07-01
- 0.33.4 — 2025-06-17
- 0.33.3 — 2025-06-14
- 0.33.2 — 2025-04-01
- 0.33.1 — 2025-02-02
- 0.33.0 — 2025-01-03
- 0.32.0 — 2025-01-01
- 0.31.7 — 2024-12-30
- 0.31.6 — 2024-12-23
- 0.31.5 — 2024-12-18
- 0.31.4 — 2024-12-17
- 0.31.3 — 2024-12-16
- 0.31.2 — 2024-12-15
- 0.31.1 — 2024-12-13
- 0.31.0 — 2024-12-11
- … 41 more at https://npm.io/package/@solid-devtools/overlay/versions

## README

<a href="https://github.com/thetarnav/solid-devtools/tree/main/packages/overlay#readme" target="_blank">
  <p>
    <img width="100%" src="https://assets.solidjs.com/banner?type=Devtools&background=tiles&project=Devtools%20Overlay" alt="Solid Devtools Overlay">
  </p>
</a>

# @solid-devtools/overlay

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![version](https://img.shields.io/npm/v/@solid-devtools/overlay?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/overlay)
[![npm](https://img.shields.io/npm/dw/@solid-devtools/overlay?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/overlay)

An on-page devtools overlay for debugging SolidJS Applications without a chrome extension.

Simply add the Overlay component to your app and get access to a powerful, in-browser devtools experience during development. _(It will be removed in production)_

## Try it online!

A couple of deployed demo websites where you can see the Overlay in action:

- [Sandbox Website](https://thetarnav.github.io/solid-devtools) - [Source code](https://github.com/thetarnav/solid-devtools/tree/main/examples/sandbox)

## Getting started

### Installation

```bash
npm i @solid-devtools/overlay
# or
yarn add @solid-devtools/overlay
# or
pnpm add @solid-devtools/overlay
```

### Attach the overlay

Simply place the overlay component in the client entry file.

```tsx
import { attachDevtoolsOverlay } from '@solid-devtools/overlay'

attachDevtoolsOverlay()

// or with some options

attachDevtoolsOverlay({
  defaultOpen: true, // or alwaysOpen
  noPadding: true,
})
```

Don't worry about wrapping it with a `isDev` guard, the Overlay takes care of that for you. It should be excluded from production builds automatically.

### Enabling the autoname

Enabling the autoname setting is optional, but can display name of SolidJS's reactive state in overlay.

To enable it you need to add it to plugins array in your `.vite.config.ts` file:

```ts
// vite.config.ts

import { defineConfig } from 'vite'
import solid from 'vite-plugin-solid'
import devtools from 'solid-devtools/vite'

export default defineConfig({
  plugins: [
    devtools({
      autoname: true,
    }),
    solid(),
  ],
})
```

[**See vite plugin**](https://github.com/thetarnav/solid-devtools/blob/main/packages/main/src/vite/vite.ts)

## Changelog

See [CHANGELOG.md](./CHANGELOG.md).

---
_Source: https://npm.io/package/@solid-devtools/overlay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._