WebFiddleWebFiddle
    Explorer
    chevron_rightProject
    chevron_rightinventory_2package.json
    chevron_rightcodeApp.js
    chevron_rightcodeindex.js
    chevron_rightpalettestyles.css
    chevron_rightfolder_opencomponents
    chevron_rightcodeButton.jsx
    chevron_rightcodeCard.jsx
    chevron_rightfolder_openhooks
    chevron_rightcodeuseCounter.js
    chevron_rightDependencies
    package_2react^18.2.0
    package_2react-dom^18.2.0
    codeApp.js
    palettestyles.css
    codeindex.js
    src › description App.js
    lockhttp://localhost:3000
    sync

    Starting Development Server...

    terminalTerminal
    ➜ webfiddle-react-app
    Type "help" for available commands.
    $
    source_branch main*sync 0check_circle Ready
    Ln 1, Col 1UTF-8javascript

    About This React Playground

    WebFiddle's React Playground is a free online JSX and TSX editor that compiles and previews components in your browser. There is no build step, no npm install and no server — Babel transpiles your code on the fly and renders it in a sandboxed frame the moment you stop typing.

    Key Features

    • check_circleReact 16 through 19 — pick the version your project targets
    • check_circleJSX and TSX with Babel transpilation in the browser
    • check_circleImport npm packages straight from esm.sh and unpkg
    • check_circleMulti-file projects with a real file explorer
    • check_circleLive preview that updates as you type
    • check_circleIntegrated console for logs and runtime errors
    • check_circleSeventeen ready-made sample projects to fork
    • check_circleShare any project as a single compressed URL

    How to Use

    1. 1Open the playground — a starter component is already loaded.
    2. 2Edit App.jsx, or add files from the explorer on the left.
    3. 3Import any npm package by name; it resolves from a CDN automatically.
    4. 4Watch the preview pane re-render as you type.
    5. 5Check the console panel for logs and errors.
    6. 6Press Share to copy a URL containing your whole project.

    Frequently Asked Questions

    No. React, ReactDOM and Babel are loaded for you, and npm packages resolve from a CDN at runtime. Nothing is installed and nothing is built on a server.

    You can target React 16 through 19. The playground detects the version and uses createRoot on React 18+ and ReactDOM.render on older versions.

    Yes. Create a .tsx file and Babel strips the types before rendering. Type annotations are removed rather than checked, so it is for prototyping rather than full type safety.

    Yes. Import a package by name and it is fetched from esm.sh or unpkg on demand. Most dependency-free UI and utility libraries work without configuration.

    In your browser. Projects persist to local storage on your own device, and sharing works by compressing the project into the URL itself — nothing is written to a server.

    Yes, completely free with no account required.

    Embed this sandbox

    Drop this into any 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 paste that link’s query onto 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>
    Preview the embed