Mirror (Real-Time Preview)

Mirror is a browser-based environment that simulates supported clients. It reads the current editor configuration directly and does not require compilation or packaging, making it useful for checking pages, data, and interactions before publishing.

Mirror is not the pre-release build created during publishing. Features that depend on a physical device, a client-specific capability, or the final compiled output must still be verified with a pre-release build.

Open Mirror

You can start from the project home page or a specific page:

1. Click Mirror in the upper-right corner of the editor to start from the home page.
2. To start from another page, select it on the canvas and click Mirror in the page toolbar.
3. In the bottom toolbar, select the client environment and device size, or enter a custom resolution.

Set initialization data

Use Initialize config to provide the data required when the page starts. Available settings depend on the selected page and may include:

• Page inputs
• Path parameters
• Query parameters
• Client variables
• Mock data

After changing the initialization settings, reload Mirror to initialize the page with the new values.

Simulate a user

Click Simulate login, then select or create a test user. Switching users lets you verify the page with different authentication states, user data, and role permissions.

When simulating users, check that:

• The page reads the expected current user data
• Data sources respect the user’s permissions
• Each role sees the correct content
• Actions and Actionflows use the correct user context

Debug a page

Click the wrench icon to enter Debug Mode, then select a component to inspect its current data state. Use this together with initialization settings and simulated users to verify:

• Data-binding results
• Page parameters and client variables
• Conditional visibility
• Component state before and after an interaction

If you change a parameter, variable, or test user, reload Mirror before checking the result again.

Pre-publish checklist

Before publishing, use Mirror to verify that:

1. Pages render correctly in the target client environment and device size.
2. Page inputs, path parameters, and query parameters are passed correctly.
3. Data and permissions behave as expected for signed-in, signed-out, and role-specific users.
4. Data sources, frontend actions, and Actionflows run correctly.
5. Success, failure, and empty-data branches produce the expected result.

Mirror and pre-release builds

If Mirror differs from the target client, first compare the initialization data, simulated user, and selected client environment. For device capabilities or client-specific behavior, use the pre-release build as the source of truth.