Skip to main content


<LiveProvider />

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

codePropTypes.stringThe code that should be rendered, apart from the user’s edits
scopePropTypes.objectAccepts custom globals that the code can use
noInlinePropTypes.boolDoesn’t evaluate and mount the inline code (Default: false). Note: when using noInline whatever code you write must be a single expression (function, class component or some jsx) that can be returned immediately. If you'd like to render multiple components, use noInline={true}
transformCodePropTypes.funcAccepts and returns the code to be transpiled, affording an opportunity to first transform it
languagePropTypes.stringWhat language you're writing for correct syntax highlighting. (Default: jsx)
enableTypeScriptPropTypes.boolEnables TypeScript support in transpilation. (Default: true)
disabledPropTypes.boolDisable editing on the <LiveEditor /> (Default: false)
themePropTypes.objectA prism-react-renderer theme object. See more here

All subsequent components must be rendered inside a provider, since they communicate using one.

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 a wrapper around react-simple-code-editor and the code highlighted using prism-react-renderer.

stylePropTypes.objectAllows overriding default styles on the LiveEditor component.
tabModePropTypes.oneOf(["indentation", "focus"])Sets how you want the tab key to work. (Default: "indentation")

<LiveError />

This component renders any error that occur while executing the code, or transpiling it. It passes through any props to a pre.

Note: Right now when 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.

ComponentPropTypes.nodeElement that wraps the generated code. (Default: div)


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

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

The component wrapped with withLive gets injected the following props:

codePropTypes.stringReflects the code that is passed in as the code prop
errorPropTypes.stringAn error that the code has thrown when it was previewed
onErrorPropTypes.funcA callback that, when called, changes the error to what's passed as the first argument
onChangePropTypes.funcA callback that accepts new code and transpiles it
elementReact.ElementThe 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.