How to enable and use Visual Edit in Coderick AI
Describing a visual change in words is sometimes harder than it sounds. Telling an AI to change the text of your heading to something else or shift that heading slightly to the left can turn a two-second fix into a five-minute back-and-forth. Some things are just faster to do by hand.
That’s exactly what Visual Edit is for. Instead of prompting your way through small tweaks, you can now click directly into your project’s preview and make changes on the spot.
Here’s how to use it.
How to enable Visual Edit
Inside your Coderick project, click the Visual Edit button in the top bar.
Once enabled, the elements in your preview become selectable and editable. The Visual Edit button will be replaced by two new buttons: Save and Exit.
How to edit directly in the preview screen
With Visual Edit on, click any element in the preview to select it. A toolbar will appear with editing options relevant to that element type.
Manual edits
Text
Click any text element to edit it inline. From the toolbar, you can:
- Edit the text directly
- Change font type, size, and style (bold, italic, underline)
- Adjust alignment
- Add a link or emoji
- Change the text color
Buttons
Buttons that can be edited visually have these general options:
- Edit the button text inline
- Change the text and background color
- Add or update a link
Images
Click an image to:
- Replace it and upload an image from your device
- Generate an image with AI
- Add or update a link
- Add alt text
Saving your changes
Manual edits are held in a buffer until you’re ready to apply them. When you’re happy with your changes, click Save to confirm them.
If you’d rather start over, click Exit to discard everything and leave Visual Edit mode.
If you try to submit a chat message or exit with unsaved changes, Coderick will prompt you to either save or discard before continuing — so nothing gets lost by accident.
How to edit with AI
For elements that are too complex for manual edits — like navigation menus, footers, or login buttons — you’ll see an Edit with AI option in the toolbar instead. These elements have more going on under the hood, so the AI handles changes to keep everything intact.
You can also choose Edit with AI for any standard element if you’d rather describe the change than make it manually.
When you click Edit with AI on a selected element:
- That element is highlighted in the chat panel on the left
- Coderick AI focuses its changes on that specific element only
- You describe what you want in the chat and submit
