Skip to main content


Install it with npm install react-live or yarn add 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 />

How does it work?

It takes your code and transpiles it with Sucrase, while the code is displayed using use-editable and the code is highlighted using prism-react-renderer.

The transpiled code is then rendered in the preview component (LivePreview), which does a fake mount if the code is a React component.

Prior to v3.0.0, earlier versions of the library used different internals. We recommend using the latest version you can.

VersionSupported React versionEditorTranspiler

Please see also the related Formidable libraries: