framework/react
React Online IDE for Modern Web Development
Build, edit, run and debug React applications in a browser IDE with live preview, npm, TypeScript and routing — an environment built for real projects rather than for snippets.
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>
);
}00 Live editor
Build a React component in your browser
No install, no bundler — edit the JSX, hit Run, and the hooks re-render live. Then open the whole project in XCODX Studio.
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/andlib/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
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]);
}03 pipeline
What happens to JSX between save and render
Four stages, all client-side, typically finishing in single-digit milliseconds. This is what it takes to run JSX in a browser with no build step, and knowing the order is what makes an error message useful.
-
Transform
Sucrase rewrites JSX and TypeScript syntax in one pass. It does not build a full syntax tree, which is why it is several times faster than Babel and why the loop stays instant on a large component.
-
Resolve
Imports are matched against the project's import map. A package you installed resolves to its esm.sh URL; a relative import resolves inside the project. A missing module is named here rather than throwing at runtime.
-
Render
The module is handed to the real React runtime and rendered through
createRoot. Where only markup changed, the existing tree is reconciled rather than remounted, so component state survives. -
Report
Errors, warnings and
consoleoutput arrive in the panel beside the preview, attributed to the component that produced them rather than to a line in generated code.
04 deep dive
When something breaks, it says where
A transform that fails silently is worse than none. Every stage above reports against the file you wrote, never against the JavaScript it generated.
Syntax errors carry a line and a column. An unclosed tag or a stray brace points at your .jsx file on the line you typed it, before anything reaches the runtime.
Runtime throws name the component. React's own error boundaries surface the component stack, so a failure in a deeply nested tree starts your search in the right file.
Hook rule violations are caught by React itself. Calling a hook conditionally produces React's real warning, in the console beside the app, because this is the actual runtime rather than an imitation of it.
A failed transform keeps the last good render. The previous output stays on screen with the error beside it, so you keep the working version to compare against.
- transform
- Sucrase
- errors
- line + column
- runtime
- real React 19
- on failure
- last good render kept
CartSummary.jsx:18:22 transform
Unexpected token, expected ","
18 | const total = items.reduce((n, i) => n + i.price
| ^05 features
What ships with a React project
Everything below is on the moment you open the React editor. There is no plugin list to curate, and nothing here is a paid tier — which is also what makes this a reasonable place to learn React online rather than only to ship from.
-
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 anode_modulesfolder 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.jsxtoApp.tsxand 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.
06 workflow
From empty tab to running component
No scaffolding step, no dependency install, no dev server to keep alive. This is the whole loop.
- 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.
07 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.
08 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
09 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 19, mounted with createRoot. The full modern surface is available — Actions, useActionState, useOptimistic, use, and the ref-as-prop change — and your code runs against the real React runtime rather than a lookalike, so behavior matches the docs.
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.
Does the React Compiler work here?
Not yet. The React Compiler is a build-time transform, and XCODX compiles with Sucrase for speed — it rewrites syntax in a single pass without building the full syntax tree the compiler needs. Nothing you write depends on it: memoise with useMemo and useCallback as you would in any project that has not adopted it.
Can I use React Server Components?
No, and no browser-only editor can. Server Components render on a server before the response is sent, so they need a running server process rather than a compiler. Everything client-side works normally — hooks, state, routing, data fetching from the browser — which is the whole of React for most projects.
Is this a good place to learn React?
Yes, and the absence of setup is the reason. A beginner's first hour usually disappears into Node versions and a bundler config that teaches nothing about React. Here the first thing you do is write a component. Teachers use the same property in reverse: a link opens the same working project on every student's machine, whatever they are running.
How fast is the JSX transform, really?
Single-digit milliseconds for a typical component. Sucrase skips building a full syntax tree — it rewrites syntax in one pass — which is why the preview usually updates before your hand leaves the keyboard, and why the loop does not degrade as a file grows.
Does component state survive a hot update?
Where it safely can. Editing markup or styles reconciles the existing tree and keeps state; changing a component's identity or its hook order remounts it, because pretending otherwise would show you a state that no longer matches your code.
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.
Can I use XCODX on a tablet or Chromebook?
Yes. The editor is a responsive web app, so a Chromebook, an iPad or an Android tablet gets the same compilers and the same preview a laptop does — there is no desktop-only build, because there is no build to install at all. The layout adapts to the screen rather than shrinking a desktop UI into it.
Can I export a project or move it to my own machine?
Yes. Export the whole project as a zip with its folder structure intact and open it locally, or commit it and push. It is ordinary source on disk from that point on — no proprietary format and no lock-in, which is also why importing an existing repository from GitHub works the same way in reverse.
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.