@muten/devtools

In-app DevTools for muten — a dev-only overlay that reads the globals the muten runtime exposes in dev. Zero production cost: it's only injected by muten dev, never in a muten bundle/build.

What it gives you

• Tree — the component tree with muten names (Stack, Title, part badges), source refs (file:line), an element picker (click anywhere in the app to select it), search/filter, and per-node props, reacts-to (which state drives it), live rendered values, and open-in-editor.
• State — every state grouped by scope (page + each store), editable inline (set a value, watch the app react). Plus a Redux-style History: a two-pane commit log with granular diffs, real action names, and a time-travel slider.
• Perf — a React-Profiler-style view: ms-to-react (DOM and state, so typing registers too), record a session, slowest commits, and the fine-grained "nodes touched" proof.
• Highlight — flash what changes in the app, live (header toggle).

Install

Three ways — pick one; all end up with @muten/devtools installed and plugins { devtools {} } in muten.config.

1. With the muten CLI (recommended — does everything)

muten add devtools

Installs the package and enables it in muten.config for you (like ng add). Then restart muten dev.

2. With npm (manual)

npm i -D @muten/devtools

then enable it yourself in muten.config:

plugins {
  devtools {}
}

3. When scaffolding a new app

npm create muten@latest my-app        # answer "Add DevTools?" → Yes
npm create muten@latest my-app -- --devtools   # or pass the flag

Either way: muten dev auto-mounts the overlay (bottom-right; open it with the launcher or Ctrl+Shift+D). muten bundle/build ignore it entirely, so production ships nothing — zero cost.