Click-to-edit lets you point at any element in the live draft preview and ask the AI to change it — without having to describe where in the app the thing you want to change is located. You select something visually, then type what you want done to it.
How to use click-to-edit
- Open a project that has at least one completed build.
- In the prompt bar at the bottom of the screen, click the Pick on draft to edit button (the cursor-in-a-box icon). The draft preview activates element-selection mode.
- Click on any element in the draft preview — a button, a heading, a card, a form field, anything visible on screen. The selected element is highlighted.
- You can select multiple elements if your change involves more than one thing.
- Once you've selected what you want, the Edit button (sparkle icon) in the floating toolbar becomes active. Click it, or type your request in the chat input — the AI receives both your message and the context of which elements you selected.
The AI uses the selected elements to understand exactly what you're referring to, so your request can be short and direct: "Make this blue", "Remove the border", "Change the label to 'Submit Order'", or "Move this below the price."
The floating toolbar
When click-to-edit mode is active, a small toolbar appears over the draft preview. It shows:
- How many elements are currently selected
- The Edit button (enabled once at least one element is selected)
- A button to exit click-to-edit mode
You can drag the toolbar to the top or bottom of the preview if it's covering something you need to see.
What you can select
You can click on any visible element in the rendered app: text, buttons, images, containers, input fields, navigation items. The selection system uses the element's position in the DOM to identify it precisely, so the AI knows exactly which part of the code corresponds to what you clicked.
When to use it
Click-to-edit is useful when:
- You want to change something specific but it would take several sentences to describe where it is in the app
- You want to make a targeted visual change to a single element without affecting the rest of the page
- You're iterating on the look and feel of a component and want precise control over which thing you're modifying
For bigger structural changes — adding new features, changing how data flows, redesigning a whole section — describing what you want in the chat without selecting specific elements is usually more effective.
Frequently asked questions
Does click-to-edit work on the live version of my app?
No. It works only in the draft preview inside Caffeine. Your live, deployed app is not interactive in this way — it's what your users see, and changes go through the normal build process.
I clicked an element but nothing was highlighted. What happened?
Some elements overlap or are very small. Try clicking on something more prominent first to confirm the mode is active. If the issue persists, try refreshing the draft preview and re-entering click-to-edit mode.
Can I undo a change made through click-to-edit?
The same way you'd undo any AI build: describe what you want reverted in the chat. Click-to-edit changes go through the same build pipeline as any other change — there's no separate undo mechanism.
Does click-to-edit work on mobile?
When viewing the draft in mobile preview mode, the editing toolbar appears automatically without needing to activate click-to-edit explicitly. You can still select elements and submit edits the same way.
What if the AI edits the wrong thing even after I selected an element?
Sometimes the AI interprets a selection broadly — especially if the selected element is part of a repeated component (like a list item). If the result affected more than you intended, describe the scope more precisely in your follow-up: "Only change the first item in the list, not all of them."