Edit Mode (Element Selector Tool and Annotate Tool)
A detailed explanation of the element selector tool and how to use it to modify specific parts of a generated component.
This article explains how to use Edit Mode to target one or more elements for changes in the AI Website Builder.
What is Element Selector and where do you find it?
The Element Selector tool is in part of the Edit Mode on the chat widget. It lets you target specific elements on the site that the AI agent should modify.

Use Element Selector (the target icon) when you want to identify the exact part of a page that needs a change. For example, select a title before asking the agent to add an animation to it.
What is Annotate tool?
The Edit Mode widget can also work as Annotate tool. Annotate lets you draw on the page preview to show a visual change, such as moving an element or changing its relative position.

After drawing an annotation, click ADD TO CHAT. The Builder captures a snapshot of the annotated page and adds it to the chat. The annotation is an instruction attached to the prompt, not a direct edit to the page. The agent uses image analysis to interpret the snapshot, so review the result in Preview and publish separately when it is ready.
Selecting one or more elements
Select one element normally. To select additional elements, hold Ctrl on Windows or Linux, or Command (⌘) on macOS, while selecting them.

When exactly one element is selected, the Visual Editor opens. Use it for direct, small changes to that element without prompting the AI agent.
When multiple elements are selected, the Visual Editor does not open. Run a prompt instead, and describe the change you want applied to the selected elements. Multi-selection is useful when the same change should apply to several elements.
For complex changes, describe the intended result clearly in the prompt and review the output in Preview before publishing.
How did we do?
Understanding the Different AI Models Available
Connecting domain