react.landing Open editor

framework/react

React Online IDE & Playground

Build, edit, and preview React applications instantly in your browser. Write modern JSX and TypeScript with fast live updates, zero installation, and a professional online development experience.

Start a React project How compilation works
transformSucrase
packagesesm.sh + import maps
editorMonaco
installnone
App.jsxuseInterval.jsstyles.css
import { useState } from 'react';
import { useInterval } from './useInterval';

export default function Ticker({ label }) {
  const [ticks, setTicks] = useState(0);

  useInterval(() => setTicks(t => t + 1), 1000);

  return (
    <output className="ticker" aria-live="polite">
      {label}: {ticks}
    </output>
  );
}
JSX → JS in 4ms · worker idle

01 platform

Why build React here

Most online React sandboxes give you one file and a preview pane. XCODX Studio gives you the editor Visual Studio Code is built on, a real project tree, and the tooling that usually only exists on your own machine.

  • The VS Code engine, not a textarea

    Monaco brings IntelliSense, multi-cursor, the command palette, code folding, find-and-replace across files, a minimap and Vim or Emacs bindings. Prettier formats on demand. It is the editing experience you already have muscle memory for.

  • Multi-file projects, not snippets

    Split a feature across components/, hooks/ and lib/ the way you actually would. Folders, tabs, per-project file history with restore points and auto-save — plus import and export as a zip when you want the code on disk.

  • Git that really is Git

    Stage, commit, branch and read full history through isomorphic-git, running in the browser and working offline. Import an existing repository from GitHub and keep committing without leaving the tab.

  • Private by construction

    Projects are stored locally in your browser. Nothing is uploaded to a server, so a half-finished experiment stays yours. XCODX installs as a PWA and keeps working with no connection.

02 deep dive

What React looks like without a build step

The awkward part of React has never been React. It is the twenty minutes of tooling in front of it. XCODX removes that layer without removing anything you rely on.

JSX is compiled, not interpreted. Every save runs your .jsx and .tsx files through Sucrase, a transform built for exactly this: it strips types and rewrites JSX to React.createElement calls in a few milliseconds and skips type-checking entirely. The work happens inside a Web Worker, so a large component never freezes the cursor.

Hooks behave the way the docs say they do. useState, useEffect, useMemo, useRef and your own custom hooks run against the real React runtime — not a reimplementation. Extract useInterval into its own module, import it from three components, and the Rules of Hooks still apply, because it is genuinely React executing.

Composition scales past the demo. Props drill, context provides, children compose. A page you build here is a normal React tree mounted with createRoot, so patterns you prove in the browser move to a local repository unchanged.

JSX / TSX
Sucrase — no type-check, no config
Runtime
React 18 createRoot
Where it runs
Web Worker, off the main thread
Output
Plain ES modules the browser executes
useInterval.js
import { useEffect, useRef } from 'react';

// A hook is just a function that calls other hooks.
// Extract it once, import it anywhere.
export function useInterval(callback, delay) {
  const saved = useRef(callback);

  useEffect(() => { saved.current = callback; }, [callback]);

  useEffect(() => {
    if (delay == null) return;
    const id = setInterval(() => saved.current(), delay);
    return () => clearInterval(id);
  }, [delay]);
}
custom hook · 14 lines

03 features

What ships with a React project

Everything below is on the moment you open the editor. There is no plugin list to curate.

  • npm without a terminal wait

    Search a package, click install. XCODX resolves it through esm.sh and writes a native import map, so import { create } from 'zustand' works on the next render. Nothing is downloaded to a node_modules folder because there isn't one.

  • Live preview, four ways

    Full width while you focus, split beside the code, inside real device frames for responsive work, or popped into its own tab on a second monitor.

  • TypeScript when you want it

    Rename App.jsx to App.tsx and keep going. Sucrase strips annotations on the same path JSX takes, so adding types costs nothing at compile time.

  • Styling, your choice

    Plain CSS, CSS Modules-style conventions, SCSS and Sass compiled by Dart Sass in the browser, or a utility framework pulled in from the package search.

  • An integrated terminal

    A real shell surface over your project files for the moments a GUI is slower than typing.

  • Templates, not boilerplate

    Over a hundred ready-to-run starters, several of them React with routing, state management and a UI kit already wired together. Open one and the project is already a project.

04 workflow

From empty tab to running component

No scaffolding step, no dependency install, no dev server to keep alive. This is the whole loop.

react-ticker — xcodx
  • new project → React
  • created App.jsx, main.jsx, index.html, styles.css
  • install zustand
  • resolved via esm.sh · import map updated · 0 files written
  • save App.jsx
  • sucrase: jsx → js 4ms (worker)
  • preview reloaded · 1 root mounted
  • git commit -m "ticker"
  • [main 1f4c8ae] ticker · 4 files changed

  • Nothing to keep alive

    There is no dev server process to restart when it dies, because there is no process.

  • The same loop on a phone

    The editor, the compiler and the preview all run client-side, so an iPad or an Android tablet is a first-class machine.

  • Share by link

    Send a live preview URL instead of a screenshot and a set of instructions.

05 ecosystem

React is one of many

The same project can hold a Vue component next to a React one and a Python script next to both. XCODX picks the right compiler per file, not per project.

  • React
  • Vue
  • Angular
  • Svelte
  • SolidJS
  • Lit
  • HTMX
  • Vite
  • TypeScript
  • JavaScript
  • HTML
  • CSS
  • SCSS
  • Less
  • Pug
  • Tailwind
  • Bootstrap
  • Vuetify
  • Ant Design
  • shadcn/ui
  • Phaser
  • Node.js
  • Python
  • Java
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • SQL
  • Bash

06 languages

Everything the editor understands

Syntax highlighting and IntelliSense cover 70+ languages. These are the ones XCODX also compiles or executes for you.

Compiled in your browser11

Zero build step. Transform runs on a Web Worker, so typing never blocks.

  • JSX
  • TSX
  • TypeScript
  • Vue SFC
  • Svelte
  • Angular (JIT)
  • SolidJS
  • SCSS
  • Sass
  • Less
  • Pug

Rendered natively8

Straight to the live preview, no transform in the way.

  • HTML
  • CSS
  • JavaScript
  • JSON
  • Markdown
  • Jupyter (.ipynb)
  • SVG
  • YAML

Executed on demand22

70+ languages run through a self-hosted Piston engine. stdout, stderr, images and tracebacks land in the console.

  • Python
  • Java
  • C
  • C++
  • C#
  • Go
  • Rust
  • Ruby
  • PHP
  • Kotlin
  • Swift
  • Lua
  • Scala
  • Perl
  • Haskell
  • Elixir
  • Dart
  • R
  • Julia
  • SQLite
  • Bash
  • PowerShell

07 questions

React on XCODX — common questions

Can I write JSX without configuring Babel or a bundler?

Yes — that is the point. XCODX detects .jsx and .tsx files and compiles them with Sucrase automatically. There is no babel.config.js, no bundler entry point and no plugin list. Save the file and the preview has the compiled output.

Which version of React does the editor run?

React 18, mounted with the createRoot API. Concurrent-era features and the modern hooks surface are all available, and your code runs against the real React runtime rather than a lookalike.

Can I install React libraries like React Router or Zustand?

Yes. Search for the package in the built-in npm panel and install it; XCODX resolves it through esm.sh and adds it to a native import map. React Router, TanStack Query, Zustand, Redux Toolkit, jotai, xstate, shadcn/ui and Ant Design all import normally.

Do custom hooks work if they live in separate files?

Yes. Projects are multi-file, so a hook in hooks/useInterval.js imported by three components behaves exactly as it would locally. The Rules of Hooks apply because this is genuine React execution, not a simulation.

Can I use TypeScript with React here?

Yes. Use .tsx files and write annotations as normal. Sucrase strips the types on the same fast path it uses for JSX, so there is no separate type-check step slowing the loop down — and no configuration to add.

How does this differ from a single-file React playground?

A playground gives you one file and a preview. XCODX gives you a folder tree, tabs, the Monaco editor, npm installs, real Git with branches and history, and an integrated terminal — the shape of an actual project rather than a snippet.

Do I need to install anything to use XCODX Studio?

No. XCODX Studio is a browser-based IDE — the editor, the compilers and the preview all run client-side. There is no download, no package manager to set up and no configuration file to write. Opening the editor is the whole setup step.

Where is my code stored?

In your own browser. Projects, file history and Git objects live in local storage on your device and are never uploaded to a server. That also means XCODX works offline: it is a Progressive Web App, so you can install it and keep coding with no connection.

Is XCODX Studio free?

Yes. The editor, the live preview, the 70+ language runtimes, npm installs, Git and the integrated terminal are all free to use.

Nothing to install

Open a React project now

A component on screen in under a minute. No account wall between you and the editor, no install, nothing to configure.

Start a React project Browse the docs