0
# React Live
1
2
React Live is a flexible playground library that enables live editing of React components with real-time preview capabilities. It provides a modular set of components (LiveProvider, LiveEditor, LivePreview, LiveError) that allow developers to create interactive code editors where users can write, edit, and immediately see the results of React JSX code.
3
4
## Package Information
5
6
- **Package Name**: react-live
7
- **Package Type**: npm
8
- **Language**: TypeScript with React
9
- **Installation**: `npm install react-live`
10
11
## Core Imports
12
13
```typescript
14
import {
15
LiveProvider,
16
LiveEditor,
17
LivePreview,
18
LiveError,
19
LiveContext,
20
withLive
21
} from "react-live";
22
```
23
24
For CommonJS:
25
26
```javascript
27
const {
28
LiveProvider,
29
LiveEditor,
30
LivePreview,
31
LiveError
32
} = require("react-live");
33
```
34
35
## Basic Usage
36
37
```typescript
38
import React from "react";
39
import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live";
40
41
function App() {
42
const code = `
43
function Welcome(props) {
44
return <h1>Hello, {props.name}!</h1>;
45
}
46
47
<Welcome name="World" />
48
`;
49
50
return (
51
<LiveProvider code={code}>
52
<LiveEditor />
53
<LivePreview />
54
<LiveError />
55
</LiveProvider>
56
);
57
}
58
```
59
60
## Architecture
61
62
React Live is built around several key components:
63
64
- **Context Provider**: `LiveProvider` manages state and provides context for live editing functionality
65
- **Editor Component**: `LiveEditor` provides syntax-highlighted code editing with real-time updates
66
- **Preview Component**: `LivePreview` renders the live output of the edited code in a safe environment
67
- **Error Handling**: `LiveError` displays compilation and runtime errors with detailed feedback
68
- **Transformation Engine**: Built-in TypeScript/JSX transformation using Sucrase for real-time compilation
69
- **Code Execution**: Safe evaluation environment with configurable scope and error boundaries
70
71
## Capabilities
72
73
### Live Editing Components
74
75
Core React components that work together to provide a complete live code editing experience. These components use React Context for state management and real-time updates.
76
77
```typescript { .api }
78
function LiveProvider(props: {
79
code?: string;
80
disabled?: boolean;
81
enableTypeScript?: boolean;
82
language?: string;
83
noInline?: boolean;
84
scope?: Record<string, unknown>;
85
theme?: typeof themes.nightOwl;
86
transformCode?(code: string): string | Promise<string>;
87
children: ReactNode;
88
}): JSX.Element;
89
90
function LiveEditor(props: Partial<EditorProps>): JSX.Element;
91
92
function LivePreview<T extends React.ElementType>(props: {
93
Component?: T;
94
} & React.ComponentPropsWithoutRef<T>): JSX.Element;
95
96
function LiveError<T extends Record<string, unknown>>(props: T): JSX.Element | null;
97
```
98
99
[Live Components](./live-components.md)
100
101
### Code Transformation
102
103
Low-level utilities for transforming and executing JSX/TypeScript code in real-time. Used internally by LiveProvider but also available for custom implementations.
104
105
```typescript { .api }
106
function generateElement(
107
options: {
108
code: string;
109
scope?: Record<string, unknown>;
110
enableTypeScript: boolean;
111
},
112
errorCallback: (error: Error) => void
113
): ComponentType;
114
115
function renderElementAsync(
116
options: {
117
code: string;
118
scope?: Record<string, unknown>;
119
enableTypeScript: boolean;
120
},
121
resultCallback: (sender: ComponentType) => void,
122
errorCallback: (error: Error) => void
123
): void;
124
```
125
126
[Code Transformation](./code-transformation.md)
127
128
### Context Integration
129
130
React Context and Higher-Order Component utilities for integrating with the live editing system. Useful for building custom components that interact with the live editing state.
131
132
```typescript { .api }
133
const LiveContext: React.Context<{
134
error?: string;
135
element?: ComponentType | null;
136
code: string;
137
newCode?: string;
138
disabled: boolean;
139
language: string;
140
theme?: typeof themes.nightOwl;
141
onError(error: Error): void;
142
onChange(value: string): void;
143
}>;
144
145
function withLive<T>(
146
WrappedComponent: ComponentType<T & { live: Record<string, unknown> }>
147
): ComponentType<T>;
148
```
149
150
[Context Integration](./context-integration.md)
151
152
### Standalone Editor
153
154
Independent code editor component with syntax highlighting that can be used outside of the live editing context for general-purpose code editing needs.
155
156
```typescript { .api }
157
function Editor(props: {
158
className?: string;
159
code: string;
160
disabled?: boolean;
161
language: string;
162
prism?: typeof Prism;
163
style?: CSSProperties;
164
tabMode?: "focus" | "indentation";
165
theme?: typeof themes.nightOwl;
166
onChange?(value: string): void;
167
}): JSX.Element;
168
```
169
170
[Standalone Editor](./standalone-editor.md)
171
172
## Types
173
174
```typescript { .api }
175
import { themes, Prism } from "prism-react-renderer";
176
import { ComponentType, ReactNode, CSSProperties } from "react";
177
178
interface EditorProps {
179
className?: string;
180
code: string;
181
disabled?: boolean;
182
language: string;
183
prism?: typeof Prism;
184
style?: CSSProperties;
185
tabMode?: "focus" | "indentation";
186
theme?: typeof themes.nightOwl;
187
onChange?(value: string): void;
188
}
189
190
interface LiveProviderProps {
191
code?: string;
192
disabled?: boolean;
193
enableTypeScript?: boolean;
194
language?: string;
195
noInline?: boolean;
196
scope?: Record<string, unknown>;
197
theme?: typeof themes.nightOwl;
198
transformCode?(code: string): string | Promise<string>;
199
children: ReactNode;
200
}
201
202
interface LiveContextValue {
203
error?: string;
204
element?: ComponentType | null;
205
code: string;
206
newCode?: string;
207
disabled: boolean;
208
language: string;
209
theme?: typeof themes.nightOwl;
210
onError(error: Error): void;
211
onChange(value: string): void;
212
}
213
214
interface GenerateOptions {
215
code: string;
216
scope?: Record<string, unknown>;
217
enableTypeScript: boolean;
218
}
219
```