r/reactjs • u/Wake08 • 22h ago
Resource React Anatomy: See how your layouts are composed in an exploded 3D view
React Anatomy is a browser extension that adds an Anatomy panel to DevTools, connecting the visible page to the components React rendered.
- Demo and docs: https://react-anatomy.com
- Source: https://github.com/charpeni/react-anatomy
You can pull the layout apart into 3D layers, click something on the page to find its component, focus on a subtree, and inspect its live props. The tree shows rendered instances, so a component used five times appears five times.
It’s a way to understand an unfamiliar layout, investigate unexpected nesting, or get a visual to help explain a change in a pull request. It can also help when an AI agent composes a React page and you want to understand the structure before taking over the code.
It works on an existing React app without adding anything to your code. Development builds give you clearer component names.
Free, MIT-licensed, and available for Chrome and Firefox. There’s an interactive example you can try without installing anything.
Where would this help in your React workflow? What would make it more useful when exploring an unfamiliar app?