Live JSX Renderer

Why I built it

LLMs are good at writing React components — but the loop of "copy the code, paste it into a project, wait for the dev server" kills the magic. I wanted the ChatGPT-to-pixels time to be zero: paste (or stream) JSX in, see it render live, share a link.

How it works

Three moving parts, all in the browser — there is no server-side rendering step at all:

1. Monaco editor (the VS Code editor as a component) for editing with syntax highlighting and TypeScript awareness.
2. In-browser Babel transpiles the JSX to plain JavaScript on every change — no server round-trip, which is what makes the feedback loop feel instant.
3. A sandboxed iframe executes the result. This is the load-bearing decision: the code being rendered is untrusted (it came from an AI, or from whoever shared the link), so it runs inside an iframe with a restrictive sandbox attribute — its own origin, no access to the parent page, no top-level navigation. The worst a malicious snippet can do is break its own little box.

Playgrounds serialize into shareable URLs, so a working component can be passed around like a screenshot — except it's alive.

Build notes

React + Vite for the shell, Babel standalone for transpilation, and a message-passing bridge between the editor page and the sandbox iframe (postMessage both ways: code goes in, errors and console output come back).

What I learned

Executing untrusted code in a browser is a genuinely sharp problem — the iframe sandbox attribute, origin isolation, and the "what could a hostile snippet do?" threat-model exercise were the real education here. It also planted the seed for how I think about AI-generated code generally: trust the output visually, never trust it with your page.