Awesome GitHub RepositoriesCode Editor Components

CodeMirror is a browser-based code editor framework and modular extension system used to embed full-featured text editors into web pages. It functions as a syntax tree parsing engine and a language server protocol client, enabling structural language analysis and deep integration with external programming language services. The project is distinguished by its modular architecture, which uses a system of extensions and compartments for dynamic reconfiguration at runtime. It supports real-time collaborative editing and state synchronization through an operational transformation framework, allow

Sandpack is a browser-based toolkit for building live code editing experiences. It combines a custom Node.js runtime that executes JavaScript and npm dependencies entirely client-side with composable React components for assembling code editor interfaces, all within an iframe-sandboxed execution environment for security. The toolkit provides a hot-reload development workflow where file and dependency updates are streamed to the running preview and trigger automatic recompilation without a full page refresh. It includes a theme-override styling system for customizing the editor and preview app

JSON Editor 是一个基于 Schema 的 UI 框架和 Web 编辑器，用于生成交互式表单并验证 JSON 数据。它将 JSON Schema 规范转换为 HTML 表单元素层级，使用户能够通过结构化界面而非原始文本来操作复杂的 JSON 结构。 该框架的特色在于其基于插件的扩展系统，支持自定义解析器函数以及集成 WYSIWYG、Markdown 和语法高亮代码编辑器等专用编辑器。它采用递归 Schema 解析来处理嵌套定义，并实现了基于 if-then-else 逻辑的状态条件验证。 该项目提供了广泛的功能，包括双向数据绑定、用于网格和标签页的数组与对象布局管理，以及通过模板插值实现的动态字段同步。其组件库涵盖了标准输入以及颜色选择器、日期时间选择器、自动补全组件和文件上传接口等专用工具。 该界面支持 UI 字符串的本地化，并可与各种 CSS 框架集成，从而将结构化表单生成与视觉样式解耦。

Platform is a framework for building back-office applications and administrative dashboards using Laravel. It functions as a schema-driven UI framework and CRUD generator that automatically constructs database management interfaces, input forms, and validation rules from programmatic model definitions. The project distinguishes itself through a comprehensive backend UI kit that supports advanced data capture, including geographic coordinate mapping, tabular JSON data matrices, and marketing metadata tracking. It features a robust role-based access control system for managing resource visibili

monaco-react is a React component wrapper for the Monaco Editor, providing a declarative way to embed a browser-based text editor into web applications. It includes components for standard code editing with syntax highlighting and a specialized diff editor for side-by-side version comparison. The project enables the integration of syntax validation to flag errors and provides mechanisms for managing multiple files through unique model identifiers, which preserve undo history and selection states during switches. It allows for custom asset loading via CDN or local paths and provides access to

本项目是一个 Monaco Editor 的 React 封装，提供了一套可复用的界面组件，用于在浏览器中嵌入功能完备的代码编辑器和并排差异可视化工具。它支持将带有语法高亮和多语言支持的文本编辑器直接集成到 Web 应用中。 该库包含一个专用的代码差异查看器，利用 Monaco diff 引擎来可视化代码片段两个版本之间的变更。它提供对底层编辑器实例的编程访问，并管理编辑器的操作生命周期，包括初始化和清理。 其实现涵盖了编辑器状态管理、基于 prop 的主题和尺寸配置，以及编辑器变更事件与应用状态的同步。

Judge0 is an online code execution engine and multi-language compiler API designed to compile and run source code within isolated sandboxes. It functions as an asynchronous job processor that handles code submissions via a queue and provides a secure environment to run arbitrary programs while preventing unauthorized system access. The system distinguishes itself through a multi-stage compilation pipeline and a flexible execution model that supports both single-file submissions and multi-file program execution via archives. It employs an isolate-based sandboxing mechanism to enforce strict ha