Build and preview React components with JSX, hooks, and state in an isolated sandbox environment.
Paste a component into the editor pane and a live preview of it renders beside the code, updating as you type. Hooks such as useState and useEffect behave normally, so stateful UI can be prototyped with no build step and no local project. The common surprise: it is not a mini version of your app. Only the packages the sandbox provides can be imported, your project's global CSS is absent, and the component remounts on every edit, so state resets mid-work. The preview also shows only what your code renders, so a component that is defined but never rendered leaves the pane blank.
A concrete input and expected output from the current implementation.
Input
function Counter() {
const [count, setCount] = React.useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Clicks: {count}
</button>
);
} Expected output
The preview pane renders a button labeled 'Clicks: 0'. Each click increments the number, so after two clicks the button reads 'Clicks: 2'.
useState(0) starts count at 0 and setCount(count + 1) adds 1 per click, so the label always equals the number of clicks. This is the basic stateful pattern the playground is built to demonstrate.
The editor re-evaluates your code whenever you pause typing, and the preview reflects the new render almost immediately. Each re-evaluation remounts the component, so hooks re-run from their initial values: useState resets, useEffect fires again, and interaction state such as text in an input is lost. Syntax errors, undefined variables, and runtime throws are shown in an error panel rather than crashing the page.
Component code runs apart from the host page, so it cannot reach the surrounding site's scripts or storage, and nothing is sent over the network. Only the packages the sandbox exposes are importable; any other import fails with a module-not-found error. Project-wide styles do not carry over, so the preview looks unstyled until you add CSS, and components that fetch remote data show a failed request instead of real content.
Only the packages the sandbox preloads. Typical playgrounds expose React and a small set of helpers; anything else fails with a module-not-found error in the panel. If your component needs an unlisted library, inline the logic you need or reduce the snippet to a minimal reproduction that only uses React.
Each edit makes the sandbox re-evaluate and remount the component, so hooks re-run from their initial values. That is expected here and does not predict your real app, where re-renders keep state. If state resets even without edits, after a refresh, check that useState is called at the top level of the component, not inside a condition or callback.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.