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

React Live

A production-focused playground for live editing React code

React Live brings you the ability to render React components and present the user with editable source code and live preview. It supports server-side rendering and comes in a tiny bundle, thanks to Bublé and a Prism.js-based editor.

The library is structured modularly and lets you style its components as you wish and put them where you want.

Usage

Install it with npm install react-live and try out this piece of JSX:

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

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

Demo

https://react-live-demo.philpl.com/

FAQ

How does it work?

It takes your code and transpiles it through Bublé, while the code is displayed using Prism.js. The transpiled code is then rendered in the preview component, which does a fake mount, if the code is a component.

Easy peasy!

What code can I use?

The code can be one of the following things:

• React elements, e.g. <strong>Hello World!</strong>
• React pure functional components, e.g. () => <strong>Hello World!</strong>
• React component classes

If you enable the noInline prop on your LiveProvider, you’ll be able to write imperative code, and render one of the above things by calling render.

How does the scope work?

The scope prop on the LiveProvider accepts additional globals. By default it injects React only, which means that the user can use it in their code like this:

//                    ↓↓↓↓↓
class Example extends React.Component {
  render() {
    return <strong>Hello World!</strong>
  }
}

But you can of course pass more things to this scope, that will be available as variables in the code.

API

<LiveProvider />

This component provides the context for all the other ones. It also transpiles the user’s code! It supports these props, while passing all others through to a <div />:

Name	PropType	Description
code	PropTypes.string	The code that should be rendered, apart from the user’s edits
scope	PropTypes.object	Accepts custom globals that the code can use
mountStylesheet	PropTypes.bool	Mounts the stylesheet for the prism editor (Default: true)
noInline	PropTypes.bool	Doesn’t evaluate and mount the inline code (Default: false)
transformCode	PropTypes.func	Accepts and returns the code to be transpiled, affording an opportunity to first transform it.

Apart from these props it attaches the .react-live CSS class to its div. All subsequent components must be rendered inside a provider, since they communicate using one.

By default this component will render a <style /> tag for the Prism styling. You can decide not to render it and include the react-live.css file instead.

The noInline option kicks the Provider into a different mode, where you can write imperative-style code and nothing gets evaluated and mounted automatically. Your example will need to call render with valid JSX elements.

<LiveEditor />

This component renders the editor that displays the code. It is built using Prism.js and a Content Editable. It accepts these props for styling:

Name	PropType	Description
className	PropTypes.string	An additional class that is added to the Content Editable
ignoreTabKey	PropTypes.bool	Makes the editor ignore tab key presses so that keyboard users can tab past the editor without getting stuck
style	PropTypes.object	Additional styles for the Content Editable
onChange	PropTypes.func	Accepts a callback that is called when the user makes changes

This component renders a Prism.js editor underneath it and also renders all of Prism’s styles inside a style tag. The editor / content editable has an additional .react-live-editor CSS class.

<LiveError />

This component renders any error that occur while executing the code, or transpiling it. It passes through any props to its div and also attaches the .react-live-error CSS class to it.

Note: Right now the component unmounts, when there’s no error to be shown.

<LivePreview />

This component renders the actual component, that the code generates, inside an error boundary. It passes through any props to its div and also attaches the .react-live-preview CSS class to it.

withLive

The withLive method creates a higher-order component, that injects the live-editing context provided by LiveProvider into a component, as the live prop.

The context's shape is as follows:

Name	Type	Description
code	string	Reflects the code that is passed in as the code prop
error	string	An error that the code has thrown when it was previewed
onError	function	A callback that, when called, changes the error to what's passed as the first argument
onChange	function	A callback that accepts new code and transpiles it
element	React.Element	The result of the transpiled code that is previewed

Note: The code prop doesn't reflect the up-to-date code, but the code prop, that is passed to the LiveProvider. This is due to the fact that the Editor is an uncontrolled input for the reason of managing the contentEditable element efficiently.

Using this HOC allows you to add new components to react-live, or replace the default ones, with a new desired behaviour.

Comparison to component-playground

Component Playground is a similar but different project, that builds on babel-standalone and thus comes with a bigger bundle size. It comes with support for automatic documentation based on PropTypes and an ES6 console. Use it in projects where the page doesn’t have to load quickly, or even where it’s not user-facing, and correctness (Babel) and the additional features are more important than a lean bundle.