awesome-repositories.com
博客
awesome-repositories.com

通过 AI 驱动的搜索，发现最优秀的开源仓库。

探索精选搜索开源替代品自托管软件博客网站地图
项目关于排名机制媒体报道MCP 服务器
法律隐私政策服务条款
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·
FormidableLabs avatar

FormidableLabs/react-live

0
View on GitHub↗
4,609 星标·255 分支·TypeScript·MIT·2 次浏览commerce.nearform.com/open-source/react-live↗

React Live

react-live 是一套用于浏览器内 React 转译、实时编辑和交互式文档的工具。它提供了一个 React 组件，用于构建实时演练场，其中源代码可被实时转译和渲染，并配有提供语法高亮和即时视觉反馈的实时代码编辑器。

该项目支持通过嵌入可编辑的 React 代码示例及其渲染输出来创建动态文档。它支持执行可编辑的标记或函数式组件，允许用户修改代码并立即观察结果行为。

该系统包括动态组件渲染、实时代码转译和全局依赖注入功能。它还具备错误处理机制，可在不导致应用程序崩溃的情况下检测并显示编译、语法和执行错误。

Features

  • Code Execution Playgrounds - Builds web-based environments combining a code editor with real-time React execution and visual feedback.
  • React Component Simulators - Provides a live browser environment that renders React components with automatic reloads for instant visual feedback.
  • Code Editors - Ships an embedded code editing interface with syntax highlighting for real-time modification of React components.
  • Real-Time Code Evaluation - Implements immediate evaluation of transpiled code fragments to provide instant visual feedback without a full page reload.
  • Code Editors - Ships a text editor with syntax highlighting and real-time execution for previewing React components.
  • JavaScript Transpilation - Provides a lightweight browser-based transpiler to convert JSX and modern JavaScript into executable code in real time.
  • Dynamic Runtime Evaluation - Implements a pipeline that evaluates raw text strings as executable JavaScript modules at runtime.
  • Component Documentation Sandboxes - Provides a framework for embedding editable, live code examples within component documentation.
  • React Transpilation - Converts React JSX and component source code into executable JavaScript directly within the browser.
  • Dynamic Component Rendering - Transpiles source code and renders components in real time using custom globals and type definitions.
  • Interactive Documentation Frameworks - Provides a framework for building technical documentation that integrates interactive, editable React code components.
  • Interactive Coding Tutorials - Enables the creation of interactive tutorials where learners modify React code and see instant visual results.
  • Syntax and Variable Error Detection - Detects invalid code during live editing and provides customizable error messages to guide the user.
  • Execution Context Injections - Allows injecting external libraries and variables into the transpiled code's execution context for dependency referencing.
  • Editor Scope Provisions - Provides a system for passing external variables or libraries into the editor scope for use within live code.
  • Error Boundaries - Ships a component that intercepts runtime and compilation errors to prevent the application from crashing during live editing.
  • Live Compilation Diagnostics - Detects syntax or runtime errors in provided code and displays descriptive messages to the user instantly.
  • React Component Sandboxes - Offers an isolated sandbox for rapidly iterating on React UI elements without a full build cycle.
  • Visual Feedback Systems - Provides a system for immediate visual feedback in a preview window as the user edits the source code.
  • Execution Error Captures - Captures and renders errors encountered during the transpilation or execution of live code.

Star 历史

formidablelabs/react-live 的 Star 历史图表formidablelabs/react-live 的 Star 历史图表

AI 搜索

探索更多 awesome 仓库

用简单的语言描述您的需求 —— AI 将根据相关性为您从数千个精选开源项目中进行排序。

Start searching with AI

React Live 的开源替代方案

相似的开源项目，按与 React Live 的功能重合度排序。
  • tyroprogrammer/learn-react-apptyroprogrammer 的头像

    tyroprogrammer/learn-react-app

    3,847在 GitHub 上查看↗

    This project is an interactive learning platform designed for mastering component-based user interface patterns and state management using the React library. It functions as a frontend development tutorial and course, providing a guided environment for learning declarative rendering and virtual DOM concepts. The platform distinguishes itself through a live-reload coding environment and a split-view interface for real-time code validation. These tools allow learners to compare their live code output against target solutions and use guided source-code markers to identify required edits and crit

    JavaScriptexerciseguided-exercisesjavascript
    在 GitHub 上查看↗3,847
  • zerobias/effectorzerobias 的头像

    zerobias/effector

    4,837在 GitHub 上查看↗

    Effector is a reactive state management library and data flow orchestrator designed for building complex, event-driven applications. It models application logic as a directed acyclic graph, where state updates and asynchronous side effects propagate automatically through declarative pipelines. By decoupling business logic from user interface layers, it allows developers to maintain state in independent containers that communicate via standard interfaces, ensuring the system remains framework-agnostic. The library distinguishes itself through its robust support for isolated execution scopes, w

    TypeScript
    在 GitHub 上查看↗4,837
  • swc-project/swcswc-project 的头像

    swc-project/swc

    33,909在 GitHub 上查看↗

    This project is a high-performance compiler written in Rust that transpiles TypeScript and ECMAScript into compatible JavaScript code. It functions as a TypeScript transpiler, a JavaScript minifier, and a JavaScript bundler. The system distinguishes itself through a WebAssembly plugin host that allows the execution of custom transformation rules without modifying the core binary. It also provides specialized compilation for React source code to improve runtime performance and reduce execution overhead. The broader capability surface includes source-to-source compilation, type annotation stri

    Rustbabelcompilerecmascript
    在 GitHub 上查看↗33,909
  • dotnet/csharp-notebooksdotnet 的头像

    dotnet/csharp-notebooks

    1,243在 GitHub 上查看↗

    This project provides an interactive notebook environment designed for executing C# code alongside instructional text. It functions as a platform for data science and programming education, allowing users to manipulate tabular data, visualize statistical results, and prototype machine learning workflows within a unified document format. The environment utilizes a kernel-based execution model that maintains persistent state and variable scope across notebook cells. By leveraging a language-agnostic protocol and standardized messaging, it synchronizes code execution between the editor and the b

    Jupyter Notebook
    在 GitHub 上查看↗1,243
查看 React Live 的所有 30 个替代方案→

常见问题解答

formidablelabs/react-live 是做什么的？

react-live 是一套用于浏览器内 React 转译、实时编辑和交互式文档的工具。它提供了一个 React 组件，用于构建实时演练场，其中源代码可被实时转译和渲染，并配有提供语法高亮和即时视觉反馈的实时代码编辑器。

formidablelabs/react-live 的主要功能有哪些？

formidablelabs/react-live 的主要功能包括：Code Execution Playgrounds, React Component Simulators, Code Editors, Real-Time Code Evaluation, JavaScript Transpilation, Dynamic Runtime Evaluation, Component Documentation Sandboxes, React Transpilation。

formidablelabs/react-live 有哪些开源替代品？

formidablelabs/react-live 的开源替代品包括： tyroprogrammer/learn-react-app — This project is an interactive learning platform designed for mastering component-based user interface patterns and… zerobias/effector — Effector is a reactive state management library and data flow orchestrator designed for building complex, event-driven… swc-project/swc — This project is a high-performance compiler written in Rust that transpiles TypeScript and ECMAScript into compatible… dotnet/csharp-notebooks — This project provides an interactive notebook environment designed for executing C# code alongside instructional text.… facebook/react — React is a JavaScript library for building user interfaces based on a component-driven architecture and unidirectional… seek-oss/playroom — Playroom is a frontend design system tool and JSX component sandbox. It functions as a UI component workbench and…