tessl/npm-react-live

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

—

Pending

Overview

Eval results

Files

React Live

Name: tessl/npm-react-live
Author: tessl

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;
}

Install with Tessl CLI