Component Map
Component Map
See how pages, layouts, and components connect across the project.
Use Component Map for a project-wide view of how your UI is connected. It helps you see what a change may affect before you make it.
Move from project relationships to a zoomed-out component inventory.
Read the map
Each node is a page, layout, or component. A line means the first item uses the second one.
The map shows relationships found in the source. It does not show every runtime state or route, so use it as a guide—not proof that every screen will change.
Move around
Use the canvas controls to zoom, pan, fit the map, or focus on a selected node. The minimap helps you move around a large project. Zoom in to read names and previews.
Select a node
Select a node to open actions for:
- Single Component View for its preview and states
- Code View for its source
- Usage for its direct parents
- An alternative or assisted change, when available
If a preview is blocked, click Fix with agent and continue in chat.
Check change impact
Before changing a shared component:
- Find it on the map.
- Check the pages and parents connected to it.
- Open the relevant page or component to confirm the context.
- Review the previews and changed files after the edit.
Map or Pages?
Use Pages to understand one screen. Use Component Map to understand the wider project. Use All Components to find a component by name.
If the map is empty
Check that analysis is complete and that filters are not hiding every item. If the project is not loading, see Troubleshooting.
Next step
Open Single Component View for a focused preview and usage view.