Studio UI

apps/studio is a Next.js UI over @fabricorg/experiments-api-client.

Studio does not access the database directly. Server components and server actions forward the user cookie to apps/api, preserving a single auth and authorization boundary.

Organization model

Studio follows the same SaaS shape as the main Fabric app:

• Better Auth owns user and organization identity.
• New users create an organization at /app/new-organization.
• Organization routes are URL-scoped: /app/{orgSlug}/....
• Org switches redirect to the selected org URL.
• API calls resolve the org slug to an organization ID before making org-scoped requests.

Current surfaces

• sign up and login,
• first-run organization creation,
• organization switcher,
• experiment dashboard,
• drop-in install snippet generator,
• no-code experiment create/edit with Mojito-parity fields,
• generated spec preview,
• YAML import using the shared @fabricorg/experiments-yaml parser,
• experiment detail,
• lifecycle actions: submit for review, approve, start, pause, resume, conclude, kill,
• audit log,
• organization API key management,
• SAML settings route.

No-code experiment authoring

The authoring form builds an ExperimentSpec and submits domain actions through the hosted API. It supports beginner-friendly fields plus Mojito-parity controls for:

• sample rate and holdback,
• manual exposure,
• divert-to-variant,
• trigger DSL (auto, urlMatch, waitForSelector, event),
• variant payloads,
• recipe sample rate,
• declarative DOM operations,
• raw variant JS/CSS for advanced migrations,
• shared JS/CSS and metadata.

The form still shows the generated spec so teams can move between no-code Studio authoring and YAML/GitOps.

The authoring form submits domain actions through the hosted API:

• create uses experiment.create,
• edit uses experiment.update,
• lifecycle buttons use the corresponding experiment.* actions,
• updates publish the manifest after successful mutation.

Variant set changes are policy-protected after an experiment starts. The edit UI warns users about this before saving running, paused, or concluded experiments.

YAML import

The import page accepts one or more .yaml or .yml files. Files are parsed in the browser with the shared YAML package, then valid specs are sent to a server action.

Import behavior:

• if the experiment ID does not exist, Studio invokes experiment.create,
• if the experiment ID exists, Studio invokes experiment.update,
• after all imports succeed, Studio publishes the manifest and revalidates experiment/audit pages.

Install snippet

The /app/{orgSlug}/install page generates the customer drop-in snippet for marketing sites and GTM. It includes the tenant manifest URL and tag-loader URL, but does not include a preview secret. Studio preview links are short-lived JWTs signed by the API and verified in the browser with public JWKS.

API keys

Org admins can create and revoke hosted API keys from /app/{orgSlug}/settings.

API keys are intended for CLI and automation workflows such as:

fx push experiments/ --api-url https://api.example.com --api-key fx_key_... --tenant <orgId>

The plaintext key is shown exactly once on creation. Active keys show their prefix, creation time, and last-used timestamp.

SaaS alignment

Studio mirrors the important Fabric SaaS boundaries for customer adoption: Better Auth-owned users and organizations, URL-scoped organization context, explicit organization switching, cookie-forwarded server actions, org-scoped API keys, SAML settings, audit visibility, and product APIs around authorization.

The result is a focused experimentation UI rather than a generic admin console: customers can onboard, install the tag-loader, create or import experiments, preview variants, promote lifecycle states, and automate with API keys without leaving Studio.