React Playground

Write JSX with hooks and state on the left. The component renders in the preview as you edit.

⚛️

React Editor

JSX · live preview

JSX Code

React 18Babel

function App() {
  const [count, setCount] = React.useState(0);

return (
    <div style={{
      maxWidth: 420,
      margin: '2rem auto',
      padding: '2rem',
      borderRadius: 16,
      background: 'linear-gradient(135deg, #e8f5fc, #fae8f7)',
      border: '1px solid rgba(13, 137, 197, 0.2)',
      textAlign: 'center',
      fontFamily: 'system-ui, sans-serif',
    }}>
      <h1 style={{
        margin: '0 0 0.5rem',
        fontSize: '1.75rem',
        background: 'linear-gradient(135deg, #0d89c5, #d667cd)',
        WebkitBackgroundClip: 'text',
        WebkitTextFillColor: 'transparent',
      }}>React Playground</h1>
      <p style={{ color: '#475569', marginBottom: '1.25rem' }}>
        You clicked {count} {count === 1 ? 'time' : 'times'}
      </p>
      <button
        onClick={() => setCount(count + 1)}
        style={{
          padding: '0.65rem 1.5rem',
          border: 'none',
          borderRadius: 10,
          background: '#0d89c5',
          color: 'white',
          fontSize: '1rem',
          fontWeight: 600,
          cursor: 'pointer',
        }}
      >
        Click me
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Preview

preview://localhost/react