React playground

A small todo app split across main.tsx, App.tsx and TodoItem.tsx. Edit any file and the preview recompiles.

Loading the editor…

What is bundled

JSX and TSX are compiled by Sucrase in a Worker using the automatic JSX runtime. React 18.3.1 and ReactDOM are bundled with the site, so the playground works offline and never fetches packages from a CDN. Imports of react, react-dom, react-dom/client and react/jsx-runtime are allowed; project files can import each other and CSS files.

When an import is missing

Importing any other npm package (for example lodash) stops the preview before it runs and names the import, the file and the line, instead of failing with a cryptic runtime error. Copy the code you need into a project file instead.

Type errors are not checked; TSX types are stripped.

Questions

Which React version is used?

React 18.3.1 (the last release with UMD builds that can be bundled without a CDN).

Can I add npm packages?

No. Arbitrary package installation needs network access and a bundler service, which this browser-only editor does not use.

Do hooks and state survive edits?

No. Each refresh re-renders from scratch; there is no hot module replacement.