LiveCodeEditor

livecodeeditor-1779394025938.tsx

'use client'
import { useState } from 'react'

const DEFAULT = `<div style="padding:20px;background:linear-gradient(135deg,#6d28d9,#2563eb);borderRadius:12px;color:#fff;textAlign:center">
  <h2>Live Preview ✨</h2>
  <p>Edit the code on the left!</p>
</div>`

export default function LiveCodeEditor() {
  const [code, setCode] = useState(DEFAULT)
  return (
    <div style={{ display:'flex', gap:'16px', height:'300px', maxWidth:'700px' }}>
      <div style={{ flex:1, display:'flex', flexDirection:'column', gap:'8px' }}>
        <div style={{ fontSize:'12px', fontWeight:700, color:'#64748b', textTransform:'uppercase', letterSpacing:'0.05em' }}>Code</div>
        <textarea
          value={code}
          onChange={e => setCode(e.target.value)}
          style={{
            flex:1, background:'#1e1e2e', color:'#e2e8f0', border:'1px solid #2d2d3d',
            borderRadius:'12px', padding:'14px', fontFamily:'monospace', fontSize:'12px',
            resize:'none', outline:'none', lineHeight:1.6,
          }}
        />
      </div>
      <div style={{ flex:1, display:'flex', flexDirection:'column', gap:'8px' }}>
        <div style={{ fontSize:'12px', fontWeight:700, color:'#64748b', textTransform:'uppercase', letterSpacing:'0.05em' }}>Preview</div>
        <div style={{
          flex:1, border:'2px solid #e2e8f0', borderRadius:'12px',
          padding:'14px', overflow:'auto', background:'#fff',
        }} dangerouslySetInnerHTML={{ __html: code }} />
      </div>
    </div>
  )
}

Component info

CategoryCode

Frameworkreact

TierFREE

Copies0

About

Live code editor with textarea input and rendered preview

More from Code

'use client'
import { useState } from 'react'

const EXAMPLES = {
  tsx: {
    label: 'TypeScript',
    code: `import { useState } from 'react'

interface ButtonProps {
  variant?: 'primary' | 'ghost'
  children: React.ReactNode
  onClick?: () => voi

CodeBlock

Code

'use client';
import { useState, useRef, useEffect } from 'react';

export default function TerminalPrompt() {
  const [history, setHistory] = useState([
    { type: 'output', text: 'Welcome to Empire Terminal v2.0.0' },
    { type: 'output', text: '

TerminalPrompt

Code

'use client'
import { useState } from 'react'

const SAMPLE = `import { GradientButton } from 'empire-ui'

export default function App() {
  return (
    <GradientButton
      label="Get Started"
      onClick={() => console.log('clicked')}
    />

CodeBlock

Code

'use client'
import { useState } from 'react'

const SAMPLE = { user:{ name:'Alice', role:'admin', active:true }, plan:'pro', components:17500, tags:['react','typescript','tailwind'] }

function JsonNode({ data, depth = 0 }) {
  const [open, setOpen]

JsonViewer

Code