react-live

The library uses Sucrase for transpilation, use-editable for code display, and prism-react-renderer for syntax highlighting. The LivePreview component performs a fake mount to render the transpiled code if it is a React component.

Version Compatibility

By default, React Live treats the provided code block as a single JSX expression that is rendered as if it were returned from a functional component. Use LiveProvider, LiveEditor, and LivePreview to create an interactive editing environment.

To implement this, wrap your editor and preview components in a LiveProvider and pass the source code to the code prop.

import { LiveProvider, LiveEditor, LivePreview } from "react-live";

<LiveProvider code={code}>
  <div className="grid grid-cols-2 gap-4">
    <LiveEditor className="font-mono" />
    <LivePreview />
  </div>
</LiveProvider>

React Live supports Hooks, but since only React is in the scope by default, you cannot destructure hooks like useState unless you explicitly add them to the scope.

You have two options:

1. Use the full namespace: React.useState()
2. Add the hook to the scope: scope={{ useState, ... }}

// Option 1: Using the React namespace (default scope)
() => {
  const [likes, increaseLikes] = React.useState(0);

  return (
    <>
      <p>{`${likes} likes`}</p>
      <button onClick={() => increaseLikes(likes + 1)}>Like</button>
    </>
  );
};

If you need to render multiple components, define functional components, or use React hooks (like useState), use the noInline prop on the LiveProvider.

When noInline is enabled, you must call the render() function at the end of your code block to specify which component or JSX element should be displayed in the LivePreview.

import { LiveProvider, LiveEditor, LivePreview } from "react-live";

// The code passed to LiveProvider must end with render(<Component />)
<LiveProvider code={code} noInline>
  <div className="grid grid-cols-2 gap-4">
    <LiveEditor className="font-mono" />
    <LivePreview />
  </div>
</LiveProvider>

Deciding between react-live and component-playground depends on your specific requirements for bundle size, features, and setup speed:

Start a local development server to preview the website. This command opens a browser window and supports live reloading, so most changes are reflected immediately without a server restart.

$ yarn start

You can install react-live using npm or yarn. After installation, you can use the LiveProvider component to wrap your live editing environment, providing the initial code via the code prop. The environment is typically composed of LiveEditor, LiveError, and LivePreview components.

import { LiveProvider, LiveEditor, LiveError, LivePreview } from "react-live";

<LiveProvider code="<strong>Hello World!</strong>">
  <LiveEditor />
  <LiveError />
  <LivePreview />
</LiveProvider>;

Generate static content for the website. The output will be placed in the build directory, which can then be served by any static hosting service.

$ yarn build