Code

Overview

Code artifacts render syntax-highlighted code with live preview and execution.

Supported Languages

Code Previews

Language	Code Block	Features
HTML	```html	Live preview in iframe
React/JSX	```jsx	Live component preview
Vue	```vue	SFC with preview
JSON	```json	Tree view, formatting
SVG	```svg	Live preview
CSV	```csv	Spreadsheet viewer
TSV	```tsv	Spreadsheet viewer
Smart Diff	```smartdiff	Language-aware side-by-side diff

Code Runtime

Language	Code Block	Features
JavaScript	```javascript	Execution, console output
Python	```python	Pyodide execution

HTML

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: system-ui; padding: 2rem; }
    h1 { color: #6366f1; }
  </style>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

Renders in a sandboxed iframe. External CDNs allowed (Tailwind, etc.).

React / JSX

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div className="p-4 text-center">
      <div className="text-4xl mb-4">{count}</div>
      <button 
        onClick={() => setCount(c => c + 1)}
        className="px-4 py-2 bg-blue-500 text-white rounded"
      >
        Increment
      </button>
    </div>
  )
}

Available: React hooks, Tailwind CSS, Lucide icons, Recharts.

Vue

<template>
  <div class="counter">
    <button @click="count++">Count: {{ count }}</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<style scoped>
.counter { padding: 1rem; }
</style>

JavaScript

async function fetchData() {
  const response = await fetch('https://api.example.com/data')
  const data = await response.json()
  console.log(data)
}

fetchData()

Console output (log, warn, error) is captured and displayed.

Python

import numpy as np
import pandas as pd

data = {'name': ['Alice', 'Bob'], 'age': [25, 30]}
df = pd.DataFrame(data)
print(df)

Runs via Pyodide. Available: numpy, pandas, scipy, scikit-learn, matplotlib.

JSON

{
  "user": {
    "id": 12345,
    "name": "Jane Smith",
    "roles": ["admin", "editor"]
  }
}

Features: tree view, collapse/expand, search, JSONPath.

SVG

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="100" cy="100" r="80" fill="#6366f1"/>
  <text x="100" y="110" text-anchor="middle" fill="white" font-size="24">SVG</text>
</svg>

CSV / TSV

Name,Department,Salary,Start Date,City
Alice Johnson,Engineering,95000,2023-01-15,San Francisco
Bob Smith,Marketing,72000,2022-06-01,New York
Carol Williams,Engineering,105000,2021-03-22,Seattle

Renders in an interactive spreadsheet. Auto-detects delimiter (comma, tab, pipe, semicolon). Cells are editable — changes are saved back to the artifact automatically. Use tsv for tab-separated data:

Name	Score	Grade
Alice	95	A
Bob	82	B
Carol	91	A

Smart Diff

Use smartdiff for structured diffs with language-aware syntax highlighting:

{
  "oldCode": "function greet(name) {\n  return 'Hello ' + name;\n}",
  "newCode": "function greet(name) {\n  return `Hello ${name}!`;\n}",
  "language": "javascript"
}

Each line is highlighted using the actual language grammar (e.g., JavaScript keywords, strings) with red/green backgrounds for deleted/inserted lines. The diff panel shows side-by-side or unified view.

Field	Type	Description
`oldCode`	`string`	Original code
`newCode`	`string`	Updated code
`language`	`string`	Language for syntax highlighting (e.g., `javascript`, `python`)

Plain Text

Files with unknown extensions automatically fall back to plain text rendering in the code panel:

key = value
host = localhost
port = 3000

[section]
enabled = true

Supported via the txt panel type. This means any file type can be opened — if no specific panel exists for the language, it renders as plain text with the code viewer.

Programmatic API

Open code artifacts directly without processing AI message content.

openFile

Auto-detects language from the file extension:

const { openFile } = useArtifactuse()

// Opens as JSX (React panel)
openFile('App.jsx', reactCode)

// Opens as Python (code panel)
openFile('utils.py', pythonCode, { title: 'My Utils' })

// Opens as plain text (unknown extension)
openFile('config.ini', configContent)

openCode

Specify the language explicitly:

const { openCode } = useArtifactuse()

openCode(jsCode, 'javascript')
openCode(htmlCode, 'html', { title: 'My Page' })

updateFile

