Preview App

Use Preview App to try your UI in the running app and improve it as you go. Open a menu, move through checkout, or check a page on mobile to see how your changes work with the rest of the screen.

When you spot something to change, work from that same preview. Use Design to adjust the UI directly, Annotate to give your agent feedback on a specific element, or Explore with Hexby to preview ideas before choosing what to build. Then try the updated app again.

Open your running app

1. With your project open in Hexby, click Preview App. The app starts automatically if it is not already running.
2. Wait for the page to load.
3. Enter a path in the address bar or use the app’s own navigation to reach the screen you want to check.

Hexby usually finds the command that starts your app. If it asks for one, enter the command you normally use in a terminal from the app folder. Install the project’s dependencies first. If startup reports missing settings or services, follow Troubleshooting.

Use the back, forward, and reload buttons to move through the app. You can also open the current app in your browser from the address bar. Closing Preview App keeps the app running so you can return to it.

Check the layout at different sizes

Choose Desktop, Tablet, or Mobile in the toolbar to check how the current page responds. Drag the preview’s resize handles to try widths between the presets. Use zoom to fit the preview into your workspace; change its width to test the responsive layout.

Check the parts most likely to change at a narrow width, such as navigation, long headings, and forms. Try the interactions at each size too.

Iterate on what you see

Choose a tool in the toolbar based on what you need to do. Design and Annotate use clicks to select elements. Exit the active mode with the × beside it when you want to navigate or interact with the app again.

Design: make a precise visual edit

Click Design, then select an element in the preview or in Layers. For example, select a heading and change its font size in Properties, or select a container to adjust its padding. Double-click text to edit the wording directly.

Hexby writes supported edits back to your project’s code. Changes to a shared component can affect other places that use it, so check those too. See Design Mode for available controls and how to check that an edit was saved.

Annotate: point out what needs changing

Click Annotate, then click the element you want to discuss. Write a note about the change, such as “Keep this button visible on mobile,” and save it. You can attach an image or document for reference.

In the annotations panel, choose Fix with agent on a note to ask your AI Agent to implement it. Use Fix all with agent to work through the open notes. A connected agent is required to make fixes.

Saving a note records feedback. The fix action sends it to the agent with the element and page context so it can make the change.

See Annotate for writing feedback and checking the fix.

Explore: compare ideas before choosing

Click Explore with Hexby when you want to see options. Describe what you want to compare, such as “Show two layouts for this checkout” or “Preview a clearer mobile navigation.” Select Start exploring to send the request. A connected AI Agent is required.

Hexby opens an exploration preview where you can compare and refine the ideas. Exploring leaves your project source unchanged. When you have a direction, use the preview’s apply action to ask the agent to implement it. The action’s label depends on the exploration. See Explore with Hexby for the full workflow.

If the app will not start

Open preview settings to check the start command, restart the app, or select View logs. Read the first startup error before changing anything.

Check that dependencies are installed, the command works from the app folder, the port is available, and required environment values are present. For more help, see Troubleshooting.

Review the change

After editing, return to the same route and screen size to check the result. Use Visual Review to compare the updated app with the original.