Online React Compiler

Write, run, and share code snippets - no setup required.

PreviewAuto preview

Console

Console output appears here.

import { useState } from 'react';

function Counter({ label }) {
    const [count, setCount] = useState(0);
    return (
        <button className="counter" onClick={() => setCount(count + 1)}>
            {label}: {count}
        </button>
    );
}

export default function App() {
    const [tasks, setTasks] = useState(['Learn JSX', 'Try useState']);
    const [text, setText] = useState('');

    const addTask = () => {
        if (!text.trim()) return;
        setTasks([...tasks, text.trim()]);
        console.log('Added:', text.trim());
        setText('');
    };

    return (
        <main className="app">
            <h1>Hello, React!</h1>
            <Counter label="Clicks" />
            <div className="row">
                <input
                    value={text}
                    onChange={(e) => setText(e.target.value)}
                    onKeyDown={(e) => e.key === 'Enter' && addTask()}
                    placeholder="Add a task"
                />
                <button onClick={addTask}>Add</button>
            </div>
            <ul>
                {tasks.map((task, i) => (
                    <li key={i}>{task}</li>
                ))}
            </ul>
        </main>
    );
}

Run React JS code online and watch it render

A free online React compiler and playground. Edit App.jsx and the preview next to it re-renders a moment after you stop typing: components, props, useState, useEffect and every other hook work as they do in a real app. There is no npm install, no Vite project and no local server to start.

Your JSX is compiled in your browser with esbuild, the same build that runs the live preview in Coddy's React lessons, against React 19. The project is four files, laid out like a Vite app: App.jsx, styles.css, main.jsx and index.html. Nothing is sent to a server, so the preview keeps up with your typing.

What makes this React online compiler useful

Live preview: the app rebuilds and re-renders a moment after you stop typing, and the refresh button (or Ctrl+Enter) remounts it from scratch to reset its state.
Real React 19 with every hook: useState, useEffect, useReducer, useRef, useContext, useMemo and your own custom hooks.
Build errors point at the file, line and column, in a readable error page where the preview would be, so a missing brace never leaves a blank screen.
A console under the preview shows console.log, warnings and runtime errors from your components.
Your code is saved in your browser as you type. Open the preview in a new tab, or copy and download any file to move it into a real project.

What you can build in the React online compiler

A to-do list: a controlled <input>, useState for the list, and .map() rendering one <li> per task with a key.
A counter or a timer, to see how useState and useEffect with a cleanup function behave.
Components that talk to each other: lift state up to a parent and pass values and callbacks down as props.
A theme switcher with createContext and useContext, styled from styles.css.

Online React compiler FAQ

Is the online React compiler free?

Yes. It is free with no sign-up: open the page, edit the code and the preview updates.

Do I need Node.js, npm or Vite to run React here?

No. The JSX is compiled in your browser and React is already loaded in the preview, so you do not install Node.js, run npm create vite or start a dev server. Any modern browser works, on Windows, macOS, Linux or a Chromebook.

Can I import npm packages?

You can import react and react-dom/client, and your own files with a relative path such as import App from './App.jsx'. Other npm packages such as React Router or Axios are not available, so the playground is best for components, hooks and state rather than a full app with dependencies.

Is this the React Compiler?

No. The React Compiler is a build plugin that adds memoization to your components automatically. Here, compiling means turning JSX into JavaScript, which esbuild does in your browser so the preview can run it. People often search for an online React compiler when they mean a place to run React code, which is what this page is.

How do I learn React after trying the compiler?

Change the sample app and watch what happens in the preview. When you want a structured path, Coddy's React course teaches JSX, components, props, state, events and hooks in short lessons with the same live preview, then goes on to Next.js.