react-live

React Live is a set of composable React components that turn a string of JSX/TSX source into an editable, instantly-rendered preview — no bundler, no iframe sandbox, and no round-trip to a server required. A LiveProvider transpiles the code on every keystroke using Sucrase, evaluates the result with a scoped Function constructor, and shares the resulting element, any thrown error, and the current code through React context so that LiveEditor, LiveError, and LivePreview can render whichever pieces of that state a consumer needs.

Because the components communicate purely through context (also exposed via a withLive higher-order component), teams can restyle every part of the experience or swap in entirely custom editor/preview UI while keeping the same transpile-and-scope engine underneath. It’s most commonly used to power interactive code examples in documentation sites, component-library storybooks, and in-browser component playgrounds where visitors can tweak a snippet and see the result update live.

What You Get

• LiveProvider — the context provider that transpiles code (via Sucrase) and evaluates it into a live React element on every change
• LiveEditor — a contenteditable-based code editor (built on use-editable) with Prism syntax highlighting, no <textarea> or heavyweight editor dependency
• LivePreview — renders the transpiled element inside an error boundary so a broken snippet can’t crash the surrounding page
• LiveError — surfaces transpilation or runtime errors from the current code as a <pre> block
• withLive HOC — exposes the shared code/error/element state to custom components so you can build your own editor or preview UI
• Support for both inline JSX/expression snippets and imperative noInline mode where the snippet calls render() directly, enabling multi-component examples

Common Use Cases

• Interactive, editable code samples embedded in documentation and component-library docs sites
• In-browser component playgrounds for design systems, letting consumers try prop combinations live
• Storybook or MDX-based style guides that need runnable, tweakable JSX examples
• Coding tutorials and workshops where learners edit React snippets and see immediate visual feedback
• Marketing or landing pages that showcase a library’s API with a live, editable demo instead of a static screenshot

Under The Hood

Architecture The library is built around a single context provider, LiveProvider, which owns transpilation and evaluation state (element, error, newCode) and exposes it, along with code, language, theme, and onChange/onError callbacks, through LiveContext. Consumers such as LiveEditor, LiveError, and LivePreview read from that context directly, while withLive offers the same state as props for custom components — so the four built-in pieces are really just reference implementations of one shared contract. The transpile-and-render pipeline itself lives in utils/transpile: generateElement (inline mode) and renderElementAsync (noInline mode) both compose a small chain of pure functions — strip/re-add a JSX filename const, run Sucrase’s imports/jsx/typescript transforms, wrap the result in a return, then hand the string to evalCode, which executes it via a scoped Function constructor and wraps the output in an ErrorBoundary component. The repo itself is a pnpm workspace with the publishable library isolated in packages/react-live, alongside a demo app and a Docusaurus website for documentation.

Tech Stack The package is authored in TypeScript and built with tsup into CJS and ESM bundles (plus .d.ts types), targeting react/react-dom 18+ as peer dependencies. Live transpilation is handled by sucrase rather than Babel, trading some transform breadth for a much smaller, faster runtime footprint suited to in-browser use. Syntax highlighting comes from prism-react-renderer, and the editable surface is built on use-editable, a lightweight contenteditable-based editing library, avoiding a full embedded code-editor dependency like CodeMirror or Monaco. Release management runs through Changesets, with GitHub Actions workflows for lint/test/build checks on PRs and automated publishing on merge to master.

Code Quality Jest (with jsdom) drives unit tests focused on the transpile utilities — generateElement, the compose helper, and the ErrorBoundary — using a small custom shallow-render test helper rather than a full testing-library setup. TypeScript is checked separately via tsc --noEmit, and ESLint runs with @typescript-eslint, eslint-plugin-react, and eslint-plugin-import/filenames rules; both lint and typecheck run in CI alongside the test suite on every pull request. Test coverage is concentrated on the transpilation core rather than full component-level or integration tests, and GitHub-derived activity signals show the project currently receiving infrequent commits despite an actively maintained release process.

What Makes It Unique Rather than shipping a monolithic “code playground” widget, React Live decomposes the experience into independently replaceable pieces connected by one context contract, so teams can keep the transpile/eval engine while fully re-skinning or recomposing the editor and preview UI. Its choice of Sucrase over Babel and use-editable’s contenteditable approach over a textarea or embedded editor keeps the client-side footprint deliberately small for a browser-executed transpiler, and the noInline/imperative render() mode gives it a niche capability — rendering multiple components from one snippet — that simpler single-expression live-preview libraries don’t offer.