Visual Edit lets you change your prototype by hand, right in the preview: click anything to change it, double-click text to type over it. It's the quickest way to fix wording, colours, spacing and images, and it uses no credits.
Start editing
Click Edit in the top bar ("Edit by hand: text, colours, spacing, images. No credits.").
The Visual edit bar appears with the hint "Click anything to change it · double-click text to type". Edit is only available on the current version once it has finished building. If you're looking at an older version, switch back to the current one first.
Change text
Double-click any text in the preview and type over it. You can also select an element and edit its words in the Text section of the panel.
Change type and colour
Select some text and use the Type section:
- Size (px): 6 to 200.
- Weight: Light, Regular, Medium, Semibold, Bold, Extra bold or Black.
- Alignment: left, centre or right.
- Text colour: pick a colour, type a hex code, or click one of the swatches from the page's own palette, so your change matches the rest of the design.
Change backgrounds, corners and spacing
- Fill: a background colour, or None.
- Corners (px): 0 to 999.
- Opacity (%): 0 to 100, in steps of 5.
- Spacing (px): Padding ↕ and Padding ↔ (0 to 400), and Space above and Space below (−200 to 400).
Replace an image
Select an image and use the Image section:
- Replace opens Your image library, so you can pick a different image.
- Upload adds a new image from your computer (when AI images are turned on).
- Description (alt text): what the image shows, for screen readers (up to 300 characters).
See Images for more on your image library.
Duplicate, delete and select
- Duplicate copies the selected element.
- Delete removes it (or press Delete).
- Select parent selects the element around the current one, which helps when you've clicked something small inside a card.
- Deselect clears the selection (or press Esc).
Whole screens can't be added or removed here. To remove or add screens, ask in the chat.
To edit another screen, use the screens strip under the preview to move between them while you're editing.
Undo, save or discard
The bar counts your changes as you go.
- Undo (⌘/Ctrl + Z) steps back one change.
- Save as v{next} saves all your changes as a new version.
- Discard throws away unsaved changes and leaves Visual Edit. When there are no changes, the button says Done.
If you try to leave with unsaved changes, Phluffle asks before discarding them.
What saving does
Saving makes a new version, just like a prompt does, so you can always go back. In the chat it's tagged Edited by hand: "Made by hand, so no credits were used." Your next prompt builds on it. See Versions, restore and retry.
When to use the chat instead
Visual Edit is for changing what's already there. For new screens, new features, new behaviour or a full restyle, describe it in the chat. For a focused AI change to one part, use Scope.