Skip to main content

Using the Visual Editor

The Visual Editor allows you to build and modify experiment variations directly on your website—without needing to work in your codebase.

You can visually edit elements, change styles, insert new content, and apply custom logic, all within an intuitive interface.

What you can do in the Visual Editor​

The editor gives you full control over how your variations look and behave.

Edit element styles​

You can modify the most common styling properties with simple controls, for example:

  • Appearance and layout
  • Text content
  • Colors and backgrounds
  • Font size, weight, and spacing
  • Margin and padding
  • Positioning

Learn the basics on how to edit an element

Move elements​

Rearrange elements on the page to test different layouts and structures with a simple click, select and apply.

Learn how to move an element

Add new content​

You can insert entirely new elements into your page by just pasting the HTML.

Learn how to add content by writing or pasting HTML.

You can also use the AI prompt to have this generate new content for you.

Learn how to Add content using AI

Apply device-specific changes​

Customize experiences for different devices.

  • Show or hide elements per device
  • Adjust styles for mobile, tablet, or desktop

Learn how to do device-specific changes

Go beyond point-and-click editing​

If the setting you need isn’t available through the visual controls, you have more advanced options.

Use AI-assisted styling and functionality​

You can use the AI prompt to generate:

  • Custom styling
  • Behavior changes
  • Interactive functionality

The generated output is applied as custom CSS and JavaScript, which you can review and edit at any time.

Add custom code to elements​

Each element supports custom code for deeper control.

  • Write CSS to control styling
  • Write JavaScript to control behavior
  • Code is scoped to the selected element

See examples

Write global CSS and JavaScript​

For broader changes, you can define global code that applies across the entire page or experiment.

  • Global CSS for styling across elements
  • Global JavaScript for shared functionality

This can be done by clicking the code icon in the editor toolbar

Full transparency and control​

All changes made in the editor—whether visual or AI-generated—are:

  • Visible in the code tab
  • Fully editable
  • Not locked behind abstractions

This ensures both marketers and developers can collaborate effectively.

Summary​

With the Visual Editor, you can:

  • Quickly build and test variations without coding
  • Fine-tune styles and layouts visually
  • Add advanced functionality with custom code
  • Maintain full control and transparency over all changes

It’s designed to support both rapid experimentation and advanced customization.