How to use the Visual Builder

What you'll do

The Visual Builder is where you make your app truly yours. You'll point and click to move and edit things, see your changes live, and check how it looks on a phone and a desktop, all without touching any code.

Step 1 — Open the Visual Builder

Open your app from My apps and choose the Visual Builder. Your app appears in a live preview, with editing tools around it.

This is the same app your AI team built from your Blueprint, ready for you to refine.

Step 2 — Point and click to edit

Click any part of your app, such as a heading, a button, or an image. Once it's selected, you can move it, change its text, swap its colours, or adjust the layout.

Every change shows up right away in the preview, so you always see exactly what you'll get.

Step 3 — Or just ask the AI to change it

Prefer to describe what you want? Open the AI Chat and type a plain request like "make the header bigger" or "add a contact section at the bottom."

The AI updates your app for you, no code required. This is handy for bigger changes that would take many clicks to do by hand.

Step 4 — Preview on phone and desktop

Switch between device views to check how your app looks on desktop, tablet, and phone. Most visitors arrive on a phone, so it's worth a look.

If something feels cramped on a small screen, select it and adjust, or ask the AI to tidy it up.

Tips

• Asking questions in the chat is included on every plan, up to a monthly allowance. Credit Tokens are spent when the team builds or changes something for you, and the price is always shown first.
• Make one change at a time and glance at the preview, so it's easy to see what each edit did.
• Mixing both styles works well: click for quick tweaks, ask the AI for anything larger or fiddly.
• Nothing is permanent here. You're refining safely, and you can keep polishing before you ever publish.

What's next

Get more out of the chat assistant with Edit your app by chatting with AI.