The visual editor

The visual editor loads your target page in a live preview and lets you change it without code. Select a variation from the dropdown, then click any element to edit it.

Selecting elements

Hover to highlight, click to select. The sidebar shows the selected element's properties, HTML and attributes.

What you can change

• Text & HTML — edit the inner HTML directly (with formatting).
• Styles — typography, colours, spacing (padding/margin with linked sides), borders and radius, opacity and more, with px/em/rem/% units.
• Attributes — image src/alt, video poster, etc.
• Hide or remove an element.

Responsive editing

Switch between desktop, tablet and mobile modes to preview and apply device-specific overrides on top of your base styles. The breakpoints used are the ones set on the test (defaults: tablet ≤ 1024px, mobile ≤ 768px).

AI rewrite

Select an element and use AI rewrite to generate alternative copy/markup, preview a before/after comparison, and apply or refine it.

History

Every change is tracked. Use undo/redo, jump to any point in history, or reset all to return the variation to its original state. Click Save to persist your changes.

How edits are matched at runtime

Each edit is stored as a selector plus the change to apply. If your page markup changes later — a redeploy that renames a class, a CMS edit that moves a block — the selector may no longer match and that edit silently stops applying. Re-open the editor after any significant front-end release and confirm your active variations still look right.

The editor session uses a time-limited token; if you see an expiry warning, click Extend session to keep working.