Codeground AI

React Online Editor & JSX Playground

Edit App.jsx, index.jsx, and index.html in tabs. Preview bundles with esbuild and renders right away.

14 lines
Loading editor…
AI Agentcodeground-coder

Tell the agent what to build

It will inspect your code, think, and propose changes you can Keep or Discard inline.

  • Explain what this code does
  • Refactor this file for readability
  • Add input validation and error handling
  • Switch playground & scaffold Node.js
Enter to send · Shift+Enter for newline · Cmd/Ctrl+L to attach selection
Ready
Ln 1, Col 1
Javascript

About this editor

Edit App.jsx, index.jsx, and index.html in tabs. Preview bundles with esbuild and renders right away.

Multi-file tabs, real import/export, live preview. No create-react-app — open the page and edit JSX.

Key features

Multiple files

App.jsx, index.jsx, index.html, plus anything you add with the + tab.

esbuild preview

Preview builds with esbuild; React loads from esm.sh.

Live preview pane

Rebuild preview to see UI changes. Maximize the pane when you need full height.

Real imports

Hooks, local components, and supported npm packages through the bundler.

No npm install

Start editing JSX in the browser.

Shareable

Save with a title and send the link.

Getting started

  1. 1
    Start with the template

    App.jsx and index.jsx already mount React. Change components and save.

  2. 2
    Add files

    Use + for more .jsx, .css, or other files. Import them from App.jsx normally.

  3. 3
    Preview

    Click Preview. esbuild bundles and renders. Fix bundler errors from the output.

  4. 4
    Maximize

    Maximize the preview header for a full-height view; Restore for split layout.

  5. 5
    Share

    Save with a title to get a permalink.

Common questions

Is this React compiler free?

Yes. No payment and no account required for a quick run. Sign in if you want saves tied to your profile.

Do I need to install anything?

No. Code runs on Codeground servers in a sandbox. Just open the page.

What React version runs here?

React 18 with esbuild in the browser.

Can I share my code?

Save with a title to get a permalink, or share the playground URL as-is.

Works for interviews?

Yes. Share a ground link, or use interview mode for a live shared editor.

Multiple files?

This page is for single-file snippets. Use a cloud workspace for full projects.

Will my code still be here tomorrow?

Anonymous sessions can reset. Save with a title (and sign in) for a stable link.

Why use this instead of installing locally?

Good for quick tests, learning, and sharing a snippet. For large offline work, a local IDE still wins.

Is this an online React IDE or playground?

A browser playground with syntax highlighting and one-click Run — run React online without a full local install. Cloud workspaces cover multi-file projects.

Can I use import?

Yes — hooks, local files, react and react-dom via esbuild + esm.sh.

More files?

+ tab for new files. Close extras with × on the tab.

Full-screen preview?

Maximize in the preview header; Restore brings back split view.