What Visual Edit does
Visual Edit lets you change your app by clicking on it, like editing a document. Your changes are written into the app's real code, so they stay, and a developer sees them too. No AI is needed for these edits, so they cost no credits.
Turn it on
In the Preview tab, press Visual Edit. The preview signs in with the demo account for you, so you can edit the pages behind sign-in too. A hint at the bottom reminds you: click to select, double-click text to edit, Esc to deselect.
Two modes switch at the top of the preview:
- Edit: click anything on the page to select it.
- Browse: use the app normally (links, menus, sign-in) to reach any page, then switch back to Edit.
When you turn Visual Edit off, the project is back to how it was, apart from the changes you saved.
Change what you selected
When you click an element, the inspector shows what it is and what you can change:
- Words: edit them right in the preview (or double-click them). Text made of several pieces is shown piece by piece; click a piece to edit it on its own.
- Pictures: swap the image (a file in your app or a link) and describe it for people who can't see it.
- Links: change where a button or link goes.
- Typography: font, size and weight.
- Spacing: the space inside and around it.
- Layout: how its contents line up.
- Appearance: colours, corners, borders, a solid colour instead of a gradient.
Parent selects the element that contains this one, which is how you pick a whole section. Press Esc to deselect.
Save your changes
Your edits show straight away. A small pill counts them; press it to write the changes into your app's files. It then says Saved to code.
Changes that need more than a direct edit (new behaviour, a new section) go to Piye: choose Ask AI about this element, or send it to Piye from the inspector, and describe what you want.
Remove something
Select it and choose remove: Piye takes it out of the page, along with anything that only existed for it, and keeps everything else as it is. To remove a whole section, press Parent first. Undo stays available afterwards in History.
If Piye can't take an element out of the code directly (for example, it's drawn by code elsewhere), it says so, and you can ask Piye in the chat instead.
Your admin panel
Apps with an admin panel let you tailor it with Visual Edit too. Select a part of the admin and choose, for example, to hide the "Add" button, hide the "Delete" button, or make it read-only. Hidden actions are switched off in the app itself, not just hidden from view.