# react-live: a live React playground you embed in your own docs > react-live renders editable React source with a live preview, and it is built to be styled and composed rather than dropped in as a finished widget. Here is what it does, how to install it, and where it stops being the right tool. **FormidableLabs/react-live** — A flexible playground for live editing React components - Repository: https://github.com/FormidableLabs/react-live - Website: https://commerce.nearform.com/open-source/react-live/ - Stars: 4,611 · Forks: 260 - Language: JavaScript - License: MIT - Published: 2026-09-23 · Updated: 2026-09-23 · Language: en - Canonical page: https://hysenlabs.com/projects/formidablelabs-react-live ## What react-live is for, and who ends up using it The README describes the library as rendering "React components with editable source code and live preview." That sentence is the whole product. You give it a string of JSX, it compiles that string in the browser, it evaluates it against a scope object you supply, and it renders the result into a preview region. The editable part is a separate piece: react-live ships an editor component, but the README is explicit that the library "is structured modularly and lets you style and compose its components freely." Nothing arrives looking finished. The audience follows from that. Component library authors who want runnable examples on a documentation page. Design system teams who want knobs next to the code rather than a static screenshot. Educators and interviewers who want a candidate to type React and see it render without a build step. Anyone who would otherwise reach for a hosted sandbox and finds it too heavy or too far outside their own styling system. It is not a general code playground. There is no file system, no package resolution, no server. If your example needs to import a module that is not already in the scope you pass, it will not work, and the README does not claim otherwise. ## The compile and evaluate path inside react-live The mechanism is a pipeline, not a bundler. Source text goes in, a transpile step turns JSX into something the browser can evaluate, and the result is executed with a scope object bound as the available identifiers. That scope is the contract. Whatever you put in it is what the snippet can reference; whatever you leave out is a runtime error in the preview pane, not a build error. The repository layout reflects a two-workspace monorepo. The root package.json declares workspaces for packages/react-live and website, with the root scripts delegating: build:lib runs the build in the react-live workspace, test runs npm test -w react-live, and start:docs runs the website workspace. The docs site source lives in the docs folder according to the README. That split matters if you plan to fork and patch: the library you publish and the site that documents it are separate packages under one lockfile. The modular composition is the design bet. Because the editor and the preview are separate components rather than one opaque widget, you can put your own textarea, your own syntax highlighting, or your own layout between them. The cost is that you own the wiring. A library that hands you a finished playground makes the first ten minutes faster and the two-hundredth hour slower. ## Installing react-live and running the docs site locally The README points at npmjs.com/package/react-live for the package, and the repository is a workspace monorepo, so the commands that appear in the root package.json are the ones you actually run. Start by installing the workspace dependencies from the repository root: ```bash npm install ``` To read the documentation on your own machine rather than on the hosted site, the root package.json defines a start:docs script that delegates to the website workspace: ```bash npm run start:docs ``` What you should see is the documentation site served from the website workspace, with its source in the docs folder of this repository. For working on the library itself rather than the docs, the same file defines a stories script for the react-live workspace: ```bash npm run stories ``` One caveat about the shape of this project: the README does not include a copy-paste consumer example of LiveProvider, LiveEditor and LivePreview. It sends you to the docs site instead, so the component API is documented there rather than in the repository README. If you are evaluating react-live from the README alone, you will not find the prop list. ## Where react-live stops being the right tool The scope object is the hard boundary, and it is a real one. A snippet that writes an import statement has nothing to resolve it against. Multi-file examples are out of scope by construction. If your documentation needs to demonstrate a three-file pattern with a shared module, react-live will fight you, and the README offers no mechanism to change that. Evaluation happens in the user's browser. That is what makes the preview instant, and it is also why you should not point react-live at untrusted source. A playground that runs whatever a visitor types is a playground that runs whatever a visitor types. The README does not present react-live as a sandboxing layer, and it should not be treated as one. The editor is also not a full IDE. There is no autocomplete story in the README, no diagnostics panel, no type checking of the snippet. If the value proposition you are selling is "our docs have a real coding environment," react-live gives you the render loop and leaves the rest to you. Finally, the maintenance picture. The repository is not archived, and the last push was on 2026-09-22. The most recent release listed is react-live@4.1.8 from 2024-11-19, with 4.1.7 and 4.1.6 before it. A gap between the latest tagged release and ongoing commits is normal for a library in a stable phase, but it does mean you should read the CHANGELOG rather than assume a 4.2 is imminent. ## react-live against Sandpack and a full in-browser bundler Sandpack is the comparison people reach for, and the difference is architectural rather than cosmetic. Sandpack runs a bundler inside the browser, which is what lets it accept imports, multiple files and npm dependencies. react-live does not bundle. It transpiles and evaluates against a scope you provide. That single choice cascades. Sandpack can demonstrate a package install; react-live cannot, unless you have already put that package's exports into scope. Sandpack can show a file tree; react-live shows one buffer. In exchange, react-live has far less machinery between your code string and the rendered output, and it composes into an existing React tree as ordinary components. There is no iframe boundary to style around, which is precisely why the README can promise free styling and composition. So the decision is about what your examples actually need. If they need imports and multiple files, pick the bundler-based option and accept the weight. If they need one component, a scope, and your own chrome around it, react-live is the smaller commitment. ## Licence, upkeep and what a fork costs you react-live is MIT licensed, stated in the README, in the repository's LICENSE file, and in the root package.json license field. MIT is permissive: you can use it commercially, modify it, and ship it inside a closed product, provided the copyright notice and permission notice travel with it. That is a description of the licence text, not legal advice; if your organisation has a policy on attribution in bundled dependencies, run the LICENSE file past whoever owns that policy. The upgrade surface is small and the tooling is visible. The repo uses changesets for versioning and changelog generation, with root scripts changeset and changeset:version, and the @changesets/changelog-github package wired in as a devDependency. That means release notes are generated from pull requests, so the CHANGELOG.md is the place to look before bumping a major. The check script runs lint through oxlint, formatting through prettier, type checking across workspaces, and the test suite, which tells you what a contribution has to satisfy. What you are actually maintaining if you adopt react-live is the scope object and the editor chrome. The library itself changes slowly, and the 4.x releases listed are patch-level. Budget your effort for the glue, not for chasing upstream. ## Conclusion Adopt react-live when the preview has to live inside your own React tree with your own styling, and when you can accept that the editor UI is yours to build. Do not adopt it if you need a batteries-included sandbox with a file tree, dependency installation and bundling, because react-live evaluates a single scope and does not provide those. Before committing, verify the peer React version in packages/react-live/package.json against your app, confirm the scope object you pass covers every import in the snippets you intend to run, and check the CHANGELOG for where the 4.x line broke from earlier majors. ## FAQ ### What is react-live? It is a JavaScript library that renders React components from editable source code with a live preview, described in the README as a flexible playground for live editing React code. It is published on npm as react-live under the MIT licence. ### How is react-live different from Sandpack? Sandpack runs a bundler in the browser, which is what allows imports and multiple files. react-live compiles and evaluates source against a scope object you supply, and its components are meant to be styled and composed into your own React tree. ### What are the alternatives to react-live? The closest alternative is a browser-bundler based playground such as Sandpack, which trades react-live's small surface for support of imports and multi-file examples. The README itself does not list alternatives. ### Does react-live work in VS Code? react-live is a React component library for embedding a playground in a web page, not an editor extension. The README and repository files describe no VS Code integration, so a live preview inside VS Code is not something this project provides. ## Sources - [FormidableLabs/react-live on GitHub](https://github.com/FormidableLabs/react-live) - [License: MIT](https://github.com/FormidableLabs/react-live/blob/master/LICENSE) - [Project website](https://commerce.nearform.com/open-source/react-live/) - [README](https://github.com/FormidableLabs/react-live/blob/master/README.md) - [Releases](https://github.com/FormidableLabs/react-live/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/formidablelabs-react-live