Single Component View

Open Single Component View from a selected component, search result, or workspace view. It keeps the preview, context, and available actions together.

Select a rendered component to open its focused actions.

Use the component actions to keep exploration and implementation connected.

Start with the preview

Use the preview to understand the component before you read its source. You can:

• Resize it to check responsive behavior
• Change the background when contrast is hard to judge
• Focus the component on the canvas
• Open an available state or scenario

The preview shows the current example data. It is a useful guide, not a replacement for checking the full app before you share a change.

Check the states that matter

Try the states relevant to your question: empty, loading, error, open, closed, selected, disabled, or focused. Check short and long content at narrow and wide sizes too.

The available states depend on what Hexby can identify. Preview values help you inspect the UI; they do not change your production data or component API.

See usage and related pieces

The usage area shows the pages and parent components that use the component. Check it before changing a shared component.

Open the usage graph for direct parents, Pages for one screen, or Component Map for the wider project. Related components and dependencies can help you reuse an existing pattern.

Ask for help or open the source

Ask your connected assistant about the selected component when you are ready to explore or change it. To read the implementation, choose View code and open Code View.

If the preview is blocked

Read the message beside the preview, then click the Fix with agent button. Keep the investigation in chat. If the component needs safe example data, check AI enrichment. If the issue depends on a route or provider, use Preview App.

Next step

When you know what should change, follow Make and Review Changes.