Skip to main content

Visual Editor

The visual editor lets you point, click, and change anything on your site — then run an A/B test to see which version converts better. No code. No deploys. No developer.

How it works​

  1. Open an experiment and click Open visual editor
  2. Your live site loads with a click-to-edit overlay
  3. Click any element — a headline, button, image, paragraph, or section
  4. Make your change — edit text, change colors, adjust layout
  5. Save and launch

Changes are stored in Datsnip. Your actual site files are never touched. When visitors land on your page, Datsnip quietly applies the correct version for each visitor.

What you can change​

Text​

Change any words on your page. Headlines, button labels, paragraph copy, link text — anything visible.

Ideas:

  • Change your hero headline from feature-focused to outcome-focused
  • Test two different CTA button labels
  • Rewrite a product description
  • Change a testimonial pull-quote

Style​

Change how any element looks — color, size, font weight, spacing, background.

Ideas:

  • Make your CTA button a high-contrast color
  • Increase the hero headline font size
  • Add or remove padding around a section
  • Change a button from outline style to filled

Redirect​

Send variant visitors to a completely different page instead of modifying the current one. Useful for testing a totally new design.

Ideas:

  • Test your current pricing page vs a rebuilt version
  • Test an old checkout flow vs a new streamlined one
  • Test your current landing page vs a Webflow-built alternative

Full guide to redirect testing →

Picking what to click​

Some elements are easier to select than others:

  • Headlines (h1, h2): click directly on the text
  • Buttons: click the button text or the button itself
  • Images: click the image
  • Sections: click the background of the section, then use the breadcrumb to select the right element

The editor shows a DOM breadcrumb trail at the top — use it to navigate between a parent section and its children if you clicked the wrong thing.

SPAs and JavaScript-heavy sites (React, Vue, Next.js)​

Datsnip works with all modern JavaScript frameworks. When visitors navigate within your app, changes are automatically re-applied to the new page content.

Tips for better visual experiments​

Be specific about what you're changing. Testing "new homepage" tells you nothing. Testing "headline: 'Start your free trial' vs 'Try free for 14 days'" tells you exactly what moved the needle.

One change per variant. If you change the headline, the CTA button, and the hero image all at once and it wins, you don't know which change caused the lift. Test one thing at a time.

Test bold differences. A 10% font size increase rarely moves the needle. "Book a call" vs "Get a free audit" does.