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

# Preview

> How ACI provides instant preview for any combination of code and content without deploying anything.

Agentic Content Infrastructure (ACI) provides instant preview by **keeping warm code capsules running and swapping content on the fly.** Point a preview at a branch, and ACI renders that branch's content through its linked code, in seconds, without deploying anything.

## How ACI Avoids Preview Overhead

If you have 100 content workspaces and 10 code workspaces, the naive approach is 1,000 preview environments. That's what you get with "deploy a preview per workspace," a combinatorial explosion that's expensive, slow, and brittle.

ACI sidesteps this entirely. Instead of deploying preview environments, ACI keeps a small pool of **warm code capsules**, your compiled frontend code, ready to render. When someone requests a preview, ACI hands the capsule the right content and gets HTML back. No deployment. No CI/CD. No waiting.

## How It Works

```mermaid theme={null}
sequenceDiagram
    participant Editor
    participant Preview API
    participant Compiler
    participant Capsule Pool

    Editor->>Preview API: GET /v1/previews?branch=campaign-summer&page=/products/shoe-123
    Preview API->>Editor: 302 campaign-summer.preview.example.com/products/shoe-123
    Editor->>Preview API: GET campaign-summer.preview.example.com/products/shoe-123
    Preview API->>Compiler: Resolve route payload<br/>(branch content + code artifact manifest)
    Compiler->>Preview API: Validated payload
    Preview API->>Capsule Pool: Find warm capsule<br/>for feature/footer
    Capsule Pool->>Preview API: Rendered HTML
    Preview API->>Editor: Page preview (< 2s)
```

<Steps>
  <Step title="Request">
    The editor (or agent) requests a preview for a branch and page path.
  </Step>

  <Step title="JIT Compile">
    ACI resolves the branch, the linked code artifact, and the requested route payload. The preview path renders the requested route without staging or activating a release.
  </Step>

  <Step title="Find Capsule">
    ACI looks for a warm code capsule matching the branch's linked code artifact. If one exists, it's used immediately. If not, ACI materializes and starts one.
  </Step>

  <Step title="Render">
    The capsule renders the page with the compiled payload. The result is returned to the editor.
  </Step>
</Steps>

## Current URL Shape

```txt theme={null}
GET /v1/previews?branch=my-feature&page=/home
  -> 302 https://my-feature.<preview-base-host>/home

GET https://my-feature.<preview-base-host>/home
  -> resolve branch
  -> resolve /config/site.json codeArtifact
  -> serve static client asset or render route through the capsule
```

In local development, the preview base host defaults to a localhost preview host. Production deployments configure an explicit preview base host and scheme.

<Info>
  Branch names used in preview hostnames must be lowercase host-label-safe slugs: letters, numbers, and hyphens, with no leading or trailing hyphen.
</Info>

## Why It's Fast

<CardGroup cols={2}>
  <Card title="Content-Only Changes" icon="bolt">
    If the editor changes content and refreshes, the same warm capsule re-renders with the new content. No code rebuild. Sub-second response.
  </Card>

  <Card title="Code Changes" icon="code">
    If the editor switches to a different code workspace, ACI finds (or builds) the capsule for that version. First request is slower. Subsequent requests are instant.
  </Card>

  <Card title="Single-Route Compilation" icon="route">
    Preview compiles only the requested route, not the entire site. Even a 50,000-page site previews in under two seconds.
  </Card>

  <Card title="Warm Pool" icon="temperature-half">
    Recently-used capsules stay warm. Active development workspaces keep their capsules hot, so previews are always fast during editing sessions.
  </Card>
</CardGroup>

## M + N, Not M x N

The key insight: preview scales as **M capsules + N content snapshots**, not M x N preview environments.

If your team has 5 active code workspaces and 20 active content workspaces, a traditional setup needs up to 100 preview deployments. ACI keeps 5 warm capsules and serves all 20 content variations through them.

<Info>
  Preview never touches production. It doesn't create releases or update CDN routing. It's a completely separate, read-only path that renders over your existing branch and code-artifact state.
</Info>

## No Separate Environments Needed

Because any content snapshot can be paired with any code capsule, you get an effectively unlimited number of preview states without maintaining separate environments. No need for dedicated "dev", "staging", and "production" setups with their own content and code.

## What You Can Preview

Preview supports the full matrix of what editors and developers need to see:

* **Content workspace on production code**: "What does my draft look like with the current live site?"
* **Production content on a code workspace**: "What does the current site look like with my new component?"
* **Content workspace on a code workspace**: "What does my new content look like with the developer's new design?"
* **Any specific route**: Preview one page, not the whole site

***

*Next: [Agent-Native Design →](/aci/architecture/agent-native-design)*