> For the complete documentation index, see [llms.txt](https://docs.abtasty.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor.md).

# Visual editor

We've updated the Visual Editor with a fresh look that aligns with our company's branding. This includes new colors, fonts, and icons for a more modern and consistent experience.

## The Quick-Action Bar

When you select an element, the **Quick-Action Bar** appears just below it, offering shortcuts to the most frequently used actions. This allows you to perform common edits without needing to open the full context menu.

<figure><img src="/files/YJTaoxAs8Rv2QrWScRYu" alt="" width="183"><figcaption></figcaption></figure>

The standard actions include:

* **AI Copilot:** Invoke the AI assistant.

<figure><img src="/files/jJyyMukzfjUDHUoKaEwa" alt="" width="375"><figcaption></figcaption></figure>

* **Edit Style:** Open the style editor.

<figure><img src="/files/UQbxRDVUy7GTEdJYKiRN" alt="" width="375"><figcaption></figcaption></figure>

* **Edit Text:** Open the text editor.

<figure><img src="/files/5WqzYWDGWNe7Q4pwEgYX" alt="" width="375"><figcaption></figcaption></figure>

* **Add Tracker:** Add an action tracker to the element.

<figure><img src="/files/yZux9ECfKNuqcAQk8kus" alt="" width="375"><figcaption></figcaption></figure>

* **More Options (`...`):** Click this to open the full context menu.

<figure><img src="/files/ftJQ7QO7uywgQDfLhYTW" alt="" width="316"><figcaption></figcaption></figure>

The **Quick-Action Bar** is adaptive. For example, if you select a widget, the style and text edit icons will be replaced by an icon to open the widget's configuration panel. If an element has already been modified, an icon to access the "active changes" panel will appear.

<figure><img src="/files/37uUjZpUfQbUOUK9SYWA" alt="" width="363"><figcaption></figcaption></figure>

## The SmartOutline Panel

The **SmartOutline** panel, located on the left side of the editor, displays the complete hierarchical structure (DOM) of your page. It is designed to make element selection more precise and powerful.

<figure><img src="/files/niTN2fGo9lkHan5Y2UR4" alt="" width="234"><figcaption></figcaption></figure>

Key features include:

* **Synchronized Selection:** Hovering or clicking an element in the SmartOutline panel will highlight and select it in the Visual Editor, and vice-versa.
* **Precise Targeting:** Easily select elements that are difficult to click on, such as nested or overlapping components.
* **Right-Click Menu:** You can now right-click directly on an element within the SmartOutline panel to open the full context menu, saving you time.
* **Collapsible:** You can collapse the panel to maximize your screen space. The collapsed panel can be moved vertically if it obstructs an element you need to see.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.abtasty.com/web-experimentation-and-personalization/editors-and-widget/visual-editor.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.