Lovable’s Visual Edits allows you to select elements on the page and either edit them instantly, such as updating text or colors, or use prompts to adjust functionality and layout. This tool is useful for making quick, targeted updates without needing to modify the code manually or use the AI.
Using Visual Edits does not deduct credits.
Visual edits

​
When to Use Visual Edits

Use Visual Edits when you want to:
  • Change static text content on your site
  • Update fonts, font sizes, or styles
  • Modify colors of text, buttons or other elements
  • Select a specific element and use prompting to modify its visual appearance or functionality. Please note that this prompt will deduct credits as an ordinary prompt.
Keyboard shortcut:
  • Option ⌥ + s on Mac
  • Alt + s on Windows

​
How to Access and Use Visual Edits

1

Locate Visual Edits

You’ll find it inside the chat box at the bottom left corner of your project interface.
2

Click the Edit button to activate Visual Edits

3

Select the Element

Hover over the element you want to change; headlines, buttons, background sections, etc. Then click to select it.
4

Edit via Prompt or Direct Input

After selecting, you can:
  • Type a prompt like “Make this heading bold and change the color to dark green.”
  • Or use the inline editing options to directly change text or select new fonts and colors.
5

Apply and Review

Once your change is made, click Save and Lovable will instantly update the live preview and code.
Only static elements can be edited using the Visual Edits tool. If an element isn’t selectable, it is most likely due to it being a dynamic element, which the Visual Edits can’t select and change.