Can I use import statements?

Yes — import React hooks, local components, and npm packages (react, react-dom) via esbuild + esm.sh.

How do I add more files?

Click the + tab to create new .jsx, .css, or other files. Close optional files with × on the tab.

Can I maximize the preview?

Yes — click Maximize in the preview panel header to expand it to full height, then Restore to return to split view.

React Online Editor & JSX Playground

Edit App.jsx, index.jsx, and index.html in tabs. Press Preview to bundle with esbuild and render instantly. Add files with +, maximize the preview pane, and use real import/export syntax.

Common questions

Can I use import statements?: Yes — import React hooks, local components, and npm packages (react, react-dom) via esbuild + esm.sh.
How do I add more files?: Click the + tab to create new .jsx, .css, or other files. Close optional files with × on the tab.
Can I maximize the preview?: Yes — click Maximize in the preview panel header to expand it to full height, then Restore to return to split view.

14 lines

import { useState } from 'react';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', padding: '2rem', textAlign: 'center' }}>
      <h1>Hello, React!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount((c) => c + 1)}>Click me</button>
    </div>
  );
}

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

Autocomplete ON