React Online Compiler and Playground with Live Preview

How to use the React online compiler

1. 1Open the React playground. A starter project with App.js, two components and a custom hook loads and renders in the preview.
2. 2Edit App.js or any other file in the explorer. Use the explorer to create files and folders, or pick a sample project from its samples menu.
3. 3Watch the preview update about a second after you stop typing, or press Ctrl+S to run it immediately.
4. 4Read console.log output and runtime errors in the terminal panel below the preview.
5. 5Add a library by typing npm install followed by its name in the terminal, then use the global variable the library defines.
6. 6Choose a React version from the selector in the status bar, and press Share to copy a link to the whole project.

Features

• check_circleReact 16.14, 17.0, 18.2 or 18.3, selectable from the status bar (18.2 by default)
• check_circleJSX in .js and .jsx files, and TypeScript syntax in .ts and .tsx files, compiled by Babel in the browser
• check_circleMulti-file projects with folders, a file explorer, editor tabs, search and quick open (Ctrl+P)
• check_circleLocal imports between files, such as import Button from './components/Button'
• check_circleLive preview in a sandboxed iframe that refreshes a second after you stop typing, or straight away with Ctrl+S
• check_circleTerminal with npm install, npm uninstall and npm list, checked against the npm registry
• check_circle17 sample projects, including a to-do list, Kanban board, data grid, Markdown editor and TypeScript demo
• check_circleProjects auto-save to local storage and can be exported or imported as ZIP files or shared as a URL

What works and what doesn’t

• infoReact 19 is not available. The playground loads React from UMD builds, and React stopped publishing UMD builds with version 19.
• infonpm packages are added as classic script tags from jsDelivr, not as ES modules. A package loads only if it publishes dist/<name>.min.js, and you use its global variable (for example axios, or _ for lodash) instead of an import statement.
• infoImport paths are resolved from the project root rather than from the importing file, and only default and named imports and exports are handled. import * as and anonymous export default functions are not supported.
• infoBabel removes TypeScript types but never checks them, so type mistakes do not produce errors.
• infoOnly a file named styles.css is applied as CSS; importing any other stylesheet has no effect.
• infoThe preview uses React development builds and compiles code in the browser, so it is slower than a production build and unsuitable for performance measurements.

Example programs

import { useState } from 'react';

export default function App() {
  const [items, setItems] = useState(['Read the React docs']);
  const [text, setText] = useState('');

  const addItem = () => {
    if (!text.trim()) return;
    setItems([...items, text.trim()]);
    setText('');
  };

  return (
    <div>
      <input value={text} onChange={(e) => setText(e.target.value)} placeholder="New item" />
      <button onClick={addItem}>Add</button>
      <p>{items.length} item(s)</p>
      <ul>
        {items.map((item, i) => <li key={i}>{item}</li>)}
      </ul>
    </div>
  );
}

import { useState, useEffect } from 'react';

export default function App() {
  const [seconds, setSeconds] = useState(0);
  const [running, setRunning] = useState(false);

  useEffect(() => {
    if (!running) return;
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, [running]);

  return (
    <div>
      <h2>{seconds}s</h2>
      <button onClick={() => setRunning(!running)}>{running ? 'Pause' : 'Start'}</button>
      <button onClick={() => setSeconds(0)}>Reset</button>
    </div>
  );
}

type BadgeProps = {
  label: string;
  tone?: 'info' | 'success';
};

export default function Badge({ label, tone = 'info' }: BadgeProps) {
  const color = tone === 'success' ? '#15803d' : '#1d4ed8';
  return <span style={{ color, fontWeight: 600 }}>{label}</span>;
}

Frequently asked questions

Embed this sandbox

Paste this iframe into any web page and readers can run code without leaving it. The snippet travels in the URL, so there is nothing to host and no account to create. Open the sandbox, write your example, press Share, then append that link’s query string to the embed URL to preload it.

<iframe src="https://webfiddle.xyz/embed/react" width="100%" height="480" loading="lazy"
        style="border:1px solid #ddd;border-radius:8px"
        title="WebFiddle react sandbox"></iframe>