```
## JavaScript
```javascript theme={null}
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
```python theme={null}
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
```json theme={null}
{
"user": {
"id": 12345,
"name": "Jane Smith",
"roles": ["admin", "editor"]
}
}
```
Features: tree view, collapse/expand, search, JSONPath.
## SVG
```svg theme={null}
```
## CSV / TSV
```csv theme={null}
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:
```tsv theme={null}
Name Score Grade
Alice 95 A
Bob 82 B
Carol 91 A
```
## Smart Diff
Use `smartdiff` for structured diffs with language-aware syntax highlighting:
```smartdiff theme={null}
{
"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:
```js theme={null}
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:
```js theme={null}
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:
```js theme={null}
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`) |
```js theme={null}
// 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:
```js theme={null}
const { clearArtifacts } = useArtifactuse()
clearArtifacts()
```
## Edit Tab
The edit tab provides an in-panel code editor powered by [CodeMirror 6](https://codemirror.net/). 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:
```bash theme={null}
# 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 theme={null}
```
```jsx theme={null}
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'
```
### Using the Edit Tab
Once configured, include `'edit'` in the `tabs` array:
```js theme={null}
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:
```js theme={null}
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:
```js theme={null}
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.