# Visual editor

The visual editor lets you change your live site by clicking: select an element, change its text or style, hide it, insert HTML, and save the result as the changes of a variation. It runs on your own site, in your own browser, with no extension to install.

## Open the editor

1. In the app, open a draft or scheduled experiment, go to **Variations**, pick the variation and choose **Open visual editor**. Your agent can hand you the same link with `get_editor_link`.
2. A new tab opens your page with a one-time editor link (`?tf_editor=...`). The link works once, within 10 minutes.
3. The TryFast snippet on your page loads the editor. While it is open, no experiment runs and nothing is tracked in that tab. The editor session lasts 2 hours and survives navigating to other pages of your site in that tab.

The editor needs the TryFast snippet on the page. If nothing opens, [check your installation](../install.md#check-that-it-works). Only drafts and scheduled experiments can be edited; to change a running experiment, stop it and duplicate it.

## Select an element

Hover to highlight, click to select. Move to the parent or a child element with the arrow buttons, press Escape to deselect, and switch to **Browse** to use your page normally (open a menu, add something to the cart), then back to **Select**.

The editor shows the selector it will save and how many elements on the page match it. It prefers selectors that survive site updates: an `id` that does not look generated, then `data-testid`, `data-test` or `data-qa`, then a unique attribute such as `name`, `aria-label` or `href`, then stable class combinations, and finally a short position path from the nearest stable parent. You can edit the selector yourself.

## What you can change

Each action becomes one [change](variations.md#changes) in the list on the side:

- Edit the text, or the HTML.
- Hide or remove the element.
- Change styles: text color, background color, font size and weight, margin, padding, corner radius, text alignment.
- Change a link URL, an image source or its alt text.
- Insert HTML before, after, at the start or at the end of the element.
- **Use as click goal**: creates a click goal for the selected element and attaches it to the experiment, as the primary goal if the experiment has none.

The side panel lists the changes with undo, redo and delete, and **Show original** compares with your page as it is. **Save** stores the changes in the variation; the app shows them immediately and the [preview links](qa-and-preview.md) show them on your site. Saving into a scheduled experiment moves it back to draft, so someone with launch permission confirms it again.

The bar names the variation you are editing. The control cannot be edited; to edit another variation, open its own editor link from the app.

## Rules and safety

- Saved changes follow the same [safety rules](variations.md#safety-rules) as changes made through the API: no scripts or event handlers in HTML, no `javascript:` links. The editor cannot save JavaScript; use the variation's code tab for that.
- HTML you insert is shown on your page through the same filter before it is saved, so a draft cannot run script in your editor session.
- The editor talks only to TryFast's editor endpoints, only from your project's domains, and without cookies. A link for one project does not open on a page that runs another project's snippet.
- If someone changed the variation in the app while your editor was open, saving shows "This variation changed in TryFast since you opened the editor" with **Reload changes**.

## Limitations

Elements inside iframes and inside shadow DOM cannot be selected. Pages that render everything in the browser work, as long as the snippet is on the page; use **Browse** to reach states that need interaction first.