Skip to main content

Preview your app

About 3 min

Before you publish, you can see your app running live in your browser. The preview lets you click through your app and check how it looks and behaves, so you can keep refining it until it is ready to share.

A TatbiQ project showing the live preview of a generated app next to the chat panel
The live preview shows your running app so you can click through it before publishing.

Open the preview​

Once TatbiQ finishes generating your app, your project opens with a live preview. When the preview is ready, TatbiQ shows it automatically.

In your project, you can switch between two views:

  • Preview shows your running app.
  • Code shows the generated source code.

Use the toggle in the project header to switch between Preview and Code.

Preview while building

While your app is still being generated, you may see a Building app preview... message. The preview becomes available once your app is ready.

Try different screen sizes​

Your app should look good on any device. In the preview toolbar, use the device options to see how your app appears on:

  • Desktop
  • Tablet
  • Mobile
The TatbiQ preview toolbar with mobile view selected and the device size menu open
Switch between desktop, tablet, and mobile previews to check how your app looks on each screen size.

Refresh and open in a new tab​

The preview toolbar also lets you:

  • Open in New Tab to view your app in a full browser tab.
  • Force Refresh to reload the preview and clear its cache if something looks out of date.

Keep refining​

The preview is the best place to spot changes you want to make. When you see something to adjust, describe the change in the chat and TatbiQ updates your app.

Editing with AI chatDescribe a change in chat and watch the preview update.Publish your appHappy with the result? Take your app live.