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

Clone the repository

git clone https://github.com/artifactuse/panels.git
cd panels

Install and build

npm install
npm run build

Deploy to your CDN

Option A: Cloudflare Workers (Recommended)Deploy to Cloudflare’s edge network for low-latency global delivery.

# 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.

Custom Domain

Add your domain to Cloudflare
Update worker/wrangler.toml:

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

Deploy: npm run deploy:cf

Deployment Commands

npm run deploy:cf              # Deploy to production
npm run deploy:cf:staging      # Deploy to staging
npm run cf:dev                 # Local development server

Option B: AWS S3 + CloudFront

export CDN_BUCKET=your-s3-bucket
export CDN_URL=https://cdn.yourdomain.com
export CLOUDFRONT_DISTRIBUTION_ID=XXXXX  # Optional

npm run deploy:aws

Manual S3 Deployment

Copy each panel’s dist/ folder to your CDN:

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

Your CDN structure should look like:

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

Configure the SDK

Point the SDK to your CDN:

provideArtifactuse({
  cdnUrl: 'https://cdn.yourdomain.com',
})

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

Get access

Subscribe to Pro to get repository access.

Clone, build, deploy

Same process as panels:

git clone https://github.com/artifactuse/studio.git
cd studio
npm install
npm run build

Option A: Cloudflare Workers (Recommended)

wrangler login
npm run deploy:cf

Option B: AWS S3

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/

Configure the SDK

provideArtifactuse({
  cdnUrl: 'https://cdn.yourdomain.com',
})

Configuration

CDN URL

// 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:

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:

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

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:

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

Cloudflare Workers automatically handles CORS headers. No additional configuration needed.

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

Panels

Clone the open source repository

Custom Panels

Learn how to build custom panels

Pro Panels

Get access to Studio panels

Getting Started

Frameworks

Components

Artifacts

AI Prompts

Customization

Overview

Panels (Open Source)

Setup

Studio Panels (Pro)

Setup

Configuration

CDN URL

Custom Panel Mapping

Mixed CDN Example

Runtime Panel Registration

Version Pinning

CORS

Comparison

Next Steps

Panels

Custom Panels

Pro Panels

​Overview

​Panels (Open Source)

​Setup

​Studio Panels (Pro)

​Setup

​Configuration

​CDN URL

​Custom Panel Mapping

​Mixed CDN Example

​Runtime Panel Registration

​Version Pinning

​CORS

​Comparison

​Next Steps

Panels

Custom Panels

Pro Panels

Overview

Panels (Open Source)

Setup

Studio Panels (Pro)

Setup

Configuration

CDN URL

Custom Panel Mapping

Mixed CDN Example

Runtime Panel Registration

Version Pinning

CORS

Comparison

Next Steps