Vanilla JS

Installation

npm install artifactuse

Setup

import { createArtifactuse } from 'artifactuse'
import 'artifactuse/styles'

const artifactuse = createArtifactuse({
  theme: 'dark',
  // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
})

Syntax Highlighting (Optional)

For code syntax highlighting, add Prism.js:

import Prism from 'prismjs'
import 'prismjs/components/prism-javascript'
import 'prismjs/components/prism-python'
import 'prismjs/themes/prism-tomorrow.css' // or any theme

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" />

API

processMessage

Process AI content and extract artifacts:

const content = `
Here's a banner:

\`\`\`canvas
{
  "width": 800,
  "height": 400,
  "backgroundColor": "#1a1a2e",
  "shapes": [
    {"type": "text", "x": 400, "y": 200, "text": "Hello", "fontSize": 48, "color": "#fff", "align": "center"}
  ]
}
\`\`\`
`

const { html, artifacts } = artifactuse.processMessage(content)
document.getElementById('message').innerHTML = html

openArtifact

Open an artifact in the panel:

artifactuse.openArtifact(artifacts[0])

Panel Methods

artifactuse.openPanel()       // Opens panel in empty "viewer" state
artifactuse.closePanel()      // Close panel
artifactuse.togglePanel()     // Toggle panel open/closed
artifactuse.toggleFullscreen()
artifactuse.setViewMode('preview') // 'preview' | 'code' | 'split' | 'edit'

openPanel() opens the panel with no artifact selected, showing an “Artifact Viewer” header and a prompt to open an artifact. When an artifact is subsequently opened (via openArtifact(), openFile(), or openCode()), the empty state is automatically cleared.

openFile / openCode

Open artifacts programmatically without processing AI message content:

// Open file — auto-detects language from extension
artifactuse.openFile('app.jsx', code)
artifactuse.openFile('utils.py', code, { title: 'My Utils' })

// Open code — explicit language
artifactuse.openCode(code, 'javascript', { title: 'My Script' })

// With tab filtering
artifactuse.openFile('main.js', code, {
  tabs: ['code', 'edit'],    // Only show code and edit tabs
  viewMode: 'edit',           // Start in edit mode
  externalPreview: true,      // Show "Open in new tab" button
})

// Clear all artifacts
artifactuse.clearArtifacts()

updateFile

const artifact = artifactuse.openFile('app.html', code, { panelUrl: '...' })

// Later — update in place, refresh iframe
artifactuse.updateFile(artifact, newCode)
artifactuse.updateFile(artifact.id, newCode, { panelUrl: newUrl })

Theme

artifactuse.setTheme('dark')
artifactuse.setTheme('light')

const theme = artifactuse.getTheme()

Events

artifactuse.on('ai:request', async ({ prompt, context, requestId }) => {
  const response = await yourAI.chat(prompt)
})

artifactuse.on('form:submit', ({ formId, values }) => {
  console.log('Form submitted:', values)
})

artifactuse.on('social:copy', ({ platform, text }) => {
  console.log('Copied:', platform, text)
})

artifactuse.on('save:request', ({ artifactId, data }) => {
  await saveToCloud(artifactId, data)
})

artifactuse.on('export:complete', ({ artifactId, blob, filename }) => {
  download(blob, filename)
})

artifactuse.on('edit:save', ({ artifactId, artifact, code }) => {
  console.log('Code saved:', code)
})

// Panel lifecycle events
artifactuse.on('panel:opened', () => {
  console.log('Panel opened')
})

artifactuse.on('panel:closed', () => {
  console.log('Panel closed')
})

artifactuse.on('panel:toggled', ({ isOpen }) => {
  console.log('Panel toggled:', isOpen)
})

Rendering

Render to Element

// Render artifacts to a container
artifactuse.render('#app', content)

Manual Rendering

const { html, artifacts } = artifactuse.processMessage(content)

// Render message HTML
document.getElementById('message').innerHTML = html

// Render panel
artifactuse.renderPanel('#panel')

// Render toggle button
artifactuse.renderToggle('#toggle')

State

// Get state
const state = artifactuse.getState()

// Reactive state (if using a reactive library)
const { 
  activeArtifact,
  artifactCount,
  hasArtifacts,
  isPanelOpen,
  isFullscreen,
  viewMode
} = artifactuse.state

Full Example

<!DOCTYPE html>
<html>
<head>
  <title>Artifactuse Vanilla JS</title>
  <!-- Optional: Prism.js for syntax highlighting -->
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/prismjs@1/components/prism-javascript.min.js"></script>
  <link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism-tomorrow.css" rel="stylesheet" />
  <style>
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow: hidden;
    }
    
    .app-container {
      display: flex;
      height: 100%;
      overflow: hidden;
    }
    
    .chat {
      flex: 1;
      padding: 20px;
      min-width: 0;
      overflow-y: auto;
    }
  </style>
</head>
<body>
  <div class="app-container">
    <div class="chat" id="chat">
      <div id="toggle"></div>
    </div>
    <div id="panel"></div>
  </div>

  <script type="module">
    import { createArtifactuse } from 'artifactuse'
    import 'artifactuse/styles'
    
    const artifactuse = createArtifactuse({
      theme: 'dark',
      // branding: true, // Set to false to hide "Powered by Artifactuse" (requires license)
    })
    
    // Listen for events
    artifactuse.on('form:submit', ({ formId, values }) => {
      console.log('Form submitted:', values)
    })
    
    artifactuse.on('ai:request', async ({ prompt, context }) => {
      const response = await fetch('/api/chat', {
        method: 'POST',
        body: JSON.stringify({ prompt, context })
      })
      return response.json()
    })
    
    // Process and render messages
    const content = await fetchAIResponse()
    const { html, artifacts } = artifactuse.processMessage(content)
    
    document.getElementById('chat').insertAdjacentHTML('afterbegin', html)
    artifactuse.renderPanel('#panel')
    artifactuse.renderToggle('#toggle')
  </script>
</body>
</html>

Configuration

const artifactuse = createArtifactuse({
  // Theme
  theme: 'dark', // 'dark' | 'light' | 'auto'
  
  // Show "Powered by Artifactuse" branding in panel footer
  // Set to false to hide (requires paid license)
  branding: true,
  
  // CDN URL for panel artifacts (optional)
  // Defaults to https://cdn.artifactuse.com
  // Set only if self-hosting panels
  // cdnUrl: 'https://cdn.yourdomain.com',
  
  // Custom colors
  colors: {
    primary: '#6366f1',
    background: '#111827',
    surface: '#1f2937',
    text: '#f3f4f6',
  },
  
  // Enable/disable processors
  processors: {
    codeBlocks: true,
    images: true,
    videos: true,
    audio: true,
    maps: true,
    social: true,
    documents: true,
  },

  // Show "Open in new tab" button in panel header (default: false)
  // externalPreview: false,

  // Code Editor (Optional) — CodeMirror 6 for edit tab
  // See: /artifacts/code#edit-tab
  editor: {
    modules: { /* CodeMirror module imports */ },
    theme: 'dark', // 'dark' | 'light' | 'auto'
  },
})

Getting Started

Frameworks

Components

Artifacts

AI Prompts

Customization

Installation

Setup

Syntax Highlighting (Optional)

API

processMessage

openArtifact

Panel Methods

openFile / openCode

updateFile

Theme

Events

Rendering

Render to Element

Manual Rendering

State

Full Example

Configuration

​Installation

​Setup

​Syntax Highlighting (Optional)

​API

​processMessage

​openArtifact

​Panel Methods

​openFile / openCode

​updateFile

​Theme

​Events

​Rendering

​Render to Element

​Manual Rendering

​State

​Full Example

​Configuration

Installation

Setup

Syntax Highlighting (Optional)

API

processMessage

openArtifact

Panel Methods

openFile / openCode

updateFile

Theme

Events

Rendering

Render to Element

Manual Rendering

State

Full Example

Configuration