26 repository-uri
React components that map directly to standard browser HTML and SVG elements with enhanced prop support.
Explore 26 awesome GitHub repositories matching user interface & experience · HTML Element Wrappers. Refine with filters or upvote what's useful.
React este o bibliotecă JavaScript pentru construirea de interfețe utilizator bazată pe o arhitectură orientată pe componente și flux de date unidirecțional.
Generates lightweight object descriptions of interface components that map to standard HTML elements.
This project is a cross-platform mobile framework that enables the development of native iOS and Android applications from a single codebase. It utilizes a declarative component-based model where developers define user interfaces using a syntax extension that maps directly to underlying platform-native view primitives. By decoupling application logic from the host platform's main thread, the framework maintains a consistent native view hierarchy while ensuring that JavaScript execution remains independent of UI rendering. The framework distinguishes itself through a robust bridge architecture
Exposes core interface building blocks like views, text, and images that respond to user touch and input events.
Material Design Lite is a Material Design UI library and CSS design system. It serves as a front-end component framework providing a collection of HTML, CSS, and JavaScript components that implement the Material Design visual language for web applications. The project enables the implementation of Material Design components and a standardized design language to maintain a consistent look and feel across user interfaces. It supports frontend UI development and responsive web styling through pre-built components. The library facilitates rapid web prototyping by providing pre-styled components
Encapsulates Material design logic and styles within standard HTML elements using specific attribute markers.
This project is a cross-platform user interface framework that maps mobile-native component primitives to standard web elements. It enables developers to build consistent applications that function across both mobile and web environments by providing a unified library of components and shared logic. The framework distinguishes itself through a specialized style engine that converts JavaScript object-based declarations into optimized, scoped CSS at runtime. It also features a responsive layout engine that implements a flexbox-based system, ensuring that interfaces adapt dynamically to differen
Maps component roles to native HTML elements automatically to provide semantic structure.
Chosen is a JavaScript library that transforms standard HTML select elements into searchable, user-friendly dropdown menus. It functions as a form input enhancement tool designed to improve the usability of long or complex selection lists. The library provides a multi-select interface that allows users to manage multiple options with selection limit controls and clear buttons. It also includes built-in support for right-to-left languages, adjusting the layout and text direction of the user interface components accordingly. The project covers a range of selection interface capabilities, inclu
Wraps standard HTML select boxes in a custom container to manage interactions and form data.
Riot is a component-based library for building user interfaces through modular, single-file components. It functions as a framework for creating reusable elements that combine markup, logic, and scoped styles, which are then compiled into standard JavaScript functions for browser execution. The library distinguishes itself by utilizing direct rendering, which updates the document object model by tracking state changes without the overhead of a virtual representation. It supports server-side rendering and hydration to improve initial page load performance and search engine indexing. Developers
Connects custom component behavior to standard HTML elements to maintain compatibility with existing structures.
Rete is a framework for building interactive, node-based visual interfaces and dataflow programming environments. It provides a core engine that processes directed graphs, allowing developers to define modular logic where nodes represent operations and connections represent the flow of data or control. By decoupling the graph logic from the user interface, the framework enables the creation of custom visual editors that can be integrated into various frontend component libraries. The project distinguishes itself through a highly extensible, signal-driven architecture that supports complex req
Allows embedding interactive HTML elements directly into 3D node-based workspaces.
React is a JavaScript library for building user interfaces through the composition of modular, self-contained components. It employs a declarative programming model where developers describe the desired visual state, and the library automatically manages the underlying document updates and state synchronization. By utilizing a virtual representation of the document, it calculates and applies minimal changes to the browser, ensuring efficient rendering even in complex applications. The library distinguishes itself through a sophisticated scheduling system that manages rendering work in increme
Maps standard browser HTML and SVG elements to components with enhanced property support for declarative markup.
Buefy is a lightweight user interface component library built for Vue.js. It serves as a programmatic wrapper for the Bulma CSS framework, providing a set of pre-styled layout utilities, form components, and structural wrappers to ensure a consistent visual identity. The library provides a comprehensive suite of form elements, including specialized date and time pickers, autocomplete inputs, and validation wrappers. It also includes layout tools such as navigation bars, off-canvas sidebars, and modal overlays, as well as notification systems for banners, snackbars, and toasts. Additional cap
Wraps standard HTML elements in Vue components to provide reactive properties and prop-driven configuration.
Buefy is a user interface component library built specifically for Vue.js applications. It provides a collection of pre-styled interface elements and a responsive web UI kit designed to implement the Bulma CSS framework's styling and grid system. The project enables rapid frontend prototyping by offering a standardized library of semantic UI elements. These components allow for the creation of flexible layouts that automatically adjust to different screen sizes and devices. The library covers broad capabilities for responsive web design and the construction of user interfaces through the int
Wraps standard HTML elements in Vue components to enable reactive property binding and event handling.
Blazor is a .NET framework for building interactive web user interfaces using C# instead of JavaScript. It provides a component-based UI composition model where reusable, self-contained UI elements are built with C# logic and Razor markup, supporting nesting, parameters, and lifecycle events. The framework offers two primary rendering models: a client-side runtime that compiles C# to WebAssembly and executes directly in the browser, and a server-side model that renders UI on the server and sends incremental DOM updates over a persistent SignalR connection. A central capability of Blazor is it
Captures references to rendered HTML elements and passes them to JavaScript for direct DOM manipulation.
MediaElement is an HTML5 media player framework that provides a unified interface for playing audio and video across different web browsers. It acts as a cross-browser media API and a multi-source video wrapper, ensuring consistent playback controls and behavior regardless of the underlying file format or source. The framework integrates adaptive bitrate streaming for HLS and MPEG-DASH protocols and allows for the embedding of content from third-party hosting services such as YouTube and SoundCloud. It uses a provider-based abstraction to translate generic playback commands into source-specif
Encapsulates native audio and video tags to normalize behavior and styling across browsers.
Simple Form is a Ruby on Rails form builder that provides a domain specific language for generating HTML forms mapped to database models. It functions as an automatic model input mapper, selecting the appropriate HTML input element based on the database column type of a model. The project employs a markup independent approach to separate business requirements from final HTML rendering and CSS. It provides a customizable form component library consisting of extensible builders and wrappers to standardize layout structures and input behaviors. The library covers database-driven form generation
Provides wrappers that encapsulate standard form elements to apply consistent CSS classes and HTML structures.
Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys
Renders valid HTML tags as visual components, updating attributes based on the element type for semantic accuracy.
iCheck is a custom form input library that replaces native checkboxes and radio buttons with customizable visual wrappers. It ensures a uniform visual experience across different browsers by masking native form elements and rendering custom HTML structures. The project provides a common interface that functions across both jQuery and Zepto. It includes a dynamic styler that detects and applies custom styles to form elements added to a page after the initial load. The library incorporates an accessibility layer that injects ARIA attributes and keyboard event listeners to ensure custom inputs
Uses custom HTML wrappers to mask native form elements for consistent cross-browser visual styling.
LoginCritter is an interactive avatar UI component and real-time input visualizer for web forms. It functions as a gamified form element that animates a character's movements and gaze in response to text field focus and user typing activity. The component maps cursor positions and character counts to smooth avatar transformations and head rotations. It manages emotional state transitions by switching visual moods and expressions based on specific text triggers and input volume. The system utilizes an event-driven animation loop to synchronize the character's state with DOM input events. This
Brings game-like visual elements into web forms to make data entry more entertaining for the visitor.
re-frame este un framework funcțional pentru construirea de aplicații single-page în ClojureScript. Acesta oferă o bază de date centralizată și imutabilă care servește drept unică sursă de adevăr pentru întreaga stare a aplicației, impunând un flux de date unidirecțional strict, unde evenimentele declanșează tranziții de stare și actualizări ulterioare ale vizualizărilor. Framework-ul se distinge printr-un graf de semnale reactive și un pipeline de middleware bazat pe interceptoare. Tratând logica aplicației ca pe o secvență de evenimente bazate pe date și efecte secundare declarative, acesta decuplează logica de business de stratul de vizualizare. Această arhitectură permite dezvoltatorilor să gestioneze tranziții complexe de stare și operațiuni externe prin funcții pure, asigurându-se că efectele secundare sunt executate de un interpretor separat, nu prin apeluri imperative. Sistemul include o suită cuprinzătoare de capabilități pentru gestionarea arhitecturii aplicației, inclusiv derivarea reactivă a datelor, reconcilierea vizualizărilor bazată pe abonamente și gestionarea stării bazată pe evenimente. Suportă fluxuri de lucru avansate, cum ar fi trasarea evenimentelor, checkpoint-uri de stare și capacitatea de a simula (stub) efecte secundare pentru testare izolată. Proiectul este conceput pentru integrarea cu React, utilizând reconcilierea virtual DOM pentru a actualiza eficient interfețele utilizator. Oferă un set robust de utilitare pentru gestionarea problemelor transversale, gestionarea grafurilor complexe de flux de date și coordonarea operațiunilor asincrone într-un pipeline de evenimente secvențial și predictibil.
Triggers focus on specific interface elements after rendering to ensure the cursor is correctly placed.
Acest proiect este un toolkit bazat pe TypeScript care oferă decoratori și structuri bazate pe clase pentru construirea componentelor Vue.js. Acționează ca un wrapper care înlocuiește configurația obiectului options API standard cu o bibliotecă bazată pe clase, permițând dezvoltatorilor să definească logica componentei, starea și metadatele folosind proprietăți tipizate. Toolkit-ul se concentrează pe utilizarea decoratorilor TypeScript pentru a mapa proprietățile clasei la opțiunile componentei, cum ar fi props, modele și watchere. Permite validarea prop-urilor bazată pe tipuri și oferă o sintaxă structurată pentru gestionarea sincronizării stării reactive și a comunicării între componente. Biblioteca acoperă arii largi de capabilități, inclusiv partajarea ierarhică a datelor prin dependency injection, two-way model binding și observarea schimbărilor de proprietăți. Include, de asemenea, sisteme pentru crearea de referințe tipizate către elemente HTML sau instanțe de componente copil pentru manipulare directă.
Provides a typed reference system for accessing rendered HTML elements and child components.
Nerv is an isomorphic JavaScript framework and virtual DOM library used for component-based user interface development. It functions as a React-compatible library that maintains compatibility with the React 16 API. The framework is specifically designed as a legacy browser UI framework, providing the internal logic necessary to maintain consistent behavior in older environments, including Internet Explorer 8. Its capabilities cover isomorphic web rendering through server-side HTML generation and client-side hydration. The library also includes frontend error handling to intercept component c
Allows obtaining direct references to rendered HTML elements for manual DOM manipulation.
imaskjs este o bibliotecă de mascare a input-ului JavaScript și un manager de input DOM utilizat pentru a impune modele, tipuri de date și intervale specifice asupra input-ului utilizatorului în timp real. Servește ca bibliotecă de formatare a datelor și instrument de validare a input-ului care transformă valorile brute de intrare în șiruri formatate folosind măști și pipe-uri personalizate. Proiectul oferă capabilități de mascare dinamică, permițând modelelor de input să se schimbe sau să comute în timp real pe baza caracterelor pe care le tastează un utilizator. Suportă constrângeri complexe de input, inclusiv expresii regulate, intervale numerice, verificare bazată pe dată și enumerări de caractere. Biblioteca acoperă o gamă largă de sarcini de procesare a input-ului și gestionare a datelor, inclusiv transformări de pre- și post-procesare, extragerea valorii brute pentru trimiterea API și aplicarea măștilor atât pe câmpurile de input HTML standard, cât și pe elementele contenteditable.
Provides a standardized wrapper to manage interactions across different input types, including text fields and contenteditable elements.