Manual Mode — Point-and-Click A/B Test Editor

• You know exactly what you want to change and you want pixel-level control.
• You’re fine-tuning a variation that started in AI mode.
• The change is too narrow to be worth a prompt (e.g., “make this padding 12px”).
• You want to copy a specific style from a design spec.

​

Picking an element

• Pick a different element — click another element on the page, or click the picker icon in the sticky bar.
• Navigate nearby — use the “tree” icon to navigate to nearby elements. See below
• Deselect — click the x on the right side of the selected bar or pick another element to deselect the current one.

​

Detailed Selector

​

Property groups

​

Content

• Inner HTML — change the visible text or markup inside the element. Multiline-supported.

​

Links

​

Classes

​

Typography

• Font size — with a unit selector (px, em, rem, %)
• Font weight — preset weights and custom numeric input
• Color — color picker plus hex input
• Alignment — left / center / right / justify (segmented control)
• Line height — unitless, px, em, rem, or %. Empty unit (-) means unitless, which is the CSS recommendation for line-height.
• Letter spacing — px, em
• Text decoration — none / underline / strikethrough / overline

​

Background & Border

• Background color — color picker with a clear option
• Border — width, style (solid / dashed / dotted / none), and color. The color swatch is positioned so the native color picker doesn’t render off-screen for elements near the right edge of the viewport.
• Box shadow — None / Small / Medium / Large presets. The presets follow common design-system scales; for custom shadows, use Global CSS.
• Background image — paste a URL or use one of the image flows. Hidden on <img> elements (use Content → image replace instead).

​

Background Images

​

Layout

• Display type — choose between block, inline-block, inline, flex, grid, and none. Setting to none is a quick way to hide an element without removing it from the DOM.
• spacing — click and drag horizontally over a value to scrub it up or down (similar to Figma) for padding and margin.
• Width & Height — Select the width, max-width, height and max-height for your element. With unit selectors. Setting to auto removes the mutation.

​

Visibility

• Hide this element — a quick toggle that sets display: none.
• Opacity — slider from 0% to 100% plus a number input. Setting to 100% removes the mutation (no point keeping opacity: 1 on the element).

​

Global CSS and Custom JavaScript

​

Global CSS

• Page-wide background color or font changes
• Hover states that the structured controls can’t express
• Animations
• @media queries for responsive tweaks (the only way to scope changes per breakpoint today)

​

Custom JavaScript

function waitFor(selector) {
  return new Promise(resolve => {
    const el = document.querySelector(selector);
    if (el) return resolve(el);
    const observer = new MutationObserver(() => {
      const el = document.querySelector(selector);
      if (el) {
        observer.disconnect();
        resolve(el);
      }
    });
    observer.observe(document, { childList: true, subtree: true });
  });
}

waitFor(".my-element").then((el) => {
  el.innerHTML = "Hello World!";
});

​

Next steps

• AI mode — draft variations from a prompt, then fine-tune here.
• Images — upload, AI-generate, and reuse images across experiments.
• Preview and QA — preview links, debug panel, live-experiment warning.
• Troubleshooting — when a variation isn’t behaving as expected.