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 ist ein schema-gesteuertes UI-Framework und ein webbasierter Editor, der dazu verwendet wird, interaktive Formulare zu generieren und JSON-Daten zu validieren. Er übersetzt JSON-Schema-Spezifikationen in eine Hierarchie von HTML-Formularelementen, was es Benutzern ermöglicht, komplexe JSON-Strukturen über eine strukturierte Schnittstelle anstelle von rohem Text zu manipulieren. Das Framework zeichnet sich durch ein plugin-basiertes Erweiterungssystem aus, das benutzerdefinierte Resolver-Funktionen und die Integration spezialisierter Editoren unterstützt, wie z. B. WYSIWYG-, Markdown- und syntax-hervorgehobene Code-Editoren. Es verwendet rekursive Schema-Auflösung, um verschachtelte Definitionen zu handhaben, und implementiert zustandsbasierte bedingte Validierung unter Verwendung von if-then-else-Logik. Das Projekt bietet ein breites Spektrum an Fähigkeiten, einschließlich bidirektionalem Data-Binding, Array- und Objekt-Layout-Management für Grids und Tabs sowie dynamischer Feld-Synchronisierung via Template-Interpolation. Seine Komponentenbibliothek deckt Standard-Inputs neben spezialisierten Tools wie Farbwählern, Datum-Zeit-Wählern, Autocomplete-Komponenten und Datei-Upload-Schnittstellen ab. Die Schnittstelle unterstützt die Lokalisierung von UI-Strings und integriert sich in verschiedene CSS-Frameworks, um die strukturelle Formulargenerierung vom visuellen Styling zu entkoppeln.

Platform ist ein Framework für den Aufbau von Back-Office-Anwendungen und administrativen Dashboards unter Verwendung von Laravel. Es fungiert als schema-gesteuertes UI-Framework und CRUD-Generator, der automatisch Datenbankverwaltungsschnittstellen, Eingabeformulare und Validierungsregeln aus programmatischen Modelldefinitionen konstruiert. Das Projekt zeichnet sich durch ein umfassendes Backend-UI-Kit aus, das fortgeschrittene Datenerfassung unterstützt, einschließlich geografischem Koordinaten-Mapping, tabellarischen JSON-Datenmatrizen und Tracking von Marketing-Metadaten. Es bietet ein robustes rollenbasiertes Zugriffskontrollsystem zur Verwaltung der Ressourcensichtbarkeit und des Routenschutzes, neben einer globalen Volltextsuche, die Daten über mehrere Modelle hinweg indiziert. Die Plattform deckt ein breites Spektrum an Funktionen ab, einschließlich asynchronem Laden von Daten, Multi-Channel-Benachrichtigungssystemen und einer Bibliothek spezialisierter Formularkomponenten für Rich-Text- und Dateimanagement. Sie bietet zudem Tools zur Datenvisualisierung durch Modellaggregation und Charting sowie Utilities für partielles Page-Refreshing, um eine Single-Page-Application-Erfahrung zu simulieren. Integrationsoptionen erlauben die Verbindung bestehender Controller und Legacy-Templates, um eine schrittweise Migration von Funktionen in das Framework zu erleichtern.

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

Dieses Projekt ist ein React-Wrapper für den Monaco Editor und bietet eine Reihe wiederverwendbarer Interface-Komponenten zum Einbetten funktionsreicher, browserbasierter Code-Editoren und Side-by-Side-Diff-Visualisierungstools. Es ermöglicht die Integration eines Texteditors mit Syntax-Highlighting und Mehrsprachunterstützung direkt in Webanwendungen. Die Bibliothek enthält einen dedizierten Code-Diff-Viewer, der die Monaco-Diff-Engine nutzt, um Änderungen zwischen zwei verschiedenen Versionen von Code-Snippets zu visualisieren. Sie bietet programmatischen Zugriff auf die zugrunde liegenden Editor-Instanzen und verwaltet den operativen Lebenszyklus des Editors, einschließlich Initialisierung und Bereinigung. Die Implementierung deckt Editor-State-Management, prop-gesteuerte Konfiguration für Themes und Dimensionen sowie die Synchronisation von Editor-Änderungsereignissen mit dem Anwendungszustand ab.

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