HTML
Input
MDX
```html live<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Title</title></head><body><h1>I'm a playground!</h1><p>Edit me, and see the changes below.</p></body></html>```
Output
Code Playground
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Title</title></head><body><h1>I'm a playground!</h1><p>Edit me, and see the changes below.</p></body></html>
React
Input
MDX
```jsx live title="Counter.jsx"function Counter() {const [count, setCount] = useState(0)return (<><p>count: {count}</p><div style={{ display: 'flex', gap: 10 }}><button onClick={() => setCount(count + 1)}>increase</button><button onClick={() => setCount(count - 1)}>decrease</button></div></>)}```
Output
Counter.jsx
function Counter() {const [count, setCount] = useState(0)console.log('count')return (<><p>count: {count}</p><div style={{ display: 'flex', gap: 10 }}><button onClick={() => setCount(count + 1)}>increase</button><button onClick={() => setCount(count - 1)}>decrease</button></div></>)}