Code Editor
Code Editor
An editable code area with live syntax highlighting as you type, built with the classic transparent-textarea-over-pre technique. No editor library required.
Default
function greet(name) { // try editing me return `Hello, ${name}!`}function greet(name) { // try editing me return `Hello, ${name}!`}Title + line numbers
HelloWorld.tsx
1
2
3
4
5
6
export function HelloWorld() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>{count}</button>}HelloWorld.tsx
1
2
3
4
5
6
export function HelloWorld() { const [count, setCount] = useState(0) return <button onClick={() => setCount(count + 1)}>{count}</button>}npx shadcn add @ectopcoi-components/code-editor