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 UnqorkAI 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

Selecting Send to Agent sends the annotations to the Build Agent as visual context and opens the agent chat. Creators describe the change in plain language, for example: "Change this label to First Name." The Agent reads the module configuration and applies the update. Refreshing Browser Preview displays the change 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 on the checkout pill selection, not the application's default version. Switching branches or versions in a Module Builder tab reloads Browser Preview on the new selection. Opening a historic commit from Branch History renders that commit in Browser Preview until the selection returns to a branch or version. If the entry point has no components yet, a placeholder message displays.

Navigating to a Module

Clicking a module in Browser Preview opens it in the Module Builder with the branch context applied. The checkout pill in the tab bar displays the active branch name. 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.