Skip to main content

Installation

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 />
</LiveProvider>;

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
v3.x.xv17.x.xuse-editableSucrase
v2.x.xv16.x.xreact-simple-code-editorBublé

Please see also the related Formidable libraries:-