# formidablelabs/react-live

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/formidablelabs-react-live).**

4,609 stars · 255 forks · TypeScript · MIT

## Links

- GitHub: https://github.com/FormidableLabs/react-live
- Homepage: https://commerce.nearform.com/open-source/react-live/
- awesome-repositories: https://awesome-repositories.com/repository/formidablelabs-react-live.md

## Topics

`component-playground` `live` `react`

## Description

react-live is a suite of tools for in-browser React transpilation, live editing, and interactive documentation. It provides a React component for building live playgrounds where source code is transpiled and rendered in real time, accompanied by a live code editor that offers syntax highlighting and immediate visual feedback.

The project enables the creation of living documentation by embedding editable React code examples alongside their rendered output. It supports the execution of editable markup or functional components, allowing users to modify code and observe the resulting behavior instantly.

The system includes capabilities for dynamic component rendering, real-time code transpilation, and global dependency injection. It also features error handling mechanisms to detect and display compilation, syntax, and execution errors without crashing the application.

## Tags

### Testing & Quality Assurance

- [Code Execution Playgrounds](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/component-testing/interactive-playgrounds/code-execution-playgrounds.md) — Builds web-based environments combining a code editor with real-time React execution and visual feedback.

### Web Development

- [React Component Simulators](https://awesome-repositories.com/f/web-development/live-component-embedding/react-component-simulators.md) — Provides a live browser environment that renders React components with automatic reloads for instant visual feedback. ([source](https://commerce.nearform.com/open-source/react-live/docs))
- [Interactive Documentation Frameworks](https://awesome-repositories.com/f/web-development/interactive-documentation-frameworks.md) — Provides a framework for building technical documentation that integrates interactive, editable React code components.
- [Execution Error Captures](https://awesome-repositories.com/f/web-development/error-handling/execution-error-captures.md) — Captures and renders errors encountered during the transpilation or execution of live code. ([source](https://commerce.nearform.com/open-source/react-live/docs/api))

### Development Tools & Productivity

- [Code Editors](https://awesome-repositories.com/f/development-tools-productivity/code-editors.md) — Ships an embedded code editing interface with syntax highlighting for real-time modification of React components. ([source](https://commerce.nearform.com/open-source/react-live/docs/api))
- [Real-Time Code Evaluation](https://awesome-repositories.com/f/development-tools-productivity/configuration-updates/real-time-runtime-updates/real-time-code-evaluation.md) — Implements immediate evaluation of transpiled code fragments to provide instant visual feedback without a full page reload. ([source](https://commerce.nearform.com/open-source/react-live/docs/installation))
- [Code Editors](https://awesome-repositories.com/f/development-tools-productivity/terminal-syntax-highlighting-engines/in-browser-code-editing/code-editors.md) — Ships a text editor with syntax highlighting and real-time execution for previewing React components.

### Programming Languages & Runtimes

- [JavaScript Transpilation](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/javascript-language-features/transpilers/javascript-transpilation.md) — Provides a lightweight browser-based transpiler to convert JSX and modern JavaScript into executable code in real time.
- [Syntax and Variable Error Detection](https://awesome-repositories.com/f/programming-languages-runtimes/undefined-behavior-detection/memory-and-concurrency-error-detection/syntax-and-variable-error-detection.md) — Detects invalid code during live editing and provides customizable error messages to guide the user. ([source](https://commerce.nearform.com/open-source/react-live/docs))

### Software Engineering & Architecture

- [Dynamic Runtime Evaluation](https://awesome-repositories.com/f/software-engineering-architecture/compile-time-code-generation/string-to-code-conversion/dynamic-runtime-evaluation.md) — Implements a pipeline that evaluates raw text strings as executable JavaScript modules at runtime.
- [Execution Context Injections](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injection-containers/module-level-injection/plugin-scope-injections/execution-context-injections.md) — Allows injecting external libraries and variables into the transpiled code's execution context for dependency referencing.
- [Editor Scope Provisions](https://awesome-repositories.com/f/software-engineering-architecture/dependency-injection-providers/global-dependency-provision/editor-scope-provisions.md) — Provides a system for passing external variables or libraries into the editor scope for use within live code. ([source](https://commerce.nearform.com/open-source/react-live/docs/usage))
- [Error Boundaries](https://awesome-repositories.com/f/software-engineering-architecture/error-boundaries.md) — Ships a component that intercepts runtime and compilation errors to prevent the application from crashing during live editing.
- [Live Compilation Diagnostics](https://awesome-repositories.com/f/software-engineering-architecture/live-compilation-diagnostics.md) — Detects syntax or runtime errors in provided code and displays descriptive messages to the user instantly. ([source](https://commerce.nearform.com/open-source/react-live/docs/))

### User Interface & Experience

- [Component Documentation Sandboxes](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-component-sandboxes/component-documentation-sandboxes.md) — Provides a framework for embedding editable, live code examples within component documentation.
- [React Transpilation](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/component-compilers/react-transpilation.md) — Converts React JSX and component source code into executable JavaScript directly within the browser.
- [Dynamic Component Rendering](https://awesome-repositories.com/f/user-interface-experience/dynamic-component-rendering.md) — Transpiles source code and renders components in real time using custom globals and type definitions. ([source](https://commerce.nearform.com/open-source/react-live/docs/api))
- [React Component Sandboxes](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-component-sandboxes.md) — Offers an isolated sandbox for rapidly iterating on React UI elements without a full build cycle.
- [Visual Feedback Systems](https://awesome-repositories.com/f/user-interface-experience/user-feedback-tools/visual-feedback-systems.md) — Provides a system for immediate visual feedback in a preview window as the user edits the source code. ([source](https://cdn.jsdelivr.net/gh/formidablelabs/react-live@master/README.md))

### Education & Learning Resources

- [Interactive Coding Tutorials](https://awesome-repositories.com/f/education-learning-resources/interactive-coding-tutorials.md) — Enables the creation of interactive tutorials where learners modify React code and see instant visual results.