React Live Playground

Common errors

• ReferenceError: React is not defined

  cause 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.

  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.
  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 '?'

  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.
  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.

Warnings

• breaking 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.
  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.
• 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.
• gotcha 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.
  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 }}`.
• gotcha 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.
  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 />)`).

Install

• npm install react-live npm
• yarn add react-live yarn
• pnpm add react-live pnpm

Imports

• LiveProvider
  wrong:

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

  correct:

  import { LiveProvider } from 'react-live';

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

  import LiveEditor from 'react-live/LiveEditor';

  correct:

  import { LiveEditor } from 'react-live';

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

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

  correct:

  import { LivePreview } from 'react-live';

  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.

Quickstart

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;