Skip to main content

​
Overview

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

​
Supported Languages

​
Code Previews 🆓

LanguageCode BlockFeatures
HTML```htmlLive preview in iframe
React/JSX```jsxLive component preview
Vue```vueSFC with preview
JSON```jsonTree view, formatting
SVG```svgLive preview
Diff```diffSide-by-side view

​
Code Runtime ⭐ Pro

LanguageCode BlockFeatures
JavaScript```javascriptExecution, console output
Python```pythonPyodide execution
⭐ Code Runtime (JavaScript & Python execution) requires a Pro subscription. Code Previews are free.

​
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 ⭐ Pro

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 ⭐ Pro

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>

​
Diff

--- a/config.js
+++ b/config.js
@@ -1,5 +1,6 @@
 module.exports = {
   name: 'my-app',
-  version: '1.0.0',
+  version: '1.1.0',
+  author: 'John Doe',
 }
Shows additions (green) and deletions (red) with side-by-side view option.