Preview and visually edit your app

The Build tab shows the latest working preview. Use it to test a journey at common widths, then select the exact element when a small visual change is needed.

Check different screen sizes

The preview toolbar offers Desktop view, Tablet view, and Mobile view. Desktop uses the available editor width; tablet is 768 pixels wide and mobile is 390 pixels wide.

After a layout change, repeat the affected action at desktop and mobile widths. Watch for clipped navigation, horizontal scrolling, wrapped labels, covered content, and actions that move off screen. Use tablet when the layout changes between the two.

Choose Fullscreen preview when editor space makes the result hard to judge. Choose Open in new tab from the editor top bar to test without the Chat column. These are previews, not a production publish.

Select or edit text

Choose Select element, then click the smallest element that represents the change. The selection opens visual controls beside the element. Depending on the selection, you can adjust its background or text color, font, size, opacity, margins, padding, or text; jump to its source; describe an element change; or delete it.

For a direct text change, choose Edit text and edit the visible text. Choose Apply when the new text is ready. Use Clear selection or turn off the active tool to return to normal preview interaction.

Keep a shared element in mind. A selected card, button, or heading may come from code reused on other screens. If a direct change is broader than intended, undo it and ask for a focused Build change instead.

Use the supported edit path

Use a direct control when the value you want is visible and the editor accepts it. For a structural or behavioral change, select the element, choose Edit element, and describe the intended result:

Make this summary easier to scan on mobile. Keep the wording, page order, and submit action unchanged.

If Ahamo needs a full build to perform the request, wait for that round to finish before testing it. Do not submit the same change twice while Updating… or a build is active.

Verify the visible result

After the update:

1. Refresh the preview if the old version is still visible.
2. Repeat the action around the changed element.
3. Switch to desktop and mobile views.
4. Visit another screen that uses the same component.
5. Confirm that text, focus, and the primary action remain usable.

If a selection no longer matches after refresh, clear it and select the element again. If the update completed but the result is wrong, describe the screen, width, action, expected result, and visible result in Plan mode before changing it again.