react-live

What is react-live?

react-live is a React component that enables you to render live, editable code samples in your application. It provides a live code editor and preview, making it ideal for documentation, tutorials, and interactive coding environments.

What are react-live's main functionalities?

Live Code Editing

This feature allows users to edit code in a live editor and see the results immediately. The LiveProvider component wraps the code, and LiveEditor, LiveError, and LivePreview components handle the editing, error display, and preview respectively.

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

const code = `<strong>Hello World!</strong>`;

function App() {
  return (
    <LiveProvider code={code}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  );
}

export default App;

Custom Scope

This feature allows you to provide custom components and variables to the live code editor. By passing a scope object to the LiveProvider, you can use external components and libraries in the live code.

import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { Button } from 'my-ui-library';

const code = `<Button>Click me</Button>`;

const scope = { Button };

function App() {
  return (
    <LiveProvider code={code} scope={scope}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  );
}

export default App;

Theming

This feature allows you to apply custom themes to the live code editor. By passing a theme object to the LiveProvider, you can style the code editor to match your application's design.

import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live';
import { dracula } from 'react-syntax-highlighter/dist/esm/styles/prism';

const code = `<strong>Hello World!</strong>`;

function App() {
  return (
    <LiveProvider code={code} theme={dracula}>
      <LiveEditor />
      <LiveError />
      <LivePreview />
    </LiveProvider>
  );
}

export default App;

Other packages similar to react-live

react-syntax-highlighter

react-syntax-highlighter is a syntax highlighting component for React using Prism or Highlight.js. Unlike react-live, it does not provide live editing or preview capabilities but focuses on syntax highlighting for static code snippets.

react-codemirror2

react-codemirror2 is a React component for CodeMirror, a versatile text editor implemented in JavaScript. It provides a rich code editing experience but does not include live preview functionality out of the box like react-live.

react-ace

react-ace is a React component for the Ace editor. It offers a powerful code editing experience with various features like syntax highlighting, themes, and keybindings. However, it does not provide live code preview capabilities like react-live.

README

A flexible playground for live editing React code

React Live brings you the ability to render React components with editable source code and live preview.

The library is structured modularly and lets you style and compose its components freely.

Come learn more at our docs site!

Support

Have a question about react-live? Submit an issue in this repository using the "Question" template.

Notice something inaccurate or confusing? Feel free to open an issue or make a pull request to help improve the documentation for everyone!

The source for our docs site lives in this repo in the docs folder.

Contributing

Please see our contributing guide.

Maintenance Status

Active: Formidable is actively working on this project, and we expect to continue for work for the foreseeable future. Bug reports, feature requests and pull requests are welcome.