React Online Compiler and Editor

App.jsx 
// Write code here: the preview updates as you type.
export default function App() {
  return <h1>Hello, World!</h1>;
}

The app appears here.

console.log output from your app shows here.

About this online React compiler

This online React compiler turns your JSX or TSX into a live app next to the editor. Edit a component and the preview updates as you type; click the buttons, fill the inputs and watch your state change, with console output underneath.

It is one file, App.jsx (or App.tsx), that exports a component, which is all you need to practise hooks, props, lists and forms without setting up a project, a bundler or node_modules.

How to use the React compiler

  1. Write a component in App.jsx and export it: export default function App() { ... }.
  2. Import hooks from react, for example import { useState } from 'react'.
  3. Watch the preview update as you type, or press Run (Ctrl + Enter) to start the app again from scratch.
  4. Switch to TSX for TypeScript, or press Share to save an image of your code or copy a link.

Keyboard shortcuts

Ctrl + Enter (Cmd + Enter on a Mac)
Run the code
Ctrl + / (Cmd + / on a Mac)
Comment or uncomment the selected lines
Ctrl + Z, Ctrl + Shift + Z
Undo and redo
Tab, Shift + Tab
Indent or outdent the selection
Escape, then Tab
Leave the editor and move to the next control

What it supports

  • The current React with the automatic JSX runtime: function components, fragments and every built-in hook (useState, useEffect, useReducer, useMemo, useRef, useContext and more).
  • JSX or TSX: TypeScript syntax is removed before the app runs.
  • A live preview you can click and type in, plus console.log output and render errors.
  • Style with inline style objects or a style element inside your component.

Limits to know

  • Only react, react-dom and react/jsx-runtime can be imported; other npm packages are not available.
  • TSX types are not checked here; use the TypeScript compiler for that.
  • The preview has no network access, so fetch calls fail; keep sample data in your component.

Example: A greeting with props

App.jsx

function Hello({ name }) {
  return <h1>Hello, {name}!</h1>;
}

export default function App() {
  return <Hello name="React" />;
}

Result

The preview shows a heading that reads: Hello, React!

Frequently asked questions

Is this React online compiler free?

Yes. Every editor in the DevArcade playground is free to use, with no sign-up, no account and no limit on runs.

How do I run React code online?

Write a component in App.jsx and export it as the default export. The preview renders it as you type, and Run (or Ctrl + Enter) starts it again from scratch.

Can I use hooks like useState and useEffect?

Yes. Import them from react as you would in a project. Every built-in hook works, including useState, useEffect, useReducer, useMemo, useRef and useContext.

Can I import npm packages?

Only react, react-dom and react/jsx-runtime. Other imports are refused with a message, because the preview runs in a sandbox with no network access.

Can I write React with TypeScript?

Yes. Switch the file to App.tsx and write TSX. The TypeScript syntax is removed before the app runs; types are not checked in this editor.

How do I share my React code?

Press the share key next to Run. Copy link packs the code into the link itself, so whoever opens it sees your code and can run it with one press of Run; nothing is uploaded to a server. You can also save the code as a PNG image to post anywhere.

Also try