Quickstart

This guide takes you from an empty studio to a live experiment with results. You create a site from the starter template, add an experiment to a new page, check each variant in the preview, publish, and watch visitors get their variants.

Create a site#

1. On the sites page, click New site.
2. Type a Name, such as Acme launch. The Slug fills in from it. It's part of the site's address, so it uses lowercase letters, digits, and dashes, and you can edit it.
3. Leave the Template on Starter landing page: a landing page with three experiments, a sign-up form, and a changelog, to learn from. Blank page starts with one empty page instead.
4. Click Create site. The site's workspace opens.

Find your way around#

The workspace has three panes, side by side:

• Files, on the left, lists pages/, components/, and public/. Each page shows the route it's served at, such as index.tsx at /. A file with an error gets a red dot.
• The editor, in the middle, saves and checks your code as you type. The bar above it shows the open file, whether it's saved, and how many errors and warnings the site has.
• Preview, on the right, shows the page as visitors will get it and updates as you type. Pick the page with Route, and the width with the desktop, tablet, and mobile buttons. The Experiments tab beside it lists the site's experiments.

Under the editor, the Problems panel lists every error and warning with its code, message, file, and line, and usually a hint. Click one to jump to it. ⌘/Ctrl+J shows or hides the panel.

Add an experiment#

The starter's home page already has two experiments. To write one from scratch, add a page:

1. Under pages/, click New page, type launch, and press Enter. The studio creates pages/launch.tsx, served at /launch.
2. Replace its contents with this page:

import { Experiment, Page, Variant } from "mockly"; export default function Launch() {  return (    <Page title="Acme · Launch" description="Plan launches with your whole team.">      <main class="mx-auto max-w-2xl px-6 py-24 text-center">        <Experiment name="launch-headline" goal="launch-click">          <Variant name="control">            <h1 class="text-4xl font-bold">Plan every launch in one place</h1>          </Variant>          <Variant name="outcome">            <h1 class="text-4xl font-bold">Launch on time, every time</h1>          </Variant>        </Experiment>        <p class="mt-4 text-lg text-gray-600">Checklists, owners, and dates your team can see.</p>        <a          href="/signup"          track="launch-click"          class="mt-8 inline-block rounded-full bg-indigo-600 px-6 py-3 font-semibold text-white"        >          Start free        </a>      </main>    </Page>  );}

The <Experiment> wraps the part of the page that changes. Each <Variant> is one version of it. One must be named control: it's what the others are compared with, and what everyone sees while the experiment is paused. Without weights, visitors split evenly.

goal="launch-click" names what the experiment is judged on, and the link's track="launch-click" records that goal when a visitor clicks it. A goal can also come from a form or a thank-you page. See Goals.

Preview each variant#

With /launch picked in Route, a bar above the preview has a control for each experiment on the page: launch-headline, with control and outcome. The preview shows control first. Pick outcome to see the other headline.

Tick Outline experiments to draw a dashed border around each experiment, labeled with its name and the variant showing.

Click Start free in the preview. A toast says "Goal fired: launch-click", and the preview follows the link to /signup. The preview never records anything.

Publish#

1. Click Publish at the top right, or press ⌘/Ctrl+Enter. The studio saves your files and shows the publish plan: the pages going live, and what happens to each experiment.
2. Check the plan. On a first publish, every experiment is New: it starts running, split by the weights in its source.
3. Click Publish in the plan. A toast confirms it with the version's short hash, such as "Published · 3f9a2c1d".

Visitors get the new version on their next page view. Publishing and history explains the plan in full, and how to put an earlier version back.

Watch visitors get variants#

Click Open site in the top bar. The live site opens in a new tab. Add /launch to the address.

The server chose your variant before it sent the page, so the page arrived as that variant, with nothing swapped in after it loaded. Reload, and you get the same one: your variant is kept in a cookie. To arrive as a new visitor, who may get the other variant, open the page in a private window or another browser.

Back in the studio, open the Experiments tab beside Preview. The launch-headline card has a row per variant with its traffic, visitors, conversions, and conversion rate, refreshed every 5 seconds. Click Start free on the live page, and you count as converted in your variant.

The card's status control switches the experiment between Running, Paused (everyone sees control, and nothing is recorded), and Ship (everyone sees the variant you choose, and nothing is recorded). A change takes effect on the next page view, without publishing.

Read the results#

Click Analytics in the header, open the Experiments tab, and select launch-headline. Full results in the workspace's Experiments tab opens the same view. It shows:

• the verdict: a variant is winning, a variant is doing worse, there's no clear winner yet, there isn't enough data yet, or the traffic split doesn't match the weights
• each variant's visitors, conversions, and conversion rate
• each variant's lift over control, with an interval that stays valid however often you check
• how long to run: the visitors and days needed to detect a lift of 5%, 10%, or 20%

A handful of test visitors isn't enough data, so the verdict shows how far the smallest variant is from enough visitors. Reading results explains each number and when to stop.

Next steps#

• Experiments: weights, variants written inline, and one experiment on several pages.
• Goals: clicks, forms, and thank-you pages.
• Reading results: what the verdict and the intervals mean.
• How Mockly works: what publishing builds, and how the server picks a variant.