How to Use Visual Edits in Lovable

Lovable’s current preview toolbar replaces the previous Visual edits experience. Use Select elements to target a part of the app, Edit text inline to change text or Draw annotation to show a visual adjustment, then send the change. Targeting an element gives context; it does not remove the need to verify the result.

What you will learn and need

You will learn how to choose the right preview action and make a focused change. You need an editable Lovable project and a rendered preview. Join Lovable if you are starting. Interface wording can evolve: the official preview-toolbar guide is the source for current controls.

1. Open the preview toolbar

Look for the toolbar within the app preview. If hidden, restore it using Show preview toolbar above the preview. Open the actual page and state you want to change before selecting anything; an account screen or modal may need to be opened first.

2. Select an element for a scoped request

Use Select elements, target the relevant heading, image or section and describe the result you want. Name what should stay unchanged. A selected element helps Lovable locate the issue, but a vague request such as “fix this” still leaves the desired result unclear.

Change this selected page heading to my approved wording. Preserve its heading level, the surrounding layout and all links and form behaviour. Check that the full heading fits on mobile without cropping.

3. Use inline text editing for a text change

Choose Edit text inline, change the text and click Send. Review the resulting change in the preview. For text drawn from stored content or an external service, inspect where it comes from: a visual change is not automatically an update to the original data source.

4. Annotate a visual issue

Use Draw annotation to point out alignment, space or an element’s position, and send a concise prompt alongside it. Explain the intended relationship rather than asking for an arbitrary number of pixels.

Use this annotation to align the selected content with the existing page grid. Keep the current typography and colours. Make the spacing consistent on desktop and mobile; do not redesign unrelated sections.

5. Review usage and verify the change

Selecting elements and sending annotated changes count as standard build usage. Inline text edits have a free allowance and consume credits beyond the applicable limits. Do not assume all visual changes are free; review Lovable’s current usage guidance because allowances can change. Comments are different from sending a thread to Lovable for implementation.

How to verify it worked

Reload the preview and revisit the affected page. Check the target and nearby elements at desktop and mobile sizes. If content is data-driven, verify the correct stored record or service still supplies it. Test the relevant link or form after a layout change.

Common errors

• Toolbar missing: use Show preview toolbar and confirm you are viewing the app preview.
• Wrong element changed: select the element again and specify the exact scope.
• Text returns after reload: investigate its source rather than assuming it is static.
• Unexpected credit usage: selection and annotation changes are build requests; inline allowances are limited.

Frequently asked questions

Is the old Visual edits interface still the reference?

The current official guide describes the replacement preview toolbar.

Can I replace an image this way?

The toolbar supports selecting an image and attaching a replacement or supplying an image URL. Use assets you are entitled to publish.

Does an annotation itself explain the goal?

Not always. Pair it with a concise written instruction.

Official sources and next steps

Edit from the preview. Continue with fonts, images and branding.