{"id":11743,"library":"react-live","title":"React Live Playground","description":"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.","status":"active","version":"4.1.8","language":"javascript","source_language":"en","source_url":"https://github.com/FormidableLabs/react-live","tags":["javascript","react","live","live edit","component playground","react live","typescript"],"install":[{"cmd":"npm install react-live","lang":"bash","label":"npm"},{"cmd":"yarn add react-live","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-live","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React application integration.","package":"react","optional":false},{"reason":"Peer dependency for rendering React components.","package":"react-dom","optional":false}],"imports":[{"note":"The core context provider that wraps LiveEditor, LivePreview, and LiveError. Supports ESM and ships TypeScript types.","wrong":"const { LiveProvider } = require('react-live');","symbol":"LiveProvider","correct":"import { LiveProvider } from 'react-live';"},{"note":"Imports are typically named from the main 'react-live' entry point. Avoid direct path imports unless specifically for sub-modules if they exist.","wrong":"import LiveEditor from 'react-live/LiveEditor';","symbol":"LiveEditor","correct":"import { LiveEditor } from 'react-live';"},{"note":"Displays the live, rendered output of the code in LiveEditor. Follows standard named import patterns.","wrong":"const LivePreview = require('react-live').LivePreview;","symbol":"LivePreview","correct":"import { LivePreview } from 'react-live';"},{"note":"Renders any errors that occur during code compilation or execution. Named import, no common 'wrong' pattern beyond general CJS use.","symbol":"LiveError","correct":"import { LiveError } from 'react-live';"},{"note":"Type import for the LiveContext, useful for TypeScript users who might need to consume the context directly or extend its types.","symbol":"LiveContext","correct":"import type { LiveContext } from 'react-live';"}],"quickstart":{"code":"import React from 'react';\nimport { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';\n\nconst code = `\nfunction Counter() {\n const [count, setCount] = React.useState(0);\n return (\n
\n

You clicked {count} times

\n \n
\n );\n}\n\nrender();\n`;\n\nconst scope = { React, useState: React.useState };\n\nfunction MyLivePlayground() {\n return (\n \n
\n
\n

Editor

\n \n
\n
\n

Preview

\n \n

Error

\n \n
\n
\n \n );\n}\n\nexport default MyLivePlayground;","lang":"typescript","description":"Demonstrates setting up a basic live code playground with an editable editor, a real-time preview, and error display using `react-live` components."},"warnings":[{"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.","message":"Version 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.","severity":"breaking","affected_versions":">=4.1.0"},{"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.","message":"`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.","severity":"breaking","affected_versions":">=4.1.3"},{"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 }}`.","message":"When 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.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Always ensure the code passed to `LiveProvider`'s `code` prop ultimately calls `render()` with a single, valid React element (e.g., `render(
Hello
)` or `render()`).","message":"The `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.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Pass `React` into the `scope` prop: ``","cause":"The `scope` prop of `LiveProvider` did not include the `React` object, which is necessary for the transpiled code to function.","error":"ReferenceError: React is not defined"},{"fix":"Ensure `React.useState`, `React.useEffect`, etc., are provided in the `scope` if used directly, or properly destructure them: ``","cause":"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.","error":"Error: Invalid hook call. Hooks can only be called inside of the body of a function component."},{"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.","cause":"Older versions of the internal transpiler (Sucrase) might not fully support all modern JavaScript syntax features like optional chaining or nullish coalescing by default.","error":"SyntaxError: Unexpected token '?'"}],"ecosystem":"npm"}