A single-file, zero-build interactive tool that shows how JSX becomes the HTML a browser actually renders.
Paste or edit JSX/TSX on the left, then watch Babel's compiled JavaScript and the final rendered HTML update live beside it.
| Panel | Content |
|---|---|
| 1. JSX / TSX | Editable input — write any JSX or TSX here |
| 2. Compiled JS | Babel output using the classic runtime (React.createElement calls) |
| 3. Rendered HTML | The actual DOM innerHTML after React renders your component tree |
| Library | Purpose |
|---|---|
| Monaco Editor | Syntax-highlighted code editors |
| Babel | In-browser JSX + TypeScript compilation |
| React | Rendering JSX to real DOM for HTML extraction |
| Prettier | Formatting the JS and HTML output panels |
| modern-normalize | CSS reset |
| vscode-codicons | Icon font used by Monaco Editor |
| lucide-static | Icons |