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

# CDN

> Deploy Artifactuse panels to your own CDN

## Overview

By default, Artifactuse loads panels from our CDN. You can deploy panels to your own CDN for full control.

## Panels (Open Source)

Panels are open source and free to self-host.

**Included:**

* JSON Viewer
* SVG Viewer
* Diff Viewer
* HTML Preview
* React Preview
* Vue Preview
* Form Panel

### Setup

<Steps>
  <Step title="Clone the repository">
    ```bash theme={null}
    git clone https://github.com/artifactuse/panels.git
    cd panels
    ```
  </Step>

  <Step title="Install and build">
    ```bash theme={null}
    npm install
    npm run build
    ```
  </Step>

  <Step title="Deploy to your CDN">
    **Option A: Cloudflare Workers (Recommended)**

    Deploy to Cloudflare's edge network for low-latency global delivery.

    ```bash theme={null}
    # Install Wrangler CLI
    npm install -g wrangler

    # Login to Cloudflare
    wrangler login

    # Deploy
    npm run deploy:cf
    ```

    That's it! Your panels are now live on Cloudflare's edge network.

    <Accordion title="Custom Domain">
      1. Add your domain to Cloudflare
      2. Update `worker/wrangler.toml`:

      ```toml theme={null}
      [env.production]
      routes = [
        { pattern = "panels.yourdomain.com/*", zone_name = "yourdomain.com" }
      ]
      ```

      3. Deploy: `npm run deploy:cf`
    </Accordion>

    <Accordion title="Deployment Commands">
      ```bash theme={null}
      npm run deploy:cf              # Deploy to production
      npm run deploy:cf:staging      # Deploy to staging
      npm run cf:dev                 # Local development server
      ```
    </Accordion>

    ***

    **Option B: AWS S3 + CloudFront**

    ```bash theme={null}
    export CDN_BUCKET=your-s3-bucket
    export CDN_URL=https://cdn.yourdomain.com
    export CLOUDFRONT_DISTRIBUTION_ID=XXXXX  # Optional

    npm run deploy:aws
    ```

    <Accordion title="Manual S3 Deployment">
      Copy each panel's `dist/` folder to your CDN:

      ```bash theme={null}
      aws s3 sync packages/json-panel/dist s3://your-bucket/json-panel
      aws s3 sync packages/svg-panel/dist s3://your-bucket/svg-panel
      aws s3 sync packages/diff-panel/dist s3://your-bucket/diff-panel
      aws s3 sync packages/html-panel/dist s3://your-bucket/html-panel
      aws s3 sync packages/react-panel/dist s3://your-bucket/react-panel
      aws s3 sync packages/vue-panel/dist s3://your-bucket/vue-panel
      aws s3 sync packages/form-panel/dist s3://your-bucket/form-panel
      ```
    </Accordion>

    ***

    Your CDN structure should look like:

    ```
    https://cdn.yourdomain.com/
    ├── json-panel/
    ├── svg-panel/
    ├── diff-panel/
    ├── html-panel/
    ├── react-panel/
    ├── vue-panel/
    └── form-panel/
    ```
  </Step>

  <Step title="Configure the SDK">
    Point the SDK to your CDN:

    ```javascript theme={null}
    provideArtifactuse({
      cdnUrl: 'https://cdn.yourdomain.com',
    })
    ```
  </Step>
</Steps>

## Studio Panels (Pro)

Studio panels (Canvas Editor, Video Editor, Code Runtime) are available for Pro customers.

**Included:**

* Canvas Editor
* Video Editor
* Code Runtime (JavaScript & Python)

### Setup

<Steps>
  <Step title="Get access">
    [Subscribe to Pro](https://artifactuse.com/pricing) to get repository access.
  </Step>

  <Step title="Clone, build, deploy">
    Same process as panels:

    ```bash theme={null}
    git clone https://github.com/artifactuse/studio.git
    cd studio
    npm install
    npm run build
    ```

    **Option A: Cloudflare Workers (Recommended)**

    ```bash theme={null}
    wrangler login
    npm run deploy:cf
    ```

    **Option B: AWS S3**

    ```bash theme={null}
    export CDN_BUCKET=your-s3-bucket
    export CDN_URL=https://cdn.yourdomain.com

    npm run deploy:aws
    ```

    Your CDN structure should include:

    ```
    https://cdn.yourdomain.com/
    ├── editor-panel/
    │   ├── canvas/
    │   └── video/
    └── code-panel/
    ```
  </Step>

  <Step title="Configure the SDK">
    ```javascript theme={null}
    provideArtifactuse({
      cdnUrl: 'https://cdn.yourdomain.com',
    })
    ```
  </Step>
</Steps>

## Configuration

### CDN URL

```javascript theme={null}
// Vue
provideArtifactuse({
  cdnUrl: 'https://cdn.yourdomain.com',
})

// React
<ArtifactuseProvider config={{
  cdnUrl: 'https://cdn.yourdomain.com',
}}>

// Svelte
setArtifactuseContext({
  cdnUrl: 'https://cdn.yourdomain.com',
})
```

### Custom Panel Mapping

You can add, override, or disable specific panels without changing the base CDN:

```javascript theme={null}
provideArtifactuse({
  // Base CDN for most panels
  cdnUrl: 'https://cdn.yourdomain.com',
  
  // Custom panel configuration
  panels: {
    // Add new panel type
    'chart': 'chart-panel',
    
    // Override specific panel with different CDN
    'video': 'https://video-cdn.example.com/editor-panel/video',
    
    // Explicit path + CDN
    'diagram': { path: 'diagram-panel', cdn: 'https://diagrams.example.com' },
    
    // Disable a panel
    'canvas': null,
  }
})
```

### Mixed CDN Example

Use different CDNs for different panels:

```javascript theme={null}
provideArtifactuse({
  // Default CDN for most panels
  cdnUrl: 'https://cdn.yourdomain.com',
  
  panels: {
    // Video from specialized CDN
    'video': 'https://video-cdn.example.com/editor-panel/video',
    'videoeditor': 'https://video-cdn.example.com/editor-panel/video',
    
    // Charts from another CDN
    'chart': { path: 'chart-panel', cdn: 'https://charts.example.com' },
    
    // Code execution from secure CDN
    'javascript': 'https://sandbox.example.com/code-panel',
    'python': 'https://sandbox.example.com/code-panel',
  }
})
```

### Runtime Panel Registration

Register or override panels at runtime:

```javascript theme={null}
const { registerPanel, unregisterPanel } = useArtifactuse();

// Register with aliases
registerPanel(['python', 'py'], 'https://sandbox.example.com/code-panel');

// Disable panels
unregisterPanel(['canvas', 'whiteboard', 'drawing']);
```

### Version Pinning

Pin to a specific version for stability:

```javascript theme={null}
provideArtifactuse({
  cdnUrl: 'https://cdn.yourdomain.com/v1.2.3',
})
```

### CORS

If your CDN is on a different domain, ensure CORS headers are configured:

```
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS
```

<Note>
  Cloudflare Workers automatically handles CORS headers. No additional configuration needed.
</Note>

## Comparison

|             | Artifactuse CDN | Cloudflare Workers  | AWS S3 + CloudFront |
| ----------- | --------------- | ------------------- | ------------------- |
| Setup       | None            | 5 min               | 15-30 min           |
| Maintenance | We handle it    | Minimal             | You manage          |
| Updates     | Automatic       | Manual              | Manual              |
| Latency     | Global edge     | Global edge         | Your regions        |
| Control     | Limited         | Full                | Full                |
| Cost        | Included        | Free tier available | Pay per usage       |

## Next Steps

<CardGroup cols={2}>
  <Card title="Panels" icon="github" href="https://github.com/artifactuse/panels">
    Clone the open source repository
  </Card>

  <Card title="Custom Panels" icon="puzzle" href="/docs/customization/panels">
    Learn how to build custom panels
  </Card>

  <Card title="Pro Panels" icon="sparkles" href="https://artifactuse.com/pricing">
    Get access to Studio panels
  </Card>
</CardGroup>