4 Repos
Synchronization mechanisms that link visual element properties to data models for automatic mutual updates.
Distinct from Data Model Property Bindings: Candidates focus on schema binding or property injection, not bidirectional synchronization between canvas and JS data.
Explore 4 awesome GitHub repositories matching user interface & experience · Bidirectional Data-Binding. Refine with filters or upvote what's useful.
GoJS is a JavaScript diagramming library and canvas-based visualization engine used to build interactive flowcharts, organizational charts, and network diagrams. It functions as a data-driven framework that binds JavaScript data models to visual elements, enabling bidirectional synchronization between the underlying data and the graphical representation. The library features a comprehensive graph layout engine capable of automatically arranging nodes into trees, grids, circles, or force-directed layouts. It distinguishes itself through a template-based system for generating visual parts and a
Links visual element properties to a JavaScript data model for bidirectional automatic updates.
TinyBase ist ein reaktiver Datenspeicher und eine In-Memory-relationale Datenbank, die für die clientseitige Status-Persistenz entwickelt wurde. Sie dient als Local-First-Sync-Engine, die verteilten Status mithilfe von Conflict-free Replicated Data Types (CRDTs) und logischen Uhren zusammenführt, um eine deterministische Datenkonvergenz sicherzustellen. Das Projekt bietet eine Schema-Validierungsbibliothek, die externe Definitionen aus Tools wie Zod, Yup und TypeBox in typsichere Store-Definitionen konvertiert. Es stellt eine Infrastruktur für kollaboratives Echtzeit-Editieren bereit und nutzt die Synchronisation mit Automerge, Yjs und PartyKit, um einen konsistenten Status über mehrere Clients und Server hinweg beizubehalten. Die Kompetenzoberfläche umfasst relationale Datenmodellierung mit Tabellen und Fremdschlüsseln, SQL-ähnliche Abfragen und Indexierung sowie atomare Transaktionen für gruppierte Mutationen. Es unterstützt eine breite Palette an Persistenz-Adaptern, darunter Browser-Storage, SQLite und Cloudflare Durable Objects. Das System bietet zudem bidirektionales Status-Binding und deklarative Komponenten für die Integration mit React, SolidJS und Svelte.
Synchronizes interface components with the data store by automatically updating views and writing user input back.
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.
Synchronizes the internal JSON data model with the DOM state via programmatic getters and setters.
Tweakpane ist ein Web-GUI-Kontrollpanel und JavaScript-Parameter-Debugger zur Inspektion des Frontend-Status und zur Überwachung von Echtzeit-Variablenänderungen. Es bietet eine grafische Oberfläche zum Anpassen von Anwendungsparametern und zum Verfolgen von Werten während der Programmausführung. Das Projekt ermöglicht die Erstellung interaktiver Eingaben und schreibgeschützter Wertemonitore, die direkt an Datenvariablen gebunden sind. Es organisiert diese Steuerelemente durch ein hierarchisches Layout aus Ordnern und Tabs und unterstützt die Serialisierung von Kontrollpanel-Konfigurationen und Parameterzuständen in JSON-Dateien zur Persistenz. Das Tool deckt Echtzeit-Parameter-Tuning, Anwendungsstatus-Überwachung und die Entwicklung strukturierter Kontrollpanels ab.
Provides bidirectional synchronization between UI input elements and JavaScript variables for real-time data mirroring.