# preact-devtools

> Preact Devtools Extension

Latest version **0.0.1** (published 2019-09-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install preact-devtools
pnpm add preact-devtools
yarn add preact-devtools
bun add preact-devtools
```

## Health

**Score 40/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-09-07 |
| First published | 2019-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 325.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 344 |
| Author | Marvin Hagemeister |
| Maintainers | marvinhagemeister |

## Links

- npm: https://www.npmjs.com/package/preact-devtools
- Repository: https://github.com/marvinhagemeister/preact-devtools
- Homepage: https://github.com/marvinhagemeister/preact-devtools#readme
- Issues: https://github.com/marvinhagemeister/preact-devtools/issues
- npm.io page: https://npm.io/package/preact-devtools

## Recent versions

- 0.0.1 (latest) — 2019-09-07

## README

# Preact Devtools

## Embedding devtools directly into a page

`preact-devtools` supports an inline build target, where the devtools
can be embedded into any page without any restrictions like rendering
it into `iframe`s. Don't forget to include the css file too.

```js
import "preact-devtools/dist/preact-devtools.css";
import { attach, createRenderer, renderDevtools } from "preact-devtools";
import { options } from "preact";

// Instantiate devtools backend and attach it to preact
// - store -> The backing store for the devtools
// - destroy -> unlisten and restore previous `preact.options`
const { store, destroy } = attach(options, createRenderer);

// Render the actual devtools into the specified DOM node
renderDevtools(store, document.getElementById("devtools"));
```

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