⚛️ Component Playground - Live React Editor

Auto-run code

📝 Code Editor React + JSX

// Welcome to React Component Playground!
// Start typing your React component below

function App() {
  const [count, setCount] = React.useState(0);
  const [name, setName] = React.useState('World');
  
  const handleIncrement = () => {
    setCount(count + 1);
    console.log('Count incremented to:', count + 1);
  };
  
  return (
    <div style={{ padding: '20px', fontFamily: 'Arial' }}>
      <h1 style={{ color: '#61dafb' }}>
        Hello, {name}! 👋
      </h1>
      
      <div style={{ marginBottom: '20px' }}>
        <input 
          type="text" 
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Enter your name"
          style={{
            padding: '10px',
            borderRadius: '6px',
            border: '2px solid #61dafb',
            fontSize: '16px'
          }}
        />
      </div>
      
      <div style={{ marginBottom: '20px' }}>
        <button 
          onClick={handleIncrement}
          style={{
            padding: '10px 20px',
            background: '#61dafb',
            color: '#282c34',
            border: 'none',
            borderRadius: '6px',
            fontSize: '16px',
            fontWeight: 'bold',
            cursor: 'pointer'
          }}
        >
          Clicked {count} times
        </button>
      </div>
      
      <p style={{ color: '#666' }}>
        Try editing this component and see the changes live!
      </p>
    </div>
  );
}

// Component will be rendered automatically
render(<App />);

👁️ Live Preview Ready

🖥️ Console Output

Console output will appear here...

📚 Component Templates

Counter

Simple counter with hooks

Form

Controlled form component

Todo List

Interactive todo app

API Fetch

Data fetching example

Timer

useEffect timer example

Context API

Theme context example

⌨️ Keyboard Shortcuts

Run code Ctrl + Enter

Format code Ctrl + Shift + F

Save code Ctrl + S