Awesome GitHub RepositoriesComponent and React Utilities

react-draggable is a drag and drop library and coordinate-based position manager for React. It functions as a component wrapper that adds draggable behavior to user interface elements, enabling them to be moved via mouse or touch interactions. The library provides touch-enabled interaction tools that unify pointer events across desktop browsers and touch screen devices. It utilizes CSS transforms to handle element movement and coordinate tracking. The system covers movement constraints such as axis restriction and boundary clamping to confine elements within specific areas. It includes posit

This is a low-code visual drag-and-drop editor project for building web page layouts. It provides a canvas-based environment where users can assemble pages by placing, resizing, and rotating pre-built UI components through direct mouse interaction. The editor includes a grid-based alignment system that snaps components to invisible grid lines or other component edges for precise positioning. Components can be grouped into single units or locked in place to prevent accidental movement, and animations or custom actions can be bound to user interactions like clicks or hovers. An undo-redo comman

Dieses Projekt ist ein System von Komponenten und Utilities zur Verwaltung von Split-View-Layouts in React-Anwendungen. Es bietet ein System für in der Größe veränderbare Panels, das Inhalte in horizontalen und vertikalen Bereichen mit verschiebbaren Grenzen organisiert. Das System enthält ein einklappbares UI-Layout-Tool zum Umschalten der Sichtbarkeit von Panels, um den verfügbaren Bildschirmplatz zu maximieren. Es unterstützt rekursive Panel-Verschachtelung, wodurch Layouts als Bäume strukturiert werden können, in denen Panels weitere Gruppen von in der Größe veränderbaren Panels enthalten. Die Bibliothek deckt die Layout-Konstruktion durch die Verwendung von Panel-Dimensions-Constraints ab, was die Definition von Mindest- und Maximalgrößen ermöglicht. Sie verwaltet dynamische Viewport-Partitionierung und bietet Mechanismen zum Aufbau anpassbarer Raster und Inhaltsbereiche.

Cherry Markdown ist ein webbasierter Markdown-Editor und eine Parsing-Engine, die Markup-Text in bereinigtes HTML mit einer synchronisierten Echtzeit-Vorschau umwandelt. Er fungiert als Rich-Text-Schnittstelle und WYSIWYG-Tool und bietet ein System zur Umwandlung von Markup-Strings in HTML-Dokumente oder portable Formate. Das Projekt zeichnet sich durch High-Performance-Rendering und ein flexibles Erweiterbarkeitsmodell aus. Es verwendet Virtual-DOM-Diffing und partielles Rendering, um die Reaktionsfähigkeit bei großen Dokumenten aufrechtzuerhalten, und ermöglicht die Erstellung benutzerdefinierter Parsing-Regeln und spezialisierter HTML-Komponenten über ein Plugin-System. Die Funktionsoberfläche des Editors umfasst eine umfassende Inhaltsverwaltung für mathematische Formeln, Diagramme und Rich Media sowie fortgeschrittene Eingabesteuerungen wie Multi-Cursor-Editing und Vim-Style-Modus-Navigation. Er bietet zudem einen robusten Dokumenten-Export-Workflow und ein Design-Token-System für tiefgreifende visuelle Anpassungen des Editors und der Vorschau-Bereiche. Das System enthält eine Sicherheitsschicht, die Whitelist-basiertes HTML-Sanitizing verwendet, um Injection-Angriffe zu verhindern.

Dieses Projekt ist eine React-UI-Interaktionsbibliothek und ein Komponenten-Geometrie-Manager. Es bietet eine Reihe von Tools zur Erstellung von Elementen innerhalb einer React-Anwendung, die Benutzer verschieben und in der Größe ändern können. Die Bibliothek ermöglicht die Anpassung von Interaktions-Handles und erlaubt die Anwendung benutzerdefinierter Komponenten, Stile oder CSS-Klassen auf die Resize-Handles, um sie an spezifische visuelle Designs anzupassen. Das System deckt die Elementmanipulation sowohl durch direkte Benutzerinteraktion als auch durch programmatische Geometrie-Updates ab. Es enthält Funktionen für Grid-Snapping, Begrenzungseinschränkungen und gesperrte Seitenverhältnisse, um die Position und Größe von UI-Komponenten zu steuern.

react-rnd is a JavaScript UI interaction library and React component used to create elements that are both draggable and resizable within a browser window. It functions as a constraint-based layout component that wraps DOM elements to enforce boundaries, grid snapping, and aspect ratio locks during manual adjustments. The library allows for the definition of custom interaction handles to act as the primary triggers for dragging and resizing actions. It supports axis restrictions, boundary limits, and the ability to round position and dimension values to specified pixel increments. The system

This project is a React-based rich text editor designed for authoring and managing markdown documents through a visual interface. It functions as a modular framework that renders markdown in real-time, allowing users to create structured content without manual syntax entry. The editor is built on a plugin-based architecture that enables developers to extend functionality while maintaining minimal application bundle sizes. It provides a comprehensive command interface for programmatic content manipulation and utilizes reactive state management to ensure the visual editing surface remains synch

Easy Markdown Editor is a browser-based JavaScript library designed to replace standard HTML text areas with an interactive interface for structured document creation. It provides a web-based environment for Markdown content authoring, combining raw syntax input with visual formatting tools and real-time preview capabilities. The editor distinguishes itself through a plugin-driven toolbar architecture that allows for extensive interface customization, including adjustable layouts, icon visibility, and visual themes. It also integrates automated draft persistence, which saves content to local

Dieses Projekt ist eine modulare Rich-Text-Editing-Komponente für React-Anwendungen, die auf dem ProseMirror-Framework basiert. Sie bietet ein visuelles Interface zum Verfassen und Formatieren von Inhalten mittels Markdown, während sie gleichzeitig ein strukturiertes Dokumentmodell beibehält, das zurück in sauberen Markdown-Code serialisiert wird. Der Editor ist auf hohe Erweiterbarkeit ausgelegt und ermöglicht es Entwicklern, benutzerdefinierte Verhaltensweisen und Formatierungsbefehle durch eine plugin-gesteuerte Architektur zu injizieren. Er unterstützt granulare Kontrolle über die Bearbeitungsumgebung, einschließlich der Möglichkeit, Standard-Styles zu überschreiben, Interface-Texte zu lokalisieren und spezifische Verhaltensweisen wie Read-Only-Modi oder Zeichenlimits zu konfigurieren. Das System enthält umfassende Tools zur Verwaltung von Rich Media und interaktiven Inhalten, mit benutzerdefinierten Callbacks für Datei-Uploads und der Möglichkeit, Link-Muster durch eingebettete Komponenten zu ersetzen. Es stellt zudem programmatische Interfaces für die Dokumenteninteraktion bereit, die es Entwicklern ermöglichen, strukturelle Metadaten zu extrahieren, die Cursor-Positionierung zu verwalten und Statusänderungen mit externen Datenspeicherungsschichten zu synchronisieren.

This project is a collection of React components that implement a responsive grid system using CSS Flexbox and CSS Modules. It provides reusable building blocks for constructing fluid interfaces that organize page content into flexible rows and columns, which automatically adjust their size and alignment based on viewport dimensions. The library distinguishes itself by decoupling style definitions from component logic, which facilitates consistent rendering across both server-side environments and client-side runtimes. By utilizing CSS Modules, it encapsulates styles into local scopes to prev

Responsive React grid system built with styled-system[], with support for styled-components[] and emotion[] (previously called grid-styled)

Responsive React Flexbox Grid System

json-joy ist eine umfassende Bibliothek zum Aufbau kollaborativer Echtzeitanwendungen und verteilter Systeme. Sie bietet ein robustes Framework zur Verwaltung geteilter JSON-ähnlicher Datenstrukturen, die konkurrierende Bearbeitungen mehrerer Benutzer automatisch zusammenführen und so einen konsistenten Zustand über alle Replikate hinweg sicherstellen, ohne dass ein zentraler Koordinationsserver erforderlich ist. Das Projekt zeichnet sich durch einen hochperformanten Ansatz bei der Datenverarbeitung aus und nutzt konfliktfreie replizierte Datentypen (CRDTs) und logische uhrbasierte Synchronisierung, um die Datenintegrität zu wahren. Es enthält eine spezialisierte Engine zum Navigieren und Manipulieren komplexer verschachtelter Objekte unter Verwendung standardisierter Pointer-Syntax, neben einem Toolkit zum Anwenden granularer, atomarer Modifikationen auf Dokumente. Diese Funktionen werden durch eine Hochgeschwindigkeits-Serialisierungsbibliothek ergänzt, die kompakte Binärformate unterstützt, um Netzwerkbandbreite und Speichereffizienz zu optimieren. Über die Kern-Synchronisationslogik hinaus bietet die Bibliothek eine breite Suite von Tools für reaktives State-Management und UI-Integration. Sie stellt deklarative Hooks und Komponenten bereit, die geteilte Datenmodelle direkt an webbasierte Text- und Code-Editoren binden und Funktionen wie Echtzeit-Präsenz, Remote-Cursor-Rendering und lokale Historienverfolgung ermöglichen. Das System unterstützt zudem fortgeschrittene Datenverarbeitung, einschließlich Schema-Validierung, Ausdrucksauswertung und baumbasierter Datenorganisation mit hoher Performance.

Implementation of css flexbox in react with inline styles. It is written in ES6 and requires an ES6 to ES5 transpiler. If there is need for it I can add a transpiled version to the repo.

A Custom Element to make the basics of flexbox easier to use