Free, no signup, no build
React viewer: run React (JSX) code online
Paste the code Claude, ChatGPT, or Gemini wrote, and see it run here.
How it works
- 1
Copy the component
In Claude, open the artifact and switch to its code. In ChatGPT or Gemini Canvas, copy the code block or the canvas. A saved .jsx or .tsx file works too.
- 2
Paste it and run it
Your browser strips the TypeScript, compiles the JSX, and builds one HTML file that loads React 18 and each library the code imports. The app runs in a sandboxed frame on this page.
- 3
Get a link or the file
Upload it for a private link to open on your phone or send, or download the .html file to keep or host anywhere.
Why a React artifact won't open as a file
A React component isn't a page yet. Its JSX and TypeScript have to be compiled, its imports point to npm packages, and nothing tells the browser where to draw it. Saved as .html, it shows its code or a blank page. The usual answer is a Vite project, npm install, and a build on Netlify or Vercel. This viewer does those steps in your browser for one component, and the result is a single HTML file you can open, share, or host.
What works and what doesn't
Runs
- A component exported with export default, or a top-level App
- Hooks such as useState, useEffect, useMemo, and useReducer
- TypeScript types, interfaces, and generics (stripped, not checked)
- Tailwind classes, including shadcn/ui's colors like bg-primary
- lucide-react icons and recharts charts
- shadcn/ui's @/components/ui files: Card, Button, Input, Tabs, Select, Slider, Switch, Dialog, and more, as simple working versions
- Other npm packages by name, such as framer-motion, d3, or lodash, from esm.sh
Doesn't run
- An app split over several files (an import like ./Chart): put it in one file
- Other @/ paths of a Next.js or Vite project, and Node modules such as fs
- Server code, API keys, and a database: the app runs in the browser only
Questions about the React viewer
How do I run a Claude React artifact outside Claude?
Open the artifact in Claude, switch to its code, and copy it. Paste it here and press "Run the code". The viewer compiles it in your browser and runs it with React 18, Tailwind, lucide-react, recharts, and stand-ins for shadcn/ui, the libraries Claude's React artifacts use. Then get a link or download it as one .html file.
Which libraries work?
React 18 with its hooks, Tailwind classes, lucide-react, recharts, and shadcn/ui's @/components/ui files, which the viewer replaces with simple versions styled with shadcn's own classes. Any other npm package the code imports by name loads from esm.sh. Code split over several files, and project paths other than @/components/ui and @/lib/utils, don't work: ask the AI to put the app in one file.
Is my code uploaded?
No. Running it doesn't upload it. Your browser compiles the code and builds the page on your device, and Convika's servers never see it. The page then downloads React and the libraries it imports from esm.sh and Tailwind from its CDN, as any React page does. Convika receives the app only when you press "Get a link by uploading this app".
Does it work on a phone?
Yes. Copy the code in the Claude, ChatGPT, or Gemini app, open this page in Safari or Chrome, and paste it. The app runs in your phone's browser. To open it on a phone later, or on someone else's, get a link.
How do I share the app?
Press "Get a link by uploading this app" above the app. You get a private link that works for 3 minutes with no signup. That link shows the app as it looks when you made it, with its scripts off. Keep the page on the Free plan and publish it, and the link stays the same until you unpublish it, with the app working. You can also download the .html file and put it on any host.
What if it shows an error?
The viewer shows the error and the line of your code it is on. Paste the error into the chat and ask the AI to fix it. If an import names another file, ask for one file. If it still fails, ask the AI for "one self-contained HTML file" and open that in the HTML viewer.
Does the downloaded file need Convika?
No. The .html file has your component in it, compiled, and loads React and the libraries from esm.sh and Tailwind from its CDN. It opens in any browser that is online, and you can host it on Convika, Netlify, GitHub Pages, or anywhere else.