Skip to main content

​
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

1

Clone the repository

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

Install and build

npm install
npm run build
3

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.
  1. Add your domain to Cloudflare
  2. Update worker/wrangler.toml:
[env.production]
routes = [
  { pattern = "panels.yourdomain.com/*", zone_name = "yourdomain.com" }
]
  1. Deploy: npm run deploy:cf
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
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/
4

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

1

Get access

Subscribe to Pro to get repository access.
2

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

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

Register or override panels at runtime: 
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 CDNCloudflare WorkersAWS S3 + CloudFront
SetupNone5 min15-30 min
MaintenanceWe handle itMinimalYou manage
UpdatesAutomaticManualManual
LatencyGlobal edgeGlobal edgeYour regions
ControlLimitedFullFull
CostIncludedFree tier availablePay 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