Inspect a component

For AI agents: this page is Markdown at https://squiggle.sh/docs/inspector.md. Every docs page is listed at https://squiggle.sh/llms.txt, and all of them are one file at https://squiggle.sh/llms-full.txt.

Point at anything in your app to find the component behind it. The Inspector shows its props, hooks, state, style and renders, lets you change them while the app runs, and opens the line that renders it in your editor.

Loading the live Studio…

The live component tree. Live, in your browser.Open in Studio

Point at the screen

Press ⌘ ⇧ C, or Inspect component in the device panel (it reads Inspecting while it is on), and move over the device. The component under the pointer is outlined, and a label names it, its size and its line. Click to select it.

Key	In pick mode
Scroll	Walk out to the parent component and back in.
`⌘` + click	Open the line that renders it in your editor.
`↓` `↑`	With a selection: go to the parent, or back to the child. The side arrows go to siblings.
`Esc`	Close the list, clear the selection, then leave pick mode.

Where components are stacked, clicking also lists everything under that point, including ones hidden behind others. Nothing reaches the app while pick mode is on. On other screens, a selection offers Open in Inspector.

Inspect a componentStudio tour · 3 steps

Find it in the tree

The component tree runs down the Inspector’s left side. It shows your own components by default; components from libraries fold into a +N chip, and All shows everything. Search by name, testID, label, text or file. Hover a row to outline its component on the device without selecting it. A row flashes when its component re-renders and shows how many times it has, coloured from green to red. A dot on a closed row means something inside it re-rendered. Re-rendered only narrows the tree to the components that re-rendered, with the path to each, and reads Showing re-rendered only while it is on; see Find what re-renders. Hide the tree with ⌘ ⇧ E.

With Follow in app on, selecting a component in the tree takes the app to it: Squiggle opens its screen and scrolls it into view.

The component treeStudio tour · 7 steps

See what it holds

Details shows the selected component as React DevTools would, and updates as it renders: props, hooks and state by the names in your code, the contexts it reads and who provides them, its style and box model, how often it rendered and whether React Compiler memoized it, and its accessibility and tap-target size. Copy gives you its selector for a flow, its file and line, or a prompt for your agent.

Above the details, a breadcrumb names the components that render it, outermost first. Click one to select it; … shows the rest of a long chain.

Component detailsStudio tour · 3 steps

Change it while the app runs

Toggle a boolean or double-click a value to edit a prop or a hook’s state. The app re-renders with the new value at once. An edited row shows a dot and a reset button. Edits last until the component remounts or the app reloads, and never change your code.

Open your editor

In Details, Open call site opens the line that writes this element, and Open definition opens the file where its component is defined. Hover a row in the tree for the same two buttons. A button is greyed out when that place isn’t in your code, or in a Release build.

By default, Squiggle asks Metro to open the file, as React Native’s error screen does, so it works with no setup. Choose Cursor, VS Code, Windsurf or Zed in the Open in menu to open it there directly, at the exact column. File and line need the Babel plugin (see Set up your app).