Paste React or JSX. Watch it run right next to your code. Hooks, TypeScript and Tailwind work.
Private: your code stays in your browser.
react, react-dom, lucide-react, recharts and prop-types. Tailwind classes work without an import. Other packages are not available in this viewer, and you will see a clear message naming the one it could not find.
Yes. TSX and TypeScript syntax are accepted. Types are removed, not checked, so type errors will not stop the preview.
The viewer needs a component to draw. Add export default before your component, for example: export default function App() { return <h1>Hello</h1>; }
Yes, that is a common use. Paste the component. If it imports a package from the list above it will run as is.
Your code runs in a locked box (a sandboxed frame) with no access to this website, its cookies or your accounts, and it cannot open pop-ups or send you to another page. Even so, only run code you trust, because it can still draw on the screen and make network requests.
No. It is read and run in your browser, and the share link keeps the code after the # sign, which a browser never sends to any server.
We build business websites in 7 days and web apps in weeks, for a fixed price. Then we automate the busywork around them.
Book a free strategy callThe JSX Viewer runs React and JSX code in your browser and shows the result live. It is a quick way to preview a component, for example one an AI tool wrote for you.
Your data and code are processed on your device, which matters for API keys, customer records and private code. Each tool does one job quickly, with no sign-up.
More free tools: see every tool.