or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

code-transformation.mdcontext-integration.mdindex.mdlive-components.mdstandalone-editor.md
tile.json

tessl/npm-react-live

A production-focused playground for live editing React code with real-time preview capabilities

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/react-live@4.1.x

To install, run

npx @tessl/cli install tessl/npm-react-live@4.1.0

index.mddocs/

React Live

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.

Package Information

  • Package Name: react-live
  • Package Type: npm
  • Language: TypeScript with React
  • Installation: npm install react-live

Core Imports

import { 
  LiveProvider, 
  LiveEditor, 
  LivePreview, 
  LiveError,
  LiveContext,
  withLive
} from "react-live";

For CommonJS:

const { 
  LiveProvider, 
  LiveEditor, 
  LivePreview, 
  LiveError 
} = require("react-live");

Basic Usage

import React from "react";
import { LiveProvider, LiveEditor, LivePreview, LiveError } from "react-live";

function App() {
  const code = `
    function Welcome(props) {
      return <h1>Hello, {props.name}!</h1>;
    }
    
    <Welcome name="World" />
  `;

  return (
    <LiveProvider code={code}>
      <LiveEditor />
      <LivePreview />
      <LiveError />
    </LiveProvider>
  );
}

Architecture

React Live is built around several key components:

  • Context Provider: LiveProvider manages state and provides context for live editing functionality
  • Editor Component: LiveEditor provides syntax-highlighted code editing with real-time updates
  • Preview Component: LivePreview renders the live output of the edited code in a safe environment
  • Error Handling: LiveError displays compilation and runtime errors with detailed feedback
  • Transformation Engine: Built-in TypeScript/JSX transformation using Sucrase for real-time compilation
  • Code Execution: Safe evaluation environment with configurable scope and error boundaries

Capabilities

Live Editing Components

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.

function LiveProvider(props: {
  code?: string;
  disabled?: boolean;
  enableTypeScript?: boolean;
  language?: string;
  noInline?: boolean;
  scope?: Record<string, unknown>;
  theme?: typeof themes.nightOwl;
  transformCode?(code: string): string | Promise<string>;
  children: ReactNode;
}): JSX.Element;

function LiveEditor(props: Partial<EditorProps>): JSX.Element;

function LivePreview<T extends React.ElementType>(props: {
  Component?: T;
} & React.ComponentPropsWithoutRef<T>): JSX.Element;

function LiveError<T extends Record<string, unknown>>(props: T): JSX.Element | null;

Live Components

Code Transformation

Low-level utilities for transforming and executing JSX/TypeScript code in real-time. Used internally by LiveProvider but also available for custom implementations.

function generateElement(
  options: {
    code: string;
    scope?: Record<string, unknown>;
    enableTypeScript: boolean;
  },
  errorCallback: (error: Error) => void
): ComponentType;

function renderElementAsync(
  options: {
    code: string;
    scope?: Record<string, unknown>;
    enableTypeScript: boolean;
  },
  resultCallback: (sender: ComponentType) => void,
  errorCallback: (error: Error) => void
): void;

Code Transformation

Context Integration

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.

const LiveContext: React.Context<{
  error?: string;
  element?: ComponentType | null;
  code: string;
  newCode?: string;
  disabled: boolean;
  language: string;
  theme?: typeof themes.nightOwl;
  onError(error: Error): void;
  onChange(value: string): void;
}>;

function withLive<T>(
  WrappedComponent: ComponentType<T & { live: Record<string, unknown> }>
): ComponentType<T>;

Context Integration

Standalone Editor

Independent code editor component with syntax highlighting that can be used outside of the live editing context for general-purpose code editing needs.

function Editor(props: {
  className?: string;
  code: string;
  disabled?: boolean;
  language: string;
  prism?: typeof Prism;
  style?: CSSProperties;
  tabMode?: "focus" | "indentation";
  theme?: typeof themes.nightOwl;
  onChange?(value: string): void;
}): JSX.Element;

Standalone Editor

Types

import { themes, Prism } from "prism-react-renderer";
import { ComponentType, ReactNode, CSSProperties } from "react";

interface EditorProps {
  className?: string;
  code: string;
  disabled?: boolean;
  language: string;
  prism?: typeof Prism;
  style?: CSSProperties;
  tabMode?: "focus" | "indentation";
  theme?: typeof themes.nightOwl;
  onChange?(value: string): void;
}

interface LiveProviderProps {
  code?: string;
  disabled?: boolean;
  enableTypeScript?: boolean;
  language?: string;
  noInline?: boolean;
  scope?: Record<string, unknown>;
  theme?: typeof themes.nightOwl;
  transformCode?(code: string): string | Promise<string>;
  children: ReactNode;
}

interface LiveContextValue {
  error?: string;
  element?: ComponentType | null;
  code: string;
  newCode?: string;
  disabled: boolean;
  language: string;
  theme?: typeof themes.nightOwl;
  onError(error: Error): void;
  onChange(value: string): void;
}

interface GenerateOptions {
  code: string;
  scope?: Record<string, unknown>;
  enableTypeScript: boolean;
}