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

# Multi-site API architecture

> Each ButterCMS site has its own API token. Learn how to configure multi-site apps to fetch content from the correct site and enable draft mode on staging.

<Info>
  Review dashboard concepts first. See [Multisite Overview](../../create-content/multi-site-environments/multisite-overview).
</Info>

## API architecture

Each site and environment in ButterCMS has its own API configuration:

### API token structure

```
Site A (Production) → API Token: abc123...
Site A (Staging)    → API Token: def456...
Site A (Dev)        → API Token: ghi789...
Site B (Production) → API Token: jkl012...
```

### Making API calls

When fetching content, specify the appropriate API token for your target site/environment:

```javascript theme={null}
// Production site
const butterProd = Butter('your-production-api-token');

// Staging site
const butterStaging = Butter('your-staging-api-token');

// Fetch from specific environment
const prodPages = await butterProd.page.list('landing-page');
const stagingPages = await butterStaging.page.list('landing-page');
```

### Draft mode for staging

Use the `preview=1` parameter to fetch draft content on staging environments:

```javascript theme={null}
// Staging environment configuration
const response = await butter.page.retrieve('*', 'my-page', {
  preview: 1  // Include draft content
});
```