Introduction

Mockly is a platform for building websites where A/B testing is part of the language. You write pages in TSX, the markup React developers already know, and put experiments right in them. When you publish, Mockly builds every version of every page ahead of time. When someone visits, it picks their variant on the server and sends HTML that's already built.

What you write#

A Mockly site is a folder of files: pages in pages/, components in components/, and images, fonts, and other files in public/. Each page is a function that returns a <Page>. An experiment wraps the part of the page that changes:

import { Experiment, Page, Variant } from "mockly"; export default function Home() {  return (    <Page title="Acme" description="Launch pages that learn.">      <Experiment name="hero" goal="signup">        <Variant name="control">          <h1>Ship faster</h1>        </Variant>        <Variant name="bold">          <h1>Launch in an afternoon</h1>        </Variant>      </Experiment>      <a href="/" track="signup">        Start free      </a>    </Page>  );}

That's a complete experiment: two variants, split evenly, judged on the signup goal, which the link records when it's clicked.

The language is a strict subset of TSX. It uses class rather than className, allows only what can be built ahead of time, and explains everything it doesn't accept with a diagnostic that has a stable code.

What happens when you publish#

Publishing runs the compiler over the whole site. It checks every file, then builds:

• HTML for each variant of each page, so the server never renders anything while a visitor waits.
• A small script for each interactive part, such as a menu or a calculator. A page without interactive parts loads less than 1.25 KB of JavaScript.
• A stylesheet with exactly the utility classes the site uses.

Each publish is kept, so you can see what it changed and put an earlier one back. See Publishing and history.

What happens when someone visits#

The server reads the publish, chooses the visitor's variant for each experiment on the page, and joins the pre-built pieces of HTML. The page arrives as the visitor's variant, so nothing flickers. Each visitor keeps their variant across pages and visits.

Mockly records the page view and the goals the visitor reaches on the server that served the page. Results come with intervals that stay valid however often you check them, and a plain verdict: a variant wins, does worse, has no clear winner yet, or needs more data. See Reading results.

Where to go next#

• Quickstart: create a site, add an experiment, and publish it.
• How Mockly works: the publish and serving steps in more detail.
• Experiments: every way to write one, and the rules they follow.
• Interactive parts: state, events, and lists in the browser.