Crash Course 101
10 modules
5 weeks

Realtime Preview

Click to copy

Take full control of your application without running publication.


Real-time preview allows users to see how their app looks and functions before deploying it to the live environment.

By choosing a deployment plan or using mock data, users can obtain a more accurate representation of how their app will appear and performance in the live environment.

🔔 The preview doesn't push your changes to the actual application. To send changes to the deployed app, click the "Push" button in the AppMaster Web Designer and run the project deployment in AppMaster Studio the way you generally do.

Realtime preview of web application in AppMaster Web Designer

Run preview

The web app preview opens in a new browser tab, allowing users to observe their app's appearance and functionality in realtime as they make changes. To run the preview, click on the Eye Button in the top-right corner.

Before running the preview, you need to select the data to display in the interface:

  • Mock data
  • Data of target deployment plan

Mock Data

To run a preview with mock data, click the Preview button on the right top and select Mock Preview in the opened dropdown.

Using mock data allows users to create a simulated app version, complete with dummy data added while UI design. This is useful for testing UI, as it will enable users to identify any issues with the displayed data in the app before deploying it to the live environment.

Data of deployment Plan

To run the preview with deployment data, click the Preview button on the right top and select the target deploy plan in the opened dropdown.

When using the real-time preview feature, you can select a deployment plan. It lets users preview their app with the actual data employed in the live environment. This especially benefits apps that depend on external data sources like APIs or databases.

Was this article helpful?
Still looking for an answer?
Join the Community