Bippy: React DevTools for grown-ups 😈
Bippy provides direct access to React’s fiber tree and render events for building your own tools.
Bippy is a toolkit that impersonates React DevTools and intercepts render events through __REACT_DEVTOOLS_GLOBAL_HOOK__, letting you work with fibers directly.
Simply put, it is a way to “get inside React” without forking React or adding hacks to your application code.
What it can do:
- 🧠 access the fiber tree (component props, state, and context)
- 🎣 hook into render events (
onCommitFiberRootand others) - 🌳 traverse the fiber tree with convenient utilities (
traverseFiber,traverseRenderedFibers)
🔥 The most interesting part
You can intercept every React commit and walk the fiber tree to get a complete snapshot of your application: which components exist, what their props/state are, and what actually re-rendered. This is a level below any devtools, essentially your own React runtime inspector.
When you need it
🛠 If you build tools For example, react-scan itself is built on top of Bippy. If you want to write your own devtools, render analyzers, or runtime inspection tools, this is the foundation.
🔬 Research and complex cases When you need to understand how React actually works under the hood, or extract data that is not accessible through the usual means.
⚠️ But there is a catch
This is a direct hack into React internals, which can change at any time. The authors themselves warn that it can break applications and is not suitable for production.
If you are not sure why you need this, you probably don’t. 😄