What is App Viewer?
When AI Agents complete a task, the App Viewer appears at the top of the page. It lets you preview your live app and make visual edits directly — no coding required.
Before you start
Agent processing may take a moment — please wait patiently.
Check the Terminal panel on the right for detailed progress.
Click the Refresh icon anytime to reload the preview.
How to use App Viewer
Step 1: Wait for the preview to load
After Agents finish, the App Viewer loads your preview.
⏱️ Usually takes a few seconds to a minute.
If it takes longer than 2 minutes:
Click Refresh. If still stuck, check the Terminal panel for errors (see Step 3 below).
Step 2: Preview your app
Once loaded, you can see your live app in the preview window.
Desktop / Tablet / Mobile — Switch views to test responsiveness.
Open in new tab — Click the arrow icon to open preview in a separate tab (useful if embedded preview is stuck).
Step 3: Check for errors (if something looks wrong)
If your app doesn't load or looks broken, check the Console panel for errors.
If you see red error messages: Issue Report
Click "Resolve" — the AI will fix them automatically.
The preview will reload once fixed.
No "Resolve" button? Use "..." → "Feedback" next to the Agent's latest message to report the issue to our support team.
Step 4: Modify your app
Method 1: Click to edit (recommended for visual changes)
Click any element → a visual editor appears on the left → adjust colors, spacing, text, or layout directly.
Method 2: Describe in chat
Tell the AI Agent what to change (e.g., "Make the header darker").
Quick reference
FAQ
Why can't I remove the Atoms badge from my published page?
Badge removal requires Pro or higher. Upgrade anytime from Settings → Plans & Billing.