CodeLiveStudio

React JS Online Compiler

Quick answer

Paste the React starter below into the editor, press Run, and a live React app renders in your browser — JSX compiled by Babel, hooks and state fully working, no npm install, no Node, no account. The playground runs React 18 from a CDN inside a sandboxed preview, so you can write, run and debug React components in seconds on any device.

Last updated: October 25, 2026

Setting up a React project the traditional way means Node, npm, a bundler and a folder of config files before you write a single component. For learning hooks, testing an idea, or reproducing a bug for a question, that setup is the whole cost. This page is a working React JS online compiler instead: the editor below loads React and ReactDOM from a CDN, compiles your JSX in the browser with Babel, and renders the result in a live preview pane. You get the same render, state, re-render loop as a real project, with none of the tooling.

Use the tool below

CodeLive Studio

Preparing your workspace…

React JS Online Compiler runs entirely in your browser, nothing you paste or type is uploaded to any server, and no account is needed.

Worked examples

Real input on the left, exactly what React JS Online Compiler gives back on the right. Paste either side into the tool to re-create it.

1Starter template: a stateful counter

This is the exact document the how-to steps refer to. Paste it, press Run, click the button — the count increments and the paragraph re-renders.

Input · HTML
<div id="root"></div>

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">
const { useState } = React;

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div style={{ fontFamily: "system-ui", padding: 24 }}>
      <h1>Hello from React</h1>
      <p>You clicked {count} times.</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root"))
  .render(<Counter />);
</script>
Output · Rendered preview
Hello from React
You clicked 3 times.
[ Click me ]

Every click calls setCount, React re-renders the Counter function, and the new count lands in the paragraph — the full state loop in nineteen lines.

2Rendering a list with keys

The most common real pattern: map an array of data to JSX elements. Replace the script block from the starter with this component to try it.

Input · JSX
const { useState } = React;

function TodoList() {
  const [todos] = useState([
    { id: 1, text: "Read the React docs", done: true },
    { id: 2, text: "Try hooks in the playground", done: false },
    { id: 3, text: "Move the code into Vite", done: false },
  ]);

  return (
    <ul style={{ fontFamily: "system-ui", padding: 24 }}>
      {todos.map((todo) => (
        <li key={todo.id}>
          {todo.done ? "✅" : "⬜"} {todo.text}
        </li>
      ))}
    </ul>
  );
}

ReactDOM.createRoot(document.getElementById("root"))
  .render(<TodoList />);
Output · Rendered preview
✅ Read the React docs
⬜ Try hooks in the playground
⬜ Move the code into Vite

The key prop is what React uses to track list items between renders — omit it and the console warns you, which makes this page a good place to meet that error on purpose.

How do I run React code online?

  1. 1

    Copy the starter template below and paste it into the HTML tab of the editor (or clear the existing document and paste over it).

  2. 2

    Press Run. The preview pane loads React 18 and ReactDOM from unpkg, and Babel compiles the JSX script block on the fly.

  3. 3

    Edit the component — change the heading text, add another useState, nest a list — and press Run again to see the new output instantly.

  4. 4

    Open the console panel for errors and logs: an undefined variable in JSX or a bad hook call shows up with the same messages you would see in a real browser project.

What this online React compiler gives you

Real React 18, not a mock

The template loads react and react-dom UMD builds from unpkg, so rendering, hooks, events and reconciliation are the genuine library. What behaves this way locally behaves the same way here — there is no simulator in the middle.

JSX compiled by Babel in your tab

The script type="text/babel" block is transformed by Babel standalone before it executes, exactly the JSX transform Create React App and Vite perform at build time. You write JSX; the browser gets compiled createElement calls.

Hooks, state and events fully working

useState re-renders the component on every click, useEffect runs on the dependency schedule you declare, and controlled inputs update on each keystroke. Stateful logic is the point of React — it works here, not just static markup.

HTML, CSS and JS tabs in one workspace

Style your components with a <style> block, load extra libraries with more <script src> tags (Chart.js, Lodash, anything with a CDN build), and keep helper JS in the same document — the preview assembles all of it.

A captured console for debugging

console.log calls inside your components surface in the console panel, and runtime errors print with their real stack messages. Debugging a bad key prop or an undefined prop read works the way it does in DevTools.