Updates an existing artifact’s code and refreshes the panel without creating a duplicate tab:

const { openFile, updateFile } = useArtifactuse()

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

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

Options

Both methods accept an options object:

Option	Type	Description
`title`	`string`	Display title (defaults to filename for `openFile`)
`tabs`	`string[]`	Visible tabs: `'preview'`, `'code'`, `'split'`, `'edit'`
`viewMode`	`string`	Initial view mode
`language`	`string`	Override language detection (`openFile` only)
`panelUrl`	`string`	Custom iframe URL (bypasses panel registry)
`externalPreview`	`boolean`	Show “Open in new tab” button in panel header
`consolePanel`	`boolean`	Show console footer for runtime logs/errors (default: `true`)

// Show only the code editor
openFile('app.js', code, { tabs: ['edit'] })

// Start in code view, allow preview and code tabs
openFile('page.html', html, { tabs: ['preview', 'code'], viewMode: 'code' })

// Load a custom panel URL in the iframe
openFile('data.csv', csvContent, {
  panelUrl: 'https://my-cdn.com/csv-viewer'
})

clearArtifacts

Remove all artifacts and close the panel:

const { clearArtifacts } = useArtifactuse()
clearArtifacts()

Edit Tab

The edit tab provides an in-panel code editor powered by CodeMirror 6. It’s optional — you must provide CodeMirror modules via config to enable it.

Setup

Install the required CodeMirror packages plus any language packages you need:

# Required
npm install @codemirror/state @codemirror/view @codemirror/commands \
  @codemirror/language @codemirror/autocomplete @lezer/highlight

# Language packages (add only the ones you need)
npm install @codemirror/lang-javascript @codemirror/lang-python \
  @codemirror/lang-html @codemirror/lang-css @codemirror/lang-json

Supported Language Packages

Module Key	Package	Languages
`langJavascript`	`@codemirror/lang-javascript`	JavaScript, JSX, TypeScript, TSX
`langPython`	`@codemirror/lang-python`	Python
`langHtml`	`@codemirror/lang-html`	HTML
`langCss`	`@codemirror/lang-css`	CSS
`langJson`	`@codemirror/lang-json`	JSON
`langMarkdown`	`@codemirror/lang-markdown`	Markdown
`langXml`	`@codemirror/lang-xml`	XML
`langYaml`	`@codemirror/lang-yaml`	YAML
`langSql`	`@codemirror/lang-sql`	SQL
`langJava`	`@codemirror/lang-java`	Java
`langCpp`	`@codemirror/lang-cpp`	C, C++
`langGo`	`@codemirror/lang-go`	Go
`langRust`	`@codemirror/lang-rust`	Rust
`langPhp`	`@codemirror/lang-php`	PHP
`langVue`	`@codemirror/lang-vue`	Vue SFC
`langAngular`	`@codemirror/lang-angular`	Angular templates
`langLess`	`@codemirror/lang-less`	Less
`langSass`	`@codemirror/lang-sass`	Sass, SCSS

Pass the modules in your SDK config:

Vue
React

<script setup>
import { provideArtifactuse } from 'artifactuse/vue'
import * as cmState from '@codemirror/state'
import * as cmView from '@codemirror/view'
import * as cmCommands from '@codemirror/commands'
import * as cmLanguage from '@codemirror/language'
import * as cmAutocomplete from '@codemirror/autocomplete'
import * as lezerHighlight from '@lezer/highlight'
// Import only the languages you need
import * as cmLangJavascript from '@codemirror/lang-javascript'
import * as cmLangPython from '@codemirror/lang-python'
import * as cmLangHtml from '@codemirror/lang-html'
import * as cmLangCss from '@codemirror/lang-css'
import * as cmLangJson from '@codemirror/lang-json'

provideArtifactuse({
  theme: 'dark',
  editor: {
    modules: {
      state: cmState,
      view: cmView,
      commands: cmCommands,
      language: cmLanguage,
      autocomplete: cmAutocomplete,
      lezerHighlight: lezerHighlight,
      langJavascript: cmLangJavascript,
      langPython: cmLangPython,
      langHtml: cmLangHtml,
      langCss: cmLangCss,
      langJson: cmLangJson,
    },
    theme: 'dark', // 'dark' | 'light' | 'auto'
  },
})
</script>

import { ArtifactuseProvider } from 'artifactuse/react'
import * as cmState from '@codemirror/state'
import * as cmView from '@codemirror/view'
import * as cmCommands from '@codemirror/commands'
import * as cmLanguage from '@codemirror/language'
import * as cmAutocomplete from '@codemirror/autocomplete'
import * as lezerHighlight from '@lezer/highlight'
// Import only the languages you need
import * as cmLangJavascript from '@codemirror/lang-javascript'
import * as cmLangPython from '@codemirror/lang-python'
import * as cmLangHtml from '@codemirror/lang-html'
import * as cmLangCss from '@codemirror/lang-css'
import * as cmLangJson from '@codemirror/lang-json'

<ArtifactuseProvider config={{
  theme: 'dark',
  editor: {
    modules: {
      state: cmState,
      view: cmView,
      commands: cmCommands,
      language: cmLanguage,
      autocomplete: cmAutocomplete,
      lezerHighlight: lezerHighlight,
      langJavascript: cmLangJavascript,
      langPython: cmLangPython,
      langHtml: cmLangHtml,
      langCss: cmLangCss,
      langJson: cmLangJson,
    },
    theme: 'dark',
  },
}}>
  <YourApp />
</ArtifactuseProvider>

Using the Edit Tab

Once configured, include 'edit' in the tabs array:

const { openFile } = useArtifactuse()

// Open with only the edit tab
openFile('app.js', code, { tabs: ['edit'] })

// Open with all tabs including edit
openFile('page.html', html, { tabs: ['preview', 'code', 'edit'] })

Handling Saves

When the user clicks the Save button in the edit tab, an edit:save event fires:

const { on } = useArtifactuse()

on('edit:save', ({ artifactId, artifact, code }) => {
  console.log('Updated code:', code)
  // Send back to your AI, save to database, etc.
})

Console Output

HTML artifacts capture console.log, console.warn, console.error, console.info, and uncaught exceptions from user code. A collapsible console footer appears in the panel when entries exist, auto-expanding on errors. The console header includes filter toggles for each log type (error, warn, info, log). Click a filter to hide/show entries of that type. Filters only appear when entries of that type exist. Listen for console events to send errors back to your AI agent:

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
  }
})

Set consolePanel: false in config or per-artifact options to hide the footer UI while still receiving events.

Editor Theme

The editor theme is independent of the SDK theme and controlled via editor.theme:

Value	Description
`'dark'`	Dark background (`#1e1e1e`) with light text (default)
`'light'`	White background with dark text
`'auto'`	Follows the SDK theme setting

Without the editor config, the edit tab button won’t appear — the feature degrades gracefully. Language modules (e.g. langJavascript, langPython, langHtml) and lezerHighlight are optional but recommended for syntax highlighting. Only include the language packages you need — languages without a matching module fall back to plain text editing.

Getting Started

Frameworks

Components

Artifacts

AI Prompts

Customization

Overview

Supported Languages

Code Previews

Code Runtime

HTML

React / JSX

Vue

JavaScript

Python

JSON

SVG

CSV / TSV

Smart Diff

Plain Text

Programmatic API

openFile

openCode

updateFile

Options

clearArtifacts

Edit Tab

Setup

Supported Language Packages

Using the Edit Tab

Handling Saves

Console Output

Editor Theme

Getting Started

Frameworks

Components

Artifacts

AI Prompts

Customization

​Overview

​Supported Languages

​Code Previews

​Code Runtime

​HTML

​React / JSX

​Vue

​JavaScript

​Python

​JSON

​SVG

​CSV / TSV

​Smart Diff

​Plain Text

​Programmatic API

​openFile

​openCode

​updateFile

​Options

​clearArtifacts

​Edit Tab

​Setup

​Supported Language Packages

​Using the Edit Tab

​Handling Saves

​Console Output

​Editor Theme

Overview

Supported Languages

Code Previews

Code Runtime

HTML

React / JSX

Vue

JavaScript

Python

JSON

SVG

CSV / TSV

Smart Diff

Plain Text

Programmatic API

openFile

openCode

updateFile

Options

clearArtifacts

Edit Tab

Setup

Supported Language Packages

Using the Edit Tab

Handling Saves

Console Output

Editor Theme