React · JSX and TSX
A component,
mounted in seconds.
Paste a function component with JSX and CodeRush compiles it where you are standing: vendored Babel for the syntax, vendored React to render it, a sandboxed frame to run it. No project, no bundler, no install.
- JSX and TSX detected
- Vendored Babel and React
- Two React templates ready
What gets compiled, and what gets mounted
The last component wins.
CodeRush transforms your JSX with Babel, pairs it with React and ReactDOM, and mounts the last component it finds into the generated page. You can paste a single component with hooks and state and it works; you do not need an index.html, an entry point or a render call of your own.
Typed components are welcome. Annotations plus JSX tags read as TSX, and the types are stripped before the same pipeline runs — the TypeScript playground explains where that stops, because nothing here type-checks your code.
Both compilers are committed files in this repository, loaded only when a paste needs them. An empty pad never fetches Babel, which is why it opens as fast as it does.
Two working components to start from
Open, edit, break, rerun.
The todo list is a small app with state, a text input, adding and checking off. The counter is the smallest useful thing a component can be, and a good place to watch a rerender happen. Both open in the editor with their exact source, run immediately, and are yours to wreck.
Hooks behave normally. State updates, effects, event handlers and conditional rendering all run in the sandbox, and anything you log lands in the Console drawer with its source line. React's own warnings show up there too, which is often the fastest way to find a missing key or a bad dependency list.
See the whole shelf on the templates page — twelve examples across pages, games, apps, documents, visuals and data.
Sharing a component without a repository
A link, a fragment, no server copy.
A Rush link carries your component in the URL fragment. The recipient opens it, it compiles in their tab, and it runs — no clone, no install, no account, and no file of yours on our server. Public, private and password-protected modes are all built from the same fragment.
If you are iterating with an AI model, the AI panel sends your current source and your prompt directly to the provider you chose, with your own key, only when you press Send. CodeRush is not in the middle of that request.
Questions
- Do I need to install React?
- No. React and ReactDOM are vendored in this repository and loaded in your tab when a JSX or TSX paste needs them.
- Do I have to call ReactDOM.render myself?
- No. CodeRush mounts the last component it finds in your source.
- Can I use hooks and state?
- Yes. A component with useState, useEffect and event handlers runs normally, and React warnings appear in the Console drawer.
- Can I import a package from npm?
- No. There is no bundler and no package install. Known libraries can be loaded from cdnjs for plain scripts, and you can add a script tag inside an HTML page.