Private and instant

Everything runs in your browser tab — there is no build server receiving your code and no account storing it. Paste an internal component to reproduce a bug without it ever leaving your machine.

Why run React online instead of installing it

The install path — npm create vite, install, configure, run — is right for products and wrong for questions. When the task is "does this hook pattern work", "why does my list render twice", or "show a colleague the bug", the fifteen minutes of tooling are pure overhead. An in-browser React compiler turns that loop into seconds: paste, run, edit, run again.

There is a second use case people underestimate: interviews and teaching. Sharing a screen with a live React component you just edited is worth more than a static slide, and because the workspace also renders plain HTML and CSS, you can show the before-and-after of extracting markup into a component in one file.

How React runs in the browser without a build step

Three CDN scripts make it work: react (the core, which defines components, hooks and the element model), react-dom (the renderer that mounts your tree to the DOM), and Babel standalone (the compiler that converts JSX into React.createElement calls the moment the page loads). The browser cannot read JSX natively — that is what Babel is for — and the type="text/babel" attribute tells Babel which script blocks to transform.

One honest version note: this setup uses React 18, because React 19 dropped the UMD browser builds that make no-bundler setups possible. That is not a downgrade — React 18 is a complete, stable release with every hook you will practice, and it is exactly what most production codebases still run. When a project outgrows the browser (routing, code splitting, server components), the same components move into Vite or Next.js almost unchanged, and that migration is a copy-paste of the component files.

What you cannot do in a no-build React sandbox

Import statements for npm packages will not resolve — there is no bundler here to walk a node_modules tree. Anything you need must come as a script tag with a CDN build, and libraries that export UMD globals attach themselves to window (for example Lodash as _). Single-file components are also a fact of life here: JSX, styles and markup live in one document rather than in .jsx and .css files.

Those limits are features for the compiler's job. Reproducing a hook bug or teaching state does not need a router or a test runner; it needs the fastest possible loop between writing a line and seeing the render. When you hit the ceiling, the code you wrote here moves into a real project without rewrites — that is the exit path, not a dead end.

Questions this tool answers

Frequently asked questions

Is this a real React compiler or an emulator?

It is real React. The editor loads the official react and react-dom UMD builds from a CDN, and Babel standalone performs the same JSX transform that bundler-based projects run at build time. Rendering, hooks, events and error messages come from the library itself.

Which React version does the online compiler run?

React 18 from the official unpkg UMD builds. React 19 removed UMD builds, which were the mechanism that lets React load in a plain browser page without a bundler, so 18 is the newest version usable in a no-build setup — and it includes every hook in current use.

Can I use npm packages like lodash or axios?

Not via import — there is no bundler here to resolve npm modules. Libraries that ship a CDN build work fine as script tags: lodash attaches a global _, axios exposes axios, and chart libraries attach their own globals. Anything that is ESM-only without a UMD build cannot load in this sandbox.

Do hooks like useState and useEffect work?

Yes, fully. Destructure them from React at the top of your script — const { useState, useEffect } = React — and use them exactly as you would in a project. State updates trigger real re-renders, and effects follow the dependency array you provide.

Why do I see 'ReactDOM.createRoot is not a function'?

That means the react-dom script tag is missing, failed to load, or you are using the older ReactDOM.render API. Keep all three CDN script tags from the starter in order — react, react-dom, then Babel — and mount with ReactDOM.createRoot(document.getElementById("root")).render(<App />).

How do I move my code into a real React project?

Create a project with Vite (npm create vite@latest my-app -- --template react), copy the JSX from your text/babel block into src/App.jsx, replace React.useState with the imported useState, and move your styles into a CSS file. The component logic transfers unchanged — the sandbox was always running the same React.

Related tools and reading

JavaScript Playground

Plain JS runs with a captured console — no React needed.

HTML Tester Online

Test markup and scripts with a live preview and console.

HTML Editor

Write HTML, CSS and JS with instant preview.

How to run JavaScript in a browser

Five execution paths, from console to playgrounds.

Best CodePen Alternatives

Nine playgrounds tested, including this one.

JSFiddle Alternative

Auto-run preview without an account.