Awesome GitHub RepositoriesFramework Component Adapters

This project is a framework-agnostic UI library and a collection of modular web components based on the Material Design visual system. It provides a comprehensive set of interactive interface elements and a responsive web grid system for organizing page content. The library utilizes a design token theme engine to apply consistent typography, colors, and visual styles across an interface. It separates behavioral logic from rendering to ensure that components remain compatible across different JavaScript environments. The system covers responsive layout design and web form interface developmen

Omi is a web components framework, reactive UI library, and client-side routing engine. It provides a system for building modular and reusable interface elements based on standard browser web components, using signals to synchronize data changes and update the user interface automatically. The project functions as a cross-framework component tool, exporting standard web elements that operate consistently across different third-party JavaScript libraries. Its capabilities include single-page application navigation and view routing. It also covers reactive state management, component style man

Stencil is a compiler used for authoring web component libraries and developing framework-agnostic user interface elements. It transforms TypeScript and JSX source code into standard custom elements that operate natively in the browser. The project enables the implementation of design systems and enterprise component systems by sharing a single codebase across different JavaScript frameworks. It generates specific adapter layers that allow these custom elements to be used as native components in React, Angular, and Vue. The toolset incorporates ahead-of-time compilation to minimize bundle si

history.js is a cross-browser URL state manager and HTML5 History API polyfill. It functions as a single page application router that manages browser URL and history state consistently across HTML5 and HTML4 browsers, enabling navigation without triggering full page reloads. The project provides a JavaScript framework adapter that integrates history management with the event systems of jQuery, MooTools, and Prototype. It ensures compatibility through a fallback mechanism that switches to hash-based navigation and hashbang URLs when the native HTML5 History API is unavailable. The system cove

gridstack.js is a JavaScript grid layout library and responsive dashboard framework used to create interactive interfaces with draggable and resizable elements. It functions as a drag-and-drop layout manager and a JSON-serializable layout engine, allowing user-defined interface states to be persisted and restored. The library distinguishes itself through a touch-enabled grid interface and a responsive system that automatically adjusts item placement based on screen breakpoints. It features a collision-based layout engine that manages overlapping coordinates to shift or swap elements, alongsid

intl-tel-input is an international telephone input widget that provides a country-aware phone number entry experience with automatic formatting, validation, and E.164 normalization. It combines a searchable country picker with a format-as-you-type engine and a validation rule engine that checks numbers against country-specific patterns, returning machine-readable error codes when a number is invalid. The project ships as both a zero-dependency vanilla JavaScript library and as framework-specific components for React, Vue, Angular, and Svelte, all sharing the same core logic through a framewor

Inertia is a server-driven frontend framework designed to create monolithic single page applications. It acts as a state synchronization protocol and client-side routing bridge, allowing developers to build interactive experiences using modern JavaScript component libraries while keeping routing and controllers on the server. This approach eliminates the need for a separate REST or GraphQL API layer by passing data from server controllers to frontend components as props via JSON payloads. The framework distinguishes itself by utilizing adapter-based integration to link various backend environ

form-create is a JSON-driven form generator and low-code form builder that renders dynamic web forms and validation logic from configuration files. It functions as a data-driven form orchestrator for managing field dependencies and hierarchical data structures within complex layouts. The system includes a visual drag-and-drop interface for designing data entry layouts and automatically generating their corresponding configuration structures. It provides a dynamic UI component library of adaptable form fields and layout containers designed for cross-framework integration and mobile responsiven

Zag هي مكتبة آلة حالة واجهة مستخدم بدون رأس توفر منطق مكون غير مصمم لضمان سلوك متسق عبر محركات عرض مختلفة. تعمل كمجموعة أدوات لنمذجة تفاعلات واجهة المستخدم المعقدة باستخدام مخططات الحالة، وفصل المنطق الأساسي وسمات إمكانية الوصول عن التصميم المرئي. المكتبة لا تعتمد على إطار عمل، وتستخدم محولات متخصصة لربط منطق آلة الحالة الخاص بها بمكتبات JavaScript متنوعة مثل React و Solid و Vue و Svelte. يسمح هذا النهج للمطورين بالحفاظ على نموذج تفاعل واحد مع تطبيق أي حل CSS أو تصميم من خلال سمات البيانات القائمة على الحالة. تغطي Zag مجموعة واسعة من المجالات الوظيفية، بما في ذلك إدارة إمكانية الوصول الشاملة للتنقل بلوحة المفاتيح وسمات ARIA، بالإضافة إلى مجموعة واسعة من العناصر التفاعلية. تشمل هذه عناصر التحكم في الإدخال، وعناصر التنقل مثل القوائم وعلامات التبويب، ومكونات التراكب مثل مربعات الحوار والنوافذ المنبثقة، ومعالجة الوسائط المعقدة لاقتصاص الصور والتقاط التوقيعات. كما توفر أدوات لإدارة البيانات الهرمية، ومعالجة القوائم غير المتزامنة، ونظاماً لبناء جولات المنتج الموجهة.

tmagic-editor هي منصة تطوير منخفضة الكود ومنشئ صفحات مرئي يُستخدم لتصميم واجهات مستخدم الواجهة الأمامية من خلال لوحة قماشية مرئية ومكتبة مكونات. تعمل كمنسق واجهة مستخدم للواجهة الأمامية يحدد هياكل الصفحات ومولد نماذج قائم على المخطط يفسر البيانات المهيكلة لإنشاء نماذج مستخدم تفاعلية. يستخدم النظام محول مكونات عبر أطر العمل لضمان عرض متسق عبر بيئات الواجهة الأمامية المختلفة. يستخدم تسلسل التخطيط من مرئي إلى JSON لترجمة حركات الواجهة إلى بيانات مهيكلة مستمرة، والتي تتم معالجتها بعد ذلك بواسطة محرك تفسير تخطيط وقت التشغيل لإنشاء مكونات حية. تغطي المنصة تنسيق مكونات الواجهة الأمامية وتوليد النماذج القائم على المخطط، باستخدام توليد النماذج القائم على البيانات الوصفية ومزامنة الخصائص القائمة على الحالة لربط اللوحة القماشية المرئية بلوحات التهيئة.