tessl/npm-react-live

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

—

Pending

Overview

Eval results

Files

Live Components

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

Core React components that work together to provide a complete live code editing experience. These components use React Context for state management and provide real-time code editing, transformation, and preview functionality.

Capabilities

LiveProvider

Main context provider that manages code transformation, execution, and state for all child components. This component handles the core logic of compiling and executing user code in a safe environment.

/**
 * Main context provider for live code editing functionality
 * @param props - Configuration and child components
 */
function LiveProvider(props: {
  /** Initial code to display and execute */
  code?: string;
  /** Whether editing is disabled */
  disabled?: boolean;
  /** Enable TypeScript transformations (default: true) */
  enableTypeScript?: boolean;
  /** Language for syntax highlighting (default: "tsx") */
  language?: string;
  /** Whether to use no-inline evaluation mode requiring explicit render() calls */
  noInline?: boolean;
  /** Variables available in code execution context */
  scope?: Record<string, unknown>;
  /** Prism syntax highlighting theme */
  theme?: typeof themes.nightOwl;
  /** Optional code transformation function (sync or async) */
  transformCode?(code: string): string | Promise<string>;
  /** Child components to render within the provider context */
  children: ReactNode;
}): JSX.Element;

Usage Examples:

import { LiveProvider, LiveEditor, LivePreview } from "react-live";
import { themes, Prism } from "prism-react-renderer";

// Basic usage
function BasicExample() {
  return (
    <LiveProvider code="<h1>Hello World</h1>">
      <LiveEditor />
      <LivePreview />
    </LiveProvider>
  );
}

// With scope and custom theme
function AdvancedExample() {
  const scope = { 
    Button: MyButton, 
    utils: { formatDate, formatCurrency } 
  };
  
  const code = `
    <div>
      <Button onClick={() => alert('Clicked!')}>
        Click me
      </Button>
      <p>{utils.formatDate(new Date())}</p>
    </div>
  `;

  return (
    <LiveProvider 
      code={code} 
      scope={scope}
      theme={themes.dracula}
      enableTypeScript={true}
    >
      <LiveEditor />
      <LivePreview />
    </LiveProvider>
  );
}

// No-inline mode (requires render() calls)
function NoInlineExample() {
  const code = `
    function Welcome({ name }) {
      return <h1>Hello, {name}!</h1>;
    }
    
    render(<Welcome name="React" />);
  `;

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

// With async transformation
function TransformExample() {
  const transformCode = async (code: string) => {
    // Add import statements or other transformations
    return `import React from 'react';\n${code}`;
  };

  return (
    <LiveProvider code="<div>Transformed!</div>" transformCode={transformCode}>
      <LiveEditor />
      <LivePreview />
    </LiveProvider>
  );
}

LiveEditor

Code editor component with syntax highlighting that consumes the LiveProvider context. Provides a rich editing experience with configurable themes and tab behavior.

/**
 * Code editor component with syntax highlighting
 * @param props - Editor configuration (extends partial EditorProps)
 */
function LiveEditor(props: Partial<{
  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;

Usage Examples:

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

// Basic usage (inherits from LiveProvider context)
<LiveProvider code="<h1>Hello</h1>">
  <LiveEditor />
</LiveProvider>

// With custom styling
<LiveProvider code="<h1>Hello</h1>">
  <LiveEditor 
    style={{ 
      fontFamily: 'Monaco, monospace',
      fontSize: 14,
      backgroundColor: '#f5f5f5'
    }}
    className="my-editor"
  />
</LiveProvider>

// With custom tab behavior
<LiveProvider code="<h1>Hello</h1>">
  <LiveEditor tabMode="focus" />
</LiveProvider>

LivePreview

Preview component that renders the executed code result in a safe environment with error boundaries. Supports custom wrapper components for styling and layout control.

/**
 * Preview component that renders executed code results
 * @param props - Preview configuration and wrapper component props
 */
function LivePreview<T extends keyof JSX.IntrinsicElements>(props: {
  Component?: T;
} & React.ComponentPropsWithoutRef<T>): JSX.Element;

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

Usage Examples:

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

// Basic usage with default div wrapper
<LiveProvider code="<h1>Hello World</h1>">
  <LiveEditor />
  <LivePreview />
</LiveProvider>

// With custom wrapper component
<LiveProvider code="<button>Click me</button>">
  <LiveEditor />
  <LivePreview 
    Component="section" 
    className="preview-area"
    style={{ padding: 20, border: '1px solid #ccc' }}
  />
</LiveProvider>

// With custom React component wrapper
function PreviewContainer({ children, ...props }) {
  return (
    <div className="custom-preview" {...props}>
      <h3>Preview:</h3>
      {children}
    </div>
  );
}

<LiveProvider code="<p>Custom wrapper example</p>">
  <LiveEditor />
  <LivePreview 
    Component={PreviewContainer}
    data-testid="preview"
  />
</LiveProvider>

LiveError

Error display component that shows compilation and runtime errors with detailed feedback. Only renders when errors are present in the live editing context.

/**
 * Error display component for showing compilation and runtime errors
 * @param props - Props passed to underlying pre element
 * @returns JSX element when errors exist, null otherwise
 */
function LiveError<T extends Record<string, unknown>>(props: T): JSX.Element | null;

Usage Examples:

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

// Basic error display
<LiveProvider code="<InvalidComponent />">
  <LiveEditor />
  <LivePreview />
  <LiveError />
</LiveProvider>

// With custom styling
<LiveProvider code="const broken = <div><span></div>;">
  <LiveEditor />
  <LivePreview />
  <LiveError 
    style={{ 
      color: 'red', 
      background: '#ffe6e6',
      padding: 10,
      marginTop: 10
    }}
    className="error-display"
  />
</LiveProvider>

// Complete example with error handling
function CodePlayground() {
  const [code, setCode] = useState('<h1>Hello World</h1>');
  
  return (
    <div className="playground">
      <LiveProvider code={code}>
        <div className="editor-section">
          <LiveEditor />
        </div>
        <div className="preview-section">
          <LivePreview />
          <LiveError style={{ color: 'red', marginTop: 10 }} />
        </div>
      </LiveProvider>
    </div>
  );
}

Error Handling

All live components include comprehensive error handling:

Compilation Errors: TypeScript/JSX syntax errors are caught during transformation
Runtime Errors: Component rendering errors are caught by error boundaries
Transformation Errors: Custom transformCode function errors are handled gracefully
Scope Errors: Undefined variables and missing imports are reported clearly

Common error scenarios:

// Syntax errors
const syntaxError = '<div><span></div>'; // Mismatched tags

// Runtime errors
const runtimeError = '<button onClick={undefined.foo()}>Click</button>';

// Scope errors
const scopeError = '<CustomComponent />'; // Not in scope

// TypeScript errors (when enableTypeScript=true)
const typeError = 'const num: number = "string";';

Install with Tessl CLI