Visual editor: editing experiments without code

How the Pertento visual editor is laid out, how to select, edit, move and remove elements on your live site, and how changes, undo and saving work.

5 min read

The Pertento visual editor lets you build and change the variants of an experiment on your own live site, without a developer. You point at an element, change it, and the change is saved against the variant. The page itself is never modified, so stopping the experiment is all it takes to roll back.

This guide covers the editor as it was redesigned in October 2026. To install the Chrome extension and open the editor, see Setting up the Pertento editor in Google Chrome.

The editor at a glance

The editor uses the same design system as the dashboard, in light and dark mode, and is laid out in four areas.

Top bar. The variant tabs, the device previews (desktop, tablet and mobile, plus more sizes in a dropdown), Preview on another device, the save status and the dark mode toggle. The save status reads All changes saved, Unsaved changes (n) or Saving…. When there are unsaved changes, the status is a button that opens the changes list.

Left sidebar. A Layers | Add switcher, with Layers open by default, and a Changes button with a count of the changes on this variant.

Canvas. Your page, inside a device frame. A floating toolbar sits at the bottom, a selection chip follows the element you have selected, and a keyboard icon lists every shortcut.

Inspector. On the right. It shows the selected element's path and a readable name, with Design and Code tabs. See The editor inspector: styles, states and attributes.

Selecting elements

Click an element to select it. Shift+click adds more elements to the selection.
The selection outline is drawn over the page, so the site cannot hide it. A parent with overflow: hidden or an overlapping element no longer cuts it off.
Elements with Tailwind-style classes such as py-3.5 or w-1/2 select normally.
The breadcrumb at the top of the inspector selects a parent. The inspector then shows and edits that parent.
The Layers tab shows the selected element's ancestors, siblings and children. Hover a row to outline its element on the page, and click a row to select it.
Select similar on the selection chip selects every element like this one, for example every product card's heading.
Embedded content. Clicking inside an iframe (a video, a map, a widget) selects the frame itself. What is inside comes from another site and cannot be edited, but the frame can still be resized, moved or hidden.

Right-click an element, or press Shift+F10 or the Menu key, to open the element menu.

Edit HTML (E) opens the element's HTML in the code editor.
Add HTML inserts markup before, inside first, inside last or after the element.
Add element… (A) opens the Add tab. See Adding components and blocks in the editor.
Duplicate (D) inserts a copy right after the element. The copy loses its id, so the page never has two elements with one id.
Hide (H) hides the element but keeps its space, so nothing around it moves.
Select parent (Shift+Enter).
Copy selector copies a CSS selector, a unique path or a JavaScript snippet.
Remove element (Backspace) removes it from view and the layout closes the gap. A notification offers Undo.

The selection chip offers the most common actions as buttons: Duplicate, Hide, Move up, Move down and Select similar.

Moving elements

Drag an element by its handle and drop it before, after or inside another element.
Move up and Move down, on the chip or with Alt+↑ and Alt+↓, step the element one place among its siblings.
Moves land in the same place on the live site, including moves into the page body.

Editing text in place

Double-click any text to edit it directly on the page. ⌘B, ⌘I and ⌘U apply bold, italic and underline. Enter or clicking away finishes the edit, Shift+Enter adds a line break, and Escape cancels. In-place editing works on text and inline markup, not on whole sections. When you finish, the edit becomes an ordinary change, so undo restores exactly what was there.

Changes, undo and saving

The Changes list opens from the Changes button in the left sidebar, and a Back row returns you to Layers or Add. Every change has a readable label, such as Moved, Heading text, Added button or HTML. The variant's global CSS and JavaScript are listed at the top, and clicking one opens its editor. If a saved change targets an element that is not on the current page, the list marks it Element not found on this page.

Undo and redo restore the original text and styles. Undoing a saved change reverts it on the page, and it is deleted when you save; redo brings it back. Inside a text field, ⌘Z undoes your typing rather than the last change on the page.

Saving is ⌘S or the Save button. Edits you make while a save is running are kept, and a failed save shows an error with Retry, with your changes still in the editor. Close Editor asks before discarding unsaved changes.

Switching variants

Click another variant tab and the editor switches in place. The old variant's changes are removed before the new variant's are applied. You cannot switch while you have unsaved changes: save or undo them first.

Notifications

Notifications appear at the bottom centre, up to three at a time. Neutral and success notifications stay for 5 seconds, warnings for 8, and errors until you dismiss them. An error says what is safe, offers Retry where it helps, and has Copy details for support.