Changelog

​

New Features

• Console capture — HTML artifacts now capture console.log, console.warn, console.error, console.info, and uncaught exceptions from user code.
• Console footer — A collapsible console footer appears in the panel when log entries exist. Auto-expands when an error is captured.
• Log type filters — Clickable filter chips in the console header let you show/hide entries by type (error, warn, info, log).
• console:log event — Listen for console output from artifacts to send errors back to your AI agent for auto-fixing.

​

New Config Options

provideArtifactuse({
  consolePanel: true, // Show console footer (default: true)
})

​

New Events

const { on } = useArtifactuse()

on('console:log', ({ artifactId, entry }) => {
  // entry: { type: 'log'|'warn'|'error'|'info', content: string, timestamp: number, stack?: string }
  if (entry.type === 'error') {
    // Send error back to AI for auto-fix
  }
})

​

Documentation

• Added Console Output section to Code artifacts page

​

New Features

• Multi-tab mode — Open multiple artifacts as tabs, like a code editor. Switch between tabs, close individually, and each tab remembers its own view mode. Opt-in via multiTab: true in config.

​

New Config Options

provideArtifactuse({
  multiTab: true,
})

​

New Methods

​

How It Works

• Clicking an artifact card or using openFile() / openCode() opens the artifact in a new tab (or focuses it if already open)
• Each tab preserves its own view mode (preview, code, split, edit)
• Closing the active tab switches to the adjacent tab
• The old prev/next navigation is hidden when multi-tab is active
• When disabled (default), the existing single-artifact behavior is unchanged

​

Documentation

• Added Multi-Tab section to ArtifactusePanel page

​

New Features

• panelWidth config & prop — Set the initial panel width as a percentage (25–75). Configurable globally or per-component. Users can still drag to resize.
• splitPosition config & prop — Set the initial split view position as a percentage (20–80). Configurable globally or per-component.

​

New Config Options

provideArtifactuse({
  panelWidth: 50,
  splitPosition: 60,
})

​

New Component Props

​

Documentation

• Added Props section to ArtifactusePanel page
• Updated Theming with layout config options

​

All Panels Are Now Free

​

What changed

• Canvas Editor — previously Pro, now free
• Video Editor — previously Pro, now free
• Code Runtime (JavaScript & Python) — previously Pro, now free
• All panels can be self-hosted without restrictions

​

New pricing model

​

Why

​

New Features

• CSV/TSV Spreadsheet Panel - New sheet-panel renders CSV and TSV data in an interactive spreadsheet powered by jspreadsheet-ce. Auto-detects delimiters (comma, tab, pipe, semicolon). Cells are editable with auto-save back to the artifact.

​

Supported Languages

​

Documentation

• Added CSV / TSV section to Code artifacts page
• Updated panel README with sheet-panel docs

​

New Features

• excludeLanguages - Exclude specific languages from inline preview when using languages: true. Excluded languages fall back to artifact cards.

​

New Config Options

provideArtifactuse({
  inlinePreview: {
    languages: true,
    excludeLanguages: ['typescript', 'go'],
  },
})

​

Documentation

• Added Exclude Languages section

​

New Features

• Inline Code Preview - Code artifacts now show a truncated syntax-highlighted preview directly in the message instead of a plain card. Click to open in panel. Configurable per language.
• Smart Diff (smartdiff) - New language identifier for structured JSON diffs ({oldCode, newCode, language}). Uses the actual language grammar for syntax highlighting with red/green line backgrounds for deletions/insertions.
• Standard diff preserved - ```diff blocks now render normally with Prism’s built-in diff grammar, separate from the structured JSON format.
• Inline Code (inlineCode) - Show full syntax-highlighted code directly in the message without extraction or panel. Code stays as normal <pre><code> blocks.
• Component-Level Config - All config options (inlinePreview, inlineCode, tabs, viewMode, inlineCards) now work as both global config and per-message component props with clean precedence: component prop → global config → default.
• Global tabs & viewMode - Control visible panel tabs and initial view mode globally or per-message.
• minClickableLines - Disable clicking on short inline previews where the panel adds no value. Supports ignoreLanguages to exempt previewable languages (HTML, markdown).
• actionLabel - Customize the fade overlay label per language (e.g., “Open preview” for HTML, “Open document” for markdown).

​

New Config Options

provideArtifactuse({
  inlinePreview: {
    maxLines: 15,
    languages: ['smartdiff', 'html', 'javascript'],
    minClickableLines: { lines: 10, ignoreLanguages: ['html', 'markdown'] },
    actionLabel: { html: 'Open preview', default: 'View full code' },
  },
  inlineCode: {
    languages: ['css', 'bash', 'sql'],
  },
  inlineCards: true,
  tabs: ['preview', 'code'],
  viewMode: 'preview',
})

​

New Component Props

​

Documentation

• Added Smart Diff section to Code artifacts page
• Added Inline Code, Tabs & View Mode, and Config Precedence sections
• Updated Inline Code Preview with per-message override examples
• Updated panel mappings to include smartdiff
• Added Non-Clickable Short Code and Custom Action Labels sections

​

New Features

• updateFile() — Update an existing artifact’s code and refresh the panel in place, without creating duplicate tabs. Accepts the artifact object (returned by openFile) or an artifact ID string.

​

New Methods

// Open a file — keep reference
const artifact = openFile('app.html', code, { panelUrl: '...' });

// Later — update in place (same tab, iframe reloads)
updateFile(artifact, newCode);
updateFile(artifact.id, newCode, { panelUrl: newUrl });

​

New Events

​

Documentation

• Added updateFile section to Code artifacts page
• Updated all framework guides with updateFile in API listings
• Updated Panel component with updateFile example

​

New Features

• openFile() / openCode() - Open artifacts programmatically without processing AI messages. openFile auto-detects language from the file extension, openCode accepts an explicit language
• Tab Filtering - Control which view mode tabs are visible with the tabs option: ['preview', 'code', 'split', 'edit']
• Edit Tab - In-panel code editor powered by CodeMirror 6 with syntax highlighting for 18+ languages. Users provide CodeMirror modules via the editor config option
• clearArtifacts() - Remove all artifacts and close the panel
• panelUrl Option - Pass a custom iframe URL to openFile/openCode to bypass the panel registry for one-off custom viewers
• Plain Text Fallback - Unknown file extensions automatically fall back to txt type, rendered in the code panel as plain text

​

New Methods

​

New Events

​

New Config Options

provideArtifactuse({
  // CodeMirror 6 integration for the edit tab (optional)
  editor: {
    modules: {
      state: cmState,             // @codemirror/state
      view: cmView,               // @codemirror/view
      commands: cmCommands,        // @codemirror/commands
      language: cmLanguage,        // @codemirror/language
      autocomplete: cmAutocomplete,// @codemirror/autocomplete
      langJavascript: cmLangJavascript, // @codemirror/lang-javascript (optional)
      langPython: cmLangPython,    // @codemirror/lang-python (optional)
      lezerHighlight: lezerHighlight,   // @lezer/highlight (optional)
    },
    theme: 'dark', // 'dark' | 'light' | 'auto'
  },
})

​

Documentation

• Added Programmatic API section to Code artifacts page
• Added Edit Tab setup guide with CodeMirror configuration
• Updated all framework guides with openFile, openCode, clearArtifacts, and edit:save
• Updated Panel component with edit view mode and tab filtering
• Added txt to default panels list

​

New Features

• Cloudflare Workers Deployment - Deploy panels to Cloudflare’s edge network with a single command
• Simplified Self-Hosting - New npm run deploy:cf command for instant global deployment
• Automatic CORS - Cloudflare Worker handles CORS headers automatically

​

New Deployment Commands

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

​

Quick Start

# Clone panels repo
git clone https://github.com/artifactuse/panels.git
cd panels

# Install and deploy
npm install
wrangler login
npm run deploy:cf

​

Documentation

• Updated CDN page with Cloudflare Workers as recommended option
• Added deployment comparison table (Artifactuse CDN vs Cloudflare vs AWS)
• Added custom domain configuration guide

​

New Features

• Configurable Panels - Add, override, or disable panels via configuration without modifying SDK source code
• Runtime Panel Registration - Register and unregister panels at runtime with registerPanel() and unregisterPanel()
• Array Type Support - Register multiple types/aliases at once: registerPanel(['python', 'py'], 'code-panel')
• Mixed CDN Support - Use different CDNs for different panel types

​

New Config Options

provideArtifactuse({
  // Panel configuration
  panels: {
    'chart': 'chart-panel',                    // Add new panel (uses cdnUrl)
    'video': 'https://my-cdn.com/video-panel', // Full URL override
    'diagram': { path: 'panel', cdn: '...' },  // Explicit CDN
    'canvas': null,                             // Disable panel
  }
})

​

New Methods

​

New Computed/Stores

​

React Hook

const { register, unregister, isRegistered, types } = usePanelRegistry();

​

Documentation

• Added Panels configuration guide
• Updated CDN page with panel configuration options
• Updated README with Panels section

​

New Features

• Media Lightbox - Images and PDFs now open in a fullscreen viewer with zoom, download, and keyboard controls
• Typing Indicator - New typing prop on ArtifactuseAgentMessage for streaming responses
• Modular CSS - Styles split into 19 files for tree-shaking and easier maintenance

​

Breaking Changes

• Form buttons structure - Buttons now use data.fields array with type: "button" instead of data.buttons

// Before (no longer supported)
{
  "variant": "buttons",
  "data": {
    "buttons": [
      {"id": "yes", "label": "Yes", "style": "primary"}
    ]
  }
}

// After
{
  "variant": "buttons",
  "data": {
    "fields": [
      {"type": "button", "id": "yes", "label": "Yes", "style": "primary"}
    ]
  }
}

​

New Events

• media-open - Fired when image/PDF opens in lightbox viewer

​

Documentation

• Added dedicated component pages for ArtifactuseAgentMessage, ArtifactusePanel, ArtifactusePanelToggle
• Added modular CSS imports guide to Theming page
• Added Custom Panels page with framework-agnostic development guide
• Added PANEL_URL_MAP extension documentation for custom panel registration

​

Features

• Canvas Artifacts - Create graphics, banners, logos, diagrams
• Video Artifacts - Timeline-based video editing with effects and transitions
• Code Artifacts - HTML, React, Vue, JavaScript, Python with live preview
• Form Artifacts - Interactive forms, wizards, button groups
• Social Artifacts - Twitter, LinkedIn, Instagram, Facebook previews

​

Framework Support

• React 18+
• Vue 3 (and Vue 2 with @vue/composition-api)
• Svelte 4+
• Vanilla JavaScript

​

Packages

• artifactuse - Core SDK
• @artifactuse/prompts - AI system prompts
• @artifactuse/panels - CDN panel renderers