Change your app
Preview
The app running beside the chat: the bar above it, editing a word in place, the theme, moving between pages and sections, and seeing it at phone, tablet or desktop size.
The preview is your app, running, at the right of the chat. Everything in it works as it will once published: the buttons, the forms, the pages.
The bar above it
From left to right:
| What it does | |
|---|---|
| Preview, the code icon, the stack icon | The app, its code, and Manage. |
| Edit | Click a word in the preview and rewrite it, or an element to change how it looks. The (i) beside it says how. See below. |
| Theme | The colours and fonts of the whole app, in one place. |
| The box in the middle | The page or section you are looking at. Open it to go to any other. The arrow at its left reloads the preview. |
| The square with an arrow | Opens the published app, once it is published. |
| The arrows back and forth | Undo and redo. They appear after the first change, and each click is one step, as far back as this session goes. |
| The size menu | No frame, Desktop, Tablet or Mobile. See below. |
| The four corners | Fullscreen, and back. |
| × | Closes the preview, so the chat has the whole width. |
On a phone
A phone has room for one pane at a time. Two buttons at the bottom, Chat and Preview, move between the conversation and your app. The × that closes the preview is only on a larger screen, and Split view (see Code) is on a computer only.
At every size
The size menu shows the app as it will look on each screen.
- No frame fills the panel, as in the picture above.
- Desktop puts it in a browser window, with its published address on top.
- Tablet and Mobile put it in a tablet or a phone, at their real width.
Every app is built for all three, and measured at phone width after every build and every change. Looking at it here is still the quickest way to see what a visitor on a phone will see.
Edit in place
With Edit on, the button says Editing, and the preview stops being a page to use and becomes a page to change. Point at a text and Edit text appears over it: click and type. Click any element and it is outlined, with a bar of tools at the foot of the preview.
| Tool | What it does |
|---|---|
| Edit Element | Describe a change for this one element in a sentence, and AI rewrites it. |
| Text | Rewrite the text. |
| Background, Text color, Text style | Its colours, and the size, weight, alignment and look of its text. |
| Opacity, Spacing | How see-through it is, and the room around and inside it. |
| Image, Video | Change or remove the picture or the video it holds. On a picture, Adjust size & fit sets how it fills its place. |
| The code icon | Edit code: this element's own code, in a panel, to change by hand. |
| Duplicate, Delete | A copy of it right after it, or gone. |
| Cancel, Save | Throw the changes away, or write them into the code. |
The arrow at the end folds the bar away, and × lets go of the element. Double-click a button to go to the page it opens.
Changes made with the tools cost no credits. Edit Element is written by AI, so it uses a few, like a chat reply. For anything bigger than one element, a new section, a form, a page, ask in the chat.
Theme
Theme gathers the colours and fonts the whole app uses, on a panel at the right. Change one and every place that uses it follows, on every page.
- Colors lists each colour, what it is for, and how many times the app uses it. Click a swatch to pick another.
- Fonts lists each font, with how many times it is used. Pick another from the list.
The preview shows each change as you make it. Save & Apply writes them into the code, and Cancel puts everything back. A theme costs no credits, and the version before it is kept in History.
Undo and the History
Undo and redo step through the changes of this session, one per click. For anything older, every change is kept in History, at the top of the editor, named by what it did, and you can go back to any version. Going back is kept as a version too, so you can come forward again.
Was this page helpful?