About the online React playground
This page is a React playground. Write a component with JSX and see it rendered in the live preview. The JSX is compiled in your browser with Babel, so there is no project to create and no build tool to configure.
It is meant for experimenting with components, props, state, and hooks before you move the code into a real application.
How to use it
- Write a React component in the editor.
- The JSX is compiled in the browser.
- Interact with the rendered result in the preview panel.
- Change the code to see the preview update.
Example: a counter with useState
A minimal component that keeps a number in state and updates it when a button is clicked.
function Counter() {
const [count, setCount] = React.useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>Click me</button>
</div>
);
}What it is good for
- Learning JSX and how components render
- Trying out useState, useEffect, and other hooks
- Prototyping a small piece of UI
- Reproducing a rendering bug in isolation
Frequently asked questions
Do I need Node.js, Vite, or Create React App?
No. The playground compiles JSX in the browser, so you can write a component and see it immediately.
What is JSX?
JSX is a syntax extension that lets you write HTML-like markup inside JavaScript. It is compiled into ordinary function calls that create React elements.
Can I use hooks?
Yes. Hooks such as useState and useEffect work in function components in the playground.
Is the React playground free?
Yes. It is free and works without an account.