Devtools that know your framework — including time travel

While the app runs you want to see: what’s mounted and its state, what’s in your stores and who owns them, what route you’re on, and — when it breaks — a timeline you can scrub back to before it broke.

In React, that’s three separate tools that don’t know about each other, and the time-travel one only works if you happen to be on Redux.

---

React — the tools you stitch together

• React DevTools — the fiber tree, props, and hook state. Generic: it shows useState slots and anonymous values, not your concepts (a store, a resource’s status, who owns what). No time travel.
• Redux DevTools — action log + time-travel scrubbing… but only for Redux. Not on Redux? No time travel. Your useState/useReducer/Zustand/Context state is invisible to it.
• console.log — for everything the two tools don’t model: “why did this refetch,” “which store changed,” “what was the route before navigation.”

Three panels, none framework-aware, and time travel gated on a state-library choice you may not have made.

Reactra — one panel, four answers

// in your root layout — dev-only, one line:
import { ReactraDevtools } from "@reactra/devtools"

{import.meta.env.DEV && <ReactraDevtools defaultOpen />}

That mounts an in-page drawer with four tabs:

1. Components — every mounted Reactra component with its state/derived/props and its actions (invoke them from the panel), grouped by concept — not raw hook slots.
2. Stores — live store contents, who owns each, per-field values.
3. Router — the current route, params, query, and a navigation log.
4. Time Travel — a single timeline of everything that happened; scrub it and the live app moves back to that state — components, stores, and the URL.

---

What disappeared

• Three disconnected tools → one drawer that speaks Reactra (stores, resources, routes)
• Time travel only on Redux → time travel on your state, whatever shape it is
• Anonymous hook slots → named state/derived/action, grouped by meaning
• console.log archaeology → the action/state/route timeline is already there

Same questions you ask while debugging. One place that knows the answers.

---

It’s not a new runtime — and it’s never in production

@reactra/devtools is a UI companion: hand-mounted React you gate behind import.meta.env.DEV. It is never imported by compiler-emitted code and ships zero new compiler emission — it reads data sources that already exist (the test hook, the store registry, the router). Time travel reuses the same re-drive engine as uses replayable: the passive timeline replays state into your live components.

You write the app. The panel already understands it — because it’s the same framework, not a generic inspector guessing at your hooks.