# Visual editor URL: https://docs.ablyft.com/guides/experiments/visual-editor/ > Build variations by editing your own website visually, without writing code. The Visual Editor lets you change your website by clicking on it: edit texts, swap images, change colors or layouts. ABlyft saves your changes as part of the variation and applies them to visitors who are assigned to it. You do not need JavaScript or CSS knowledge, but you should understand the changes you make. ## Before you start * The experiment needs an **Example URL**: the page you want to edit. See [Create an experiment](https://docs.ablyft.com/guides/experiments/create-experiment/). * The **snippet must be installed** on that page, because the editor is loaded through the snippet. See [Embed the snippet](https://docs.ablyft.com/developers/installation/snippet/). * You need the role member, admin or owner. ## Open the editor 1. Open the experiment and create a variation of the type **Visual Editor**, see [Variations](https://docs.ablyft.com/guides/experiments/variations/). The editor opens right after you click **Create variation**. 2. To edit an existing variation later, click **Edit** in its row of the **Variations** card. ABlyft opens your example URL with two additional URL parameters, for example: ```text https://example.com/product?ablyft_editor_variation=12345&ablyft_editor_token=YOUR_EDITOR_TOKEN ``` The parameters are described in [URL parameters](https://docs.ablyft.com/developers/reference/url-parameters/#ablyft_editor_variation-and-ablyft_editor_token). `ablyft_editor_variation` is the ID of the variation you edit, `ablyft_editor_token` is a personal token that is valid for **8 hours**. When the snippet finds the token, it loads the editor on top of your page. > **Keep the editor link private:** The link contains your personal editor token. Do not share it. Each time you open the editor, ABlyft creates a new > token and invalidates your previous one, so an older editor tab may stop working. If the editor does not load, close > it and click **Edit** again. ## Make and save changes Select an element on the page and change it in the editor. ABlyft stores each change together with a CSS selector that identifies the element. When a visitor sees the variation, the snippet finds the element with the selector and applies the change, for example new text, HTML, a link, an image source, a class or styles. Your changes are saved in the variation. You can inspect them in **Edit settings** of the variation, in the field **Settings from Visual Editor** (a JSON document generated by the editor). In the same section you can add **JS code** and **CSS code** to a Visual Editor variation if you need something the editor cannot do. Check the result with the preview, see [Preview & QA](https://docs.ablyft.com/guides/experiments/preview-and-qa/). ## Editor extensions Editor extensions are ready-made building blocks that a change in the editor can use. Each extension brings its own HTML, CSS and JavaScript. ABlyft provides them; there is no setting for them in your project. If a variation uses an extension, ABlyft includes it in your snippet automatically. ## Good to know > **Selectors depend on your page:** The editor addresses elements by CSS selectors. If your developers later change the HTML of the page (for example > class names), a change may no longer find its element. If a variation does not show its changes, see > [Changes are missing](https://docs.ablyft.com/guides/troubleshooting/changes-missing/). * If a page does not load properly inside the editor, contact ABlyft support. * With the type **Code** you build the same changes by hand, see [Variations](https://docs.ablyft.com/guides/experiments/variations/). ## Next steps - [Preview & QA](https://docs.ablyft.com/guides/experiments/preview-and-qa/): See your changes the way visitors will. - [Variations](https://docs.ablyft.com/guides/experiments/variations/): Other variation types and code. - [Changes are missing](https://docs.ablyft.com/guides/troubleshooting/changes-missing/): If a change does not appear.