react-live

library4.1.8jsnpmunverified

React Live is a versatile library for creating interactive, live-editable React code playgrounds within web applications. It allows developers to render React components dynamically, display their editable source code, and provide a real-time preview of the changes. The current stable version is 4.1.8, with patch releases occurring frequently to address fixes and minor improvements, as seen in recent version bumps (e.g., 4.1.0 to 4.1.8). Key differentiators include its modular structure, allowing for flexible styling and composition of its core components (`LiveProvider`, `LiveEditor`, `LiveError`, `LivePreview`), and its focus on being production-ready. It abstracts the complexities of code compilation and error handling, making it suitable for documentation sites, component libraries, and interactive learning platforms.

web-framework testing

npm install react-live

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-LIVE

react-live

web-frameworkjavascriptv4.1.8

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

LiveProvider

✓ import { LiveProvider } from 'react-live';

✗ const { LiveProvider } = require('react-live');

The core context provider that wraps LiveEditor, LivePreview, and LiveError. Supports ESM and ships TypeScript types.

LiveEditor

✓ import { LiveEditor } from 'react-live';

✗ import LiveEditor from 'react-live/LiveEditor';

Imports are typically named from the main 'react-live' entry point. Avoid direct path imports unless specifically for sub-modules if they exist.

LivePreview

✓ import { LivePreview } from 'react-live';

✗ const LivePreview = require('react-live').LivePreview;

Displays the live, rendered output of the code in LiveEditor. Follows standard named import patterns.

LiveError

✓ import { LiveError } from 'react-live';

Renders any errors that occur during code compilation or execution. Named import, no common 'wrong' pattern beyond general CJS use.

LiveContext

✓ import type { LiveContext } from 'react-live';

Type import for the LiveContext, useful for TypeScript users who might need to consume the context directly or extend its types.

Demonstrates setting up a basic live code playground with an editable editor, a real-time preview, and error display using `react-live` components.

import React from 'react'; import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'; const code = ` function Counter() { const [count, setCount] = React.useState(0); return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ); } render(<Counter />); `; const scope = { React, useState: React.useState }; function MyLivePlayground() { return ( <LiveProvider code={code} scope={scope}> <div style={{ display: 'flex', gap: '20px' }}> <div style={{ flex: 1 }}> <h3>Editor</h3> <LiveEditor style={{ minHeight: '200px', backgroundColor: '#333', color: '#fff', padding: '10px', borderRadius: '4px' }} /> </div> <div style={{ flex: 1 }}> <h3>Preview</h3> <LivePreview style={{ border: '1px solid #ccc', padding: '10px', borderRadius: '4px' }} /> <h3>Error</h3> <LiveError style={{ color: 'red', border: '1px solid red', padding: '10px', borderRadius: '4px' }} /> </div> </div> </LiveProvider> ); } export default MyLivePlayground;

Debug

Known issues

breakingVersion 4.1.0 migrated to Prism React Renderer 2. Users who were directly interacting with or customizing internals of Prism React Renderer (e.g., through its context or props) might experience breaking changes due to updated APIs or component structures.

fix

Review the Prism React Renderer v2 documentation and adjust any custom rendering logic or styling accordingly. Most users relying on `react-live`'s high-level components should not be heavily impacted.

affects: >=4.1.0

breaking`react-live` now requires `react` and `react-dom` versions `>=18.0.0` as peer dependencies. Older React versions are no longer officially supported and may lead to runtime errors or unexpected behavior.

fix

Update your project's `react` and `react-dom` packages to version `18.0.0` or newer. Ensure all other React-related dependencies are compatible with React 18.

affects: >=4.1.3

gotchaWhen using `LiveProvider`, the `scope` prop must contain all variables and components that are referenced within the `code` string but are not globally available. Failing to include them will result in 'undeclared variable' errors.

fix

Ensure `scope` includes all necessary React hooks (e.g., `React.useState`, `React.useEffect`), components, or other variables required by the code. For example, `scope={{ React, useState: React.useState }}`.

affects: >=0.1.0

gotchaThe `render` function implicitly provided in the `code` prop within `LiveProvider` expects a single React element. Attempting to return multiple elements or plain text without wrapping them may lead to rendering issues or errors.

fix

Always ensure the code passed to `LiveProvider`'s `code` prop ultimately calls `render()` with a single, valid React element (e.g., `render(<div>Hello</div>)` or `render(<MyComponent />)`).

affects: >=0.1.0

Errors

Common errors & fixes

ReferenceError: React is not defined

The `scope` prop of `LiveProvider` did not include the `React` object, which is necessary for the transpiled code to function.

fix

Pass `React` into the `scope` prop: `<LiveProvider code={code} scope={{ React }}>`

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

React hooks (like `useState`, `useEffect`) were used in the `code` prop but were not explicitly exposed in the `scope` prop or were called outside a functional component.

fix

Ensure `React.useState`, `React.useEffect`, etc., are provided in the `scope` if used directly, or properly destructure them: `<LiveProvider code={code} scope={{ React, useState: React.useState }}>`

SyntaxError: Unexpected token '?'

Older versions of the internal transpiler (Sucrase) might not fully support all modern JavaScript syntax features like optional chaining or nullish coalescing by default.

fix

Ensure `react-live` is updated to the latest patch version, as `v4.1.7` specifically fixed optional chaining with Sucrase. If the issue persists with custom transpilers or specific configurations, check their documentation for feature support.

Upgrade

Version history

4.1.8latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React application integration.

react-domrequiredPeer dependency for rendering React components.

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/FormidableLabs/react-live ↗

packagehttps://www.npmjs.com/package/react-live ↗

homepagehttps://react-live.dev ↗