Browser Preview

Browser Preview renders a module in its full application context, including the application's styles, header and footer modules, and other environment settings. The result is exactly what end-users see. In unversioned applications, an annotation toolbar lets Creators mark up the live view and send feedback to the UnqorkAI Build Agent. In versioned applications, the tab bar displays version and branch controls instead.

Requirements

Browser Preview requires the environment's Frame Ancestors List to include the Unqork platform origin. An environment administrator configures the Frame Ancestors List in Environment Administration under CSP Settings. If the list is not configured, opening Browser Preview displays a blocked notice in the canvas immediately instead of the live preview. The notice displays the exact origin value to add. Copy it from the notice and share it with the administrator, who then adds it to the Frame Ancestors List in Environment Administration.

Opening Browser Preview

Browser Preview is accessible from the Module Builder toolbar. Unlike UI View, which renders the module canvas in isolation, Browser Preview opens the module in the full application. The application's styles, header and footer modules, and other settings are all active. These are the same conditions end-users encounter in production.

Unversioned Applications

In an unversioned application, Browser Preview opens the module in the full application context with no version or branch controls in the tab bar. The module is editable, and an annotation toolbar displays at the top of the preview canvas.

Annotation Toolbar

The annotation toolbar includes the following tools:

• Pencil: Draw freehand annotations on the rendered canvas.

• Rectangle: Draw a bounding box around a specific element or region.

• Undo: Remove the last annotation.

• Color picker: Set the annotation color. Available colors include red, black, grey, white, and purple.

• Send to Agent: Send the current annotations to the UnqorkAI Build Agent.

Sending Annotations to the Build Agent

After annotating an element, select Send to Agent. The Build Agent receives the annotation as visual context and opens the agent chat, ready for instructions. Describe the change in plain language, for example: "Change this label to First Name." The Agent reads the module configuration and applies the update. Refresh Browser Preview to see the change reflected in the rendered canvas.

Versioned Applications

Application Versioning is enabled at the application level. In Browser Preview, a versioned application renders its entry point module. If the entry point has no components yet, a placeholder message displays until content is added.

Navigating to a Module

Clicking a module in Browser Preview opens it in the Module Builder with the branch context applied. The active branch name displays as a pill in the top-right of the tab bar. The module is editable on a branch with no read-only restriction.

Published Versions

A module on a published version is read-only. The canvas displays a message prompting Creators to switch to a branch. Select Create Branch in the module header to create a working branch. Changes on a branch do not affect the published version until the branch is promoted.