Which version of React is loaded?

React 18.3

Online React Playground

Interactive React component playground with live state and styling preview. Write code with auto-formatting, test with standard input (stdin), and inspect terminal output in real-time.

✓ React 18 state & hooks (useState, useEffect, useMemo)✓ Live JSX compilation✓ Modern UI component simulation✓ Zero npm install setup

App.jsx

React 18.3

13px

// Online React Component Playground (ShortTrick)
function TodoApp() {
  const [todos, setTodos] = React.useState([
    { id: 1, text: "Learn React Hooks", done: true },
    { id: 2, text: "Build Online Compiler", done: true },
    { id: 3, text: "Deploy Production Platform", done: false }
  ]);
  const [input, setInput] = React.useState("");

const addTodo = (e) => {
    e.preventDefault();
    if (!input.trim()) return;
    setTodos([...todos, { id: Date.now(), text: input.trim(), done: false }]);
    setInput("");
  };

const toggleTodo = (id) => {
    setTodos(todos.map(t => t.id === id ? { ...t, done: !t.done } : t));
  };

return (
    <div style={{ fontFamily: "system-ui, sans-serif", padding: 24, maxWidth: 440, margin: "auto" }}>
      <h2 style={{ color: "#1e293b", margin: "0 0 16px" }}>⚡ React Task Manager</h2>
      <form onSubmit={addTodo} style={{ display: "flex", gap: 8, marginBottom: 16 }}>
        <input
          style={{ flex: 1, padding: "8px 12px", borderRadius: 6, border: "1px solid #cbd5e1" }}
          placeholder="New task..."
          value={input}
          onChange={(e) => setInput(e.target.value)}
        />
        <button style={{ background: "#2563eb", color: "#fff", border: "none", padding: "8px 16px", borderRadius: 6, cursor: "pointer" }}>
          Add
        </button>
      </form>
      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
        {todos.map(t => (
          <li
            key={t.id}
            onClick={() => toggleTodo(t.id)}
            style={{
              padding: "10px 14px",
              background: t.done ? "#f1f5f9" : "#ffffff",
              border: "1px solid #e2e8f0",
              borderRadius: 6,
              marginBottom: 8,
              cursor: "pointer",
              textDecoration: t.done ? "line-through" : "none",
              color: t.done ? "#94a3b8" : "#0f172a"
            }}
          >
            {t.done ? "✓ " : "○ "} {t.text}
          </li>
        ))}
      </ul>
    </div>
  );

ReactDOM.render(<TodoApp />, document.getElementById("root"));

UTF-8React (JSX)2 SpacesWrap: Off

Ctrl+Enter to Run

Ln 1, Col 159 lines2080 chars

Output & ConsoleIdle

Ready to Compile & Run

Click the blue ▶ Run button in the header bar or press Ctrl + Enter to compile and execute your Online React Playground.

How to Run React (JSX) Code Online

Develop and test isolated React components with state, props, and live DOM rendering directly in the browser.

Write standard React JSX components using React hooks.
Ensure the component renders to ReactDOM.render(..., document.getElementById("root")).
Click "▶ Run" or press Ctrl + Enter to see the interactive live preview.