react-state-inspector-devtools

A lightweight, runtime state inspector for React.
Inspect and edit component state live — directly from your app.


---

✨ What is this?

react-state-inspector-devtools is a dev-only React tool that lets you:

- 👀 See which components are currently mounted
- 🔍 Inspect their internal state (useState)
- ✏️ Edit state values live from a floating UI panel
- ⚡ Observe UI updates instantly

No browser extensions.
No React DevTools dependency.
Just drop it into your app.

---

🧠 Why?

React DevTools are great — but sometimes you want:

- 🖥️ State inspection inside the app
- 🧪 A tool that works in embedded environments, previews, sandboxes
- 🎨 A way to poke state values quickly while designing UI
- ⚙️ Zero setup, zero configuration

> This tool is optimized for developer experience, not production analytics.

---

📦 Installation

``bash
npm install react-state-inspector-devtools
`

or

`bash
pnpm add react-state-inspector-devtools
`

or

`bash
yarn add react-state-inspector-devtools
`

---

🚀 Quick Start

$3

`tsx
import { StateInspectorProvider, StateInspectorUI } from "react-state-inspector-devtools";

export function AppRoot() {
return (


{import.meta.env.DEV && }

);
}
`

> ⚠️ Important:
> This tool is intended for development only.
> Always gate it behind DEV / NODE_ENV !== "production".

$3

Replace useState with useInspectableState:

`tsx
import { useInspectorComponent, useInspectableState } from "react-state-inspector-devtools";

export function CounterCard() {
const inspector = useInspectorComponent("CounterCard");

const [count, setCount] = useInspectableState(inspector, "count", 0, {
type: "number",
min: 0,
max: 999,
step: 1,
});

return (



);
}
`

That's it.
The component and its state will appear in the inspector UI.

---

🪟 The Inspector UI

- Appears as a floating button in the bottom-right corner
- Opens a panel with:
- Left: Mounted components list
- Right: Editable state values
- State changes update the UI immediately

$3

| Type | Editor |
| --------- | ---------------------------------- |
| boolean | ✅ Checkbox |
| number | ✅ Number input (min / max / step) |
| text | ✅ Text input (with placeholder) |
| select | ✅ Dropdown |
| json | ✅ JSON editor |

---

🧩 API Reference

$3

Wraps your app and controls whether the inspector is active.

`tsx
{children}
`

| Prop | Type | Description |
| ---------- | ----------- | ---------------------------------------- |
| enabled | boolean | Controls whether the inspector is active |
| children | ReactNode | Your application |

---

$3

Renders the floating inspector overlay.

`tsx

`

---

$3

Registers a component instance with the inspector.

`tsx
const inspector = useInspectorComponent("ProfileForm");
`

- Creates a stable component identity
- Must be called once per component
- The label appears in the component list

---

$3

Drop-in replacement for useState that registers state with the inspector.

`tsx
const [value, setValue] = useInspectableState(
inspector,
key,
initialValue,
meta?
);
`

| Parameter | Type | Description |
| -------------- | ----------------------- | ---------------------------------------- |
| inspector | InspectorComponentRef | Returned from useInspectorComponent |
| key | string | State name shown in the UI |
| initialValue | T | Initial state value (same as useState) |
| meta | InspectableMeta | Optional UI hints for the editor |

---

📝 Meta Options

The meta parameter controls how the state is rendered in the inspector UI:

$3

`tsx
{
type: "boolean";
}
`

$3

`tsx
{ type: "number", min: 0, max: 100, step: 5 }
`

$3

`tsx
{ type: "text", placeholder: "Enter name..." }
`

$3

`tsx
{
type: "select",
options: ["small", "medium", "large"],
}

// Or with labels
{
type: "select",
options: [
{ label: "Small", value: "sm" },
{ label: "Medium", value: "md" },
{ label: "Large", value: "lg" },
],
}
`

$3

`tsx
{
type: "json";
}
`

> 💡 Tip: If you don't provide meta, the type is automatically inferred from the initial value.

---

🧪 Examples

$3

`tsx
export function FlagsPanel() {
const inspector = useInspectorComponent("FlagsPanel");

const [isAdmin, setIsAdmin] = useInspectableState(inspector, "isAdmin", false, {
type: "boolean",
});

const [betaUser, setBetaUser] = useInspectableState(inspector, "betaUser", true, {
type: "boolean",
});

return (



);
}
`

$3

`tsx
export function VariantPicker() {
const inspector = useInspectorComponent("VariantPicker");

const [variant, setVariant] = useInspectableState(inspector, "variant", "M", {
type: "select",
options: ["S", "M", "L", "XL"],
});

return (
setVariant(e.target.value)}>
{["S", "M", "L", "XL"].map((v) => (

{v}

))}

);
}
`

$3

`tsx
export function ProfileForm() {
const inspector = useInspectorComponent("ProfileForm");

const [name, setName] = useInspectableState(inspector, "name", "", {
type: "text",
placeholder: "Name",
});

const [email, setEmail] = useInspectableState(inspector, "email", "", {
type: "text",
placeholder: "Email",
});

return (



);
}
`

---

🔒 Production Safety

- ✅ The inspector does nothing when enabled={false}`
- ✅ No side effects, no global patches
- ✅ No state is tracked unless you opt in

> ⚠️ Still, do not ship it enabled in production.

---

🛠️ Use Cases

- 🎨 UI development & tweaking
- 📐 Design system work
- 📚 Component libraries
- 🖼️ Embedded previews
- 🔧 Internal tools
- 🎤 Demos & presentations

---

🧩 Inspired by

- React DevTools
- Redux DevTools
- In-app debug overlays

…but intentionally simpler and runtime-focused.

---

📄 License

MIT

---

⭐ Feedback

This is a V1 devtool built for real-world usage.
Ideas, issues, and PRs are welcome!

---

🔗 Links

- npm