Edit from the preview

1. 1

   Open your app project in Lovable to see its preview.

   The preview toolbar only appears when you are viewing your app.

2. 2

   Look for the preview toolbar, usually at the bottom center of your app preview, and choose a mode based on what you want to do.

   The toolbar lets you interact with your app in different ways, like selecting elements, editing text, drawing, or adding comments.

3. 3

   If you want to change something specific, click the 'Select elements' button (or press 'S'), then click on the part of your app you want to change. You can hold Cmd/Ctrl to select multiple items.

   This tells Lovable exactly what you're referring to, so your instructions are clearer. Each selected item will be attached to your chat message.

4. 4

   Type your request in plain language in the chat input and send it.

   Lovable will use the selected elements as context and apply the changes you described.

5. 5

   If you just need to fix a typo or change a few words, click the 'Edit text inline' button (or press 'T'), then click directly on the text and type your correction.

   This is the fastest way to make small text changes without writing a full prompt.

6. 6

   If you need to show a layout change or move things around, click the 'Draw annotation' button (or press 'D'), then draw on your app preview.

   Drawing helps explain visual changes that are hard to describe with words alone. Your drawing will be sent with your message.

7. 7

   If you want to leave a note for yourself or a teammate, click the 'Add a comment' button (or press 'C'), then click where you want the comment to appear.

   Comments help you discuss specific parts of your project with others directly on the app preview.

I want to make changes directly on my app preview. What are the different ways I can interact with the preview toolbar to edit elements, text, or add comments?

Preview toolbar

A special set of tools that appears on top of your app's live view, letting you make changes directly by pointing and clicking.

Inline text edits

Changing words directly on the screen where they appear, like fixing a typo, without needing to type a full instruction.

Annotation

A drawing or sketch you make on your app's preview to highlight something or show a visual change you want.

Credits

The currency or usage allowance for certain actions within Lovable, which can be consumed by more complex requests.

• Don't describe changes in text if you can point to them; selecting elements or drawing is often more precise.
• Don't use the 'Select elements' or 'Draw annotation' modes for simple text fixes, as 'Edit text inline' is faster and often free.
• Don't expect to switch modes if you have an unsent drawing or unsaved text change in your current mode; you must send or discard it first.