# @solid-devtools/frontend Latest version **0.15.4** (published 2025-07-01) · MIT license · 0 weekly downloads ## Install ```sh npm install @solid-devtools/frontend pnpm add @solid-devtools/frontend yarn add @solid-devtools/frontend bun add @solid-devtools/frontend ``` ## 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.15.4 | | Published | 2025-07-01 | | First published | 2022-10-12 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 22 | | Unpacked size | 224.3 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 659 | | Author | Damian Tarnawski | | Maintainers | thetarnav. | | Keywords | solid, devtools | ## Links - npm: https://www.npmjs.com/package/@solid-devtools/frontend - Repository: https://github.com/thetarnav/solid-devtools - Homepage: https://github.com/thetarnav/solid-devtools/tree/main/packages/frontend#readme - Issues: https://github.com/thetarnav/solid-devtools/issues - npm.io page: https://npm.io/package/@solid-devtools/frontend ## Dependencies (22) - [clsx](https://npm.io/package/clsx.md) ^2.1.1 - [@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/date](https://npm.io/package/@solid-primitives/date.md) ^2.1.2 - [@solid-primitives/keyed](https://npm.io/package/@solid-primitives/keyed.md) ^1.5.1 - [@solid-primitives/media](https://npm.io/package/@solid-primitives/media.md) ^2.3.1 - [@solid-primitives/mouse](https://npm.io/package/@solid-primitives/mouse.md) ^2.1.2 - [@solid-primitives/props](https://npm.io/package/@solid-primitives/props.md) ^3.2.1 - [@solid-primitives/range](https://npm.io/package/@solid-primitives/range.md) ^0.2.2 - [@solid-primitives/timer](https://npm.io/package/@solid-primitives/timer.md) ^1.4.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-primitives/cursor](https://npm.io/package/@solid-primitives/cursor.md) ^0.1.1 - [@solid-primitives/styles](https://npm.io/package/@solid-primitives/styles.md) ^0.1.1 - [@solid-primitives/context](https://npm.io/package/@solid-primitives/context.md) ^0.3.1 - [@solid-primitives/keyboard](https://npm.io/package/@solid-primitives/keyboard.md) ^1.3.1 - [@solid-primitives/event-bus](https://npm.io/package/@solid-primitives/event-bus.md) ^1.1.1 - [@solid-primitives/scheduled](https://npm.io/package/@solid-primitives/scheduled.md) ^1.5.1 - [@solid-primitives/static-store](https://npm.io/package/@solid-primitives/static-store.md) ^0.1.1 - [@solid-primitives/jsx-tokenizer](https://npm.io/package/@solid-primitives/jsx-tokenizer.md) ^1.1.1 - [@solid-primitives/event-listener](https://npm.io/package/@solid-primitives/event-listener.md) ^2.4.1 - [@solid-primitives/resize-observer](https://npm.io/package/@solid-primitives/resize-observer.md) ^2.1.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.15.4 (latest) — 2025-07-01 - 0.15.3 — 2025-06-17 - 0.15.2 — 2025-06-14 - 0.15.1 — 2025-04-01 - 0.15.0 — 2025-01-03 - 0.14.0 — 2025-01-01 - 0.13.0 — 2024-12-30 - 0.12.5 — 2024-12-23 - 0.12.4 — 2024-12-18 - 0.12.3 — 2024-12-16 - 0.12.2 — 2024-12-15 - 0.12.1 — 2024-12-13 - 0.12.0 — 2024-12-11 - 0.11.5 — 2024-04-01 - 0.11.4 — 2023-11-18 - … 36 more at https://npm.io/package/@solid-devtools/frontend/versions ## README

Solid Devtools Frontend

# @solid-devtools/frontend [![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/frontend?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/frontend) [![npm](https://img.shields.io/npm/dw/@solid-devtools/frontend?style=for-the-badge)](https://www.npmjs.com/package/@solid-devtools/frontend) The frontend of the devtools extension as a npm package, so it can be embedded in different projects. ## Getting started ### Installation ```bash npm i @solid-devtools/frontend # or yarn add @solid-devtools/frontend # or pnpm add @solid-devtools/frontend ``` ### The debugger The [debugger](https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger#readme) package is what you should use to get information out of the reactivity graph of an app you want to debug and display on the devtools. You can communicate with it using it's plugin API. For reference, see the [main](https://github.com/thetarnav/solid-devtools/tree/main/packages/main/src) package, which contains the code to communicate with the debugger from the devtools extension through a chrome postMessage API. ### The controller The devtools frontend is controlled with a `Controller` API. It provides a set of methods to trigger actions, and a way to get events from the devtools frontend. ```ts const controller = new Controller({ onDevtoolsLocatorStateChange(enabled) { console.log(enabled) }, onHighlightElementChange(data) { console.log(data) }, onInspectNode(data) { console.log(data) }, onInspectValue(data) { console.log(data) }, }) ``` This package is continuously under development, so the API is still not well defined. So instead of focusing on the API, the usage examples should show how you can embed this package in different context. - [Chrome Extension](https://github.com/thetarnav/solid-devtools/blob/main/extension/src/App.tsx) - The extension is communicating with the [debugger](https://github.com/thetarnav/solid-devtools/tree/main/packages/debugger#readme) using the [main](https://github.com/thetarnav/solid-devtools/tree/main/packages/main/src) npm package. - [Overlay component](https://github.com/thetarnav/solid-devtools/blob/main/packages/overlay/src/controller.ts) ## Changelog See [CHANGELOG.md](./CHANGELOG.md). --- _Source: https://npm.io/package/@solid-devtools/frontend · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._