> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stably.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# What is Stably?

> Stably brings AI superpowers to Playwright — alongside an optional editor Web or CLI experience.

export const StablyPlatformDiagram = () => {
  const StablyCard = ({title, description, href, span = "half", icon}) => {
    return <a href={href} className={`group w-full text-left rounded-2xl border border-emerald-200/90 bg-emerald-50 bg-gradient-to-br from-white to-emerald-50 px-4 py-3 text-emerald-900 shadow-[0_16px_34px_-22px_rgba(16,185,129,0.55)] transition duration-150 hover:-translate-y-0.5 hover:border-emerald-400 hover:shadow-[0_16px_34px_-18px_rgba(16,185,129,0.55)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/80 dark:border-emerald-500/30 dark:bg-emerald-900 dark:bg-gradient-to-br dark:from-emerald-900/70 dark:to-emerald-800/60 dark:text-emerald-50 dark:hover:border-emerald-200/70 dark:hover:shadow-[0_12px_32px_-20px_rgba(16,185,129,0.9)] dark:focus-visible:ring-emerald-200/80 ${span === "full" ? "col-span-2" : ""}`}>
        <div className="flex items-start gap-3">
          {icon ? <span className="mt-0.5 text-lg text-emerald-700 dark:text-emerald-100" aria-hidden>
              {icon}
            </span> : null}
          <div className="flex-1">
            <div className="text-base font-semibold text-emerald-900 dark:text-emerald-50">
              {title}
            </div>
            <p className="text-sm text-emerald-800/90 dark:text-emerald-100/80">
              {description}
            </p>
          </div>
        </div>
      </a>;
  };
  return <div className="not-prose my-6">
      <div className="rounded-3xl border border-emerald-300/80 bg-gradient-to-br from-white via-emerald-50/70 to-white p-5 shadow-[0_24px_60px_-28px_rgba(16,185,129,0.5)] backdrop-blur-sm dark:border-emerald-500/20 dark:bg-gradient-to-br dark:from-emerald-950 dark:via-emerald-900 dark:to-emerald-950 dark:shadow-[0_30px_80px_-40px_rgba(16,185,129,0.6)]">
        <div className="flex flex-col gap-2 sm:flex-row sm:items-baseline sm:justify-between">
          <div className="text-lg font-semibold text-emerald-900 dark:text-emerald-50">
            Stably Platform
          </div>
        </div>

        <div className="mt-4 grid gap-3 sm:grid-cols-2">
          <div className="col-span-2 text-xs font-medium uppercase tracking-wide text-emerald-600/70 dark:text-emerald-300/50">
            Interfaces
          </div>
          <StablyCard title="Web Recorder & AI Editor" description="Generate, edit, and run tests in the Web. Includes recorder and AI editor." href="/getting-started/no-code-tests" icon="☁️" />
          <StablyCard title="CLI" description="Interactive CLI to create tests with AI. Allows running tests locally or in CI." href="/stably2/cli-quickstart" icon={<Icon icon="terminal" />} />
          <div className="col-span-2 mt-2 text-xs font-medium uppercase tracking-wide text-emerald-600/70 dark:text-emerald-300/50">
            Foundation
          </div>
          <StablyCard title="Stably Playwright SDK" description="Playwright extension that powers assertions, extraction, and agent actions." href="/getting-started/stably-playwright-sdk" span="full" icon="🎭" />
          <StablyCard title="Stably Test Reporter + Analytics" description="Centralized reporting, traces, and AI analysis across runs." href="/stably/stably-test-reporter" span="full" icon="📊" />
        </div>
      </div>
    </div>;
};

***

## How Stably Works

<StablyPlatformDiagram />

As shown in the diagram, Stably is the **AI layer for Playwright** — combining a drop-in SDK that makes your end-to-end tests more capable, stable, and autonomous with optional reporter components for collecting test results and providing AI insights.

On top of the powerful core, we offer both a web and CLI experience for creating, editing, and executing tests.

<Tip>Stably is flexible! While we provide a powerful SDK at the core, writing code is optional.</Tip>

***

## Why Stably?

* <Icon icon="search" /> **More Coverage** — test dynamic UX like charts, graphs, and canvases that static assertions miss.
* <Icon icon="layer-group" /> **Built to Scale** — run and autofix hundreds of tests at once with parallel cloud browsers and agents.
* <Icon icon="shield-check" /> **Fewer Flakes** — auto-heal and caching keep suites green and deterministic.
* <Icon icon="zap" /> **Faster Authoring** — create tests faster with AI-assisted authoring and repair.
* <Icon icon="pen-to-square" /> **Edit Your Way** — use our web editor, interactive CLI, or your favorite IDE.
* <Icon icon="infinity" /> **No Limits** — powered by real code, so you're never constrained like other no-code platforms.
* <Icon icon="code-branch" /> **Native Git** — built-in version control, not a workaround bolted on top.

### Trusted by Builders

Backed by **Y Combinator** and **▲ Vercel Ventures**, Stably is used by hundreds of fast-growing teams.\
The founding team previously built infrastructure at **Google Chrome** and **Uber**.

***

## Next Step

<Card title="Quickstart" icon="rocket" href="/getting-started/quickstart" cta="Get started now">
  Ready to get started?
</Card>