Skip to content

Latest commit

 

History

History
36 lines (25 loc) · 1.5 KB

installation.md

File metadata and controls

36 lines (25 loc) · 1.5 KB
Raw
sidebar_position
2

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.

Version Supported React version Editor Transpiler
v3.x.x v17.x.x use-editable Sucrase
v2.x.x v16.x.x react-simple-code-editor Bublé

Please see also the related Formidable libraries: