awesome-repositories.com
Blog
MCP
awesome-repositories.com

Descoperă cele mai bune repository-uri open source cu căutare AI.

ExploreazăCăutări recomandateAlternative open-sourceSoftware self-hostedBlogHartă site
ProiectServer MCPDespreCum realizăm clasamentulPresă
LegalConfidențialitateTermeni
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

26 repository-uri

Awesome GitHub RepositoriesHTML Element Wrappers

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.

Awesome HTML Element Wrappers GitHub Repositories

Găsește cele mai bune repo-uri cu AI.Vom căuta cele mai potrivite repository-uri folosind AI.
  • facebook/reactAvatar facebook

    facebook/react

    245,669Vezi pe GitHub↗

    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.

    JavaScriptjavascriptuifrontend
    Vezi pe GitHub↗245,669
  • facebook/react-nativeAvatar facebook

    facebook/react-native

    126,019Vezi pe GitHub↗

    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.

    C++androidapp-frameworkcross-platform
    Vezi pe GitHub↗126,019
  • google/material-design-liteAvatar google

    google/material-design-lite

    32,181Vezi pe GitHub↗

    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.

    HTMLmaterialmaterial-componentsmaterial-design
    Vezi pe GitHub↗32,181
  • necolas/react-native-webAvatar necolas

    necolas/react-native-web

    22,132Vezi pe GitHub↗

    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.

    JavaScriptcross-platformcss-in-jsgui-framework
    Vezi pe GitHub↗22,132
  • harvesthq/chosenAvatar harvesthq

    harvesthq/chosen

    21,980Vezi pe GitHub↗

    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.

    HTMLdeprecatednot-maintained
    Vezi pe GitHub↗21,980
  • riot/riotAvatar riot

    riot/riot

    14,921Vezi pe GitHub↗

    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.

    JavaScriptclient-sidecustomelementcustomelements
    Vezi pe GitHub↗14,921
  • retejs/reteAvatar retejs

    retejs/rete

    12,077Vezi pe GitHub↗

    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.

    TypeScriptdataflow-programmingflow-based-programminggraph-editor
    Vezi pe GitHub↗12,077
  • reactjs/react.devAvatar reactjs

    reactjs/react.dev

    11,765Vezi pe GitHub↗

    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.

    JavaScriptdocumentationjavascriptreact
    Vezi pe GitHub↗11,765
  • buefy/buefyAvatar buefy

    buefy/buefy

    9,531Vezi pe GitHub↗

    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.

    Vuebulmacomponentsvue
    Vezi pe GitHub↗9,531
  • rafaelpimpa/buefyAvatar rafaelpimpa

    rafaelpimpa/buefy

    9,531Vezi pe GitHub↗

    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.

    Vue
    Vezi pe GitHub↗9,531
  • dotnet/blazorAvatar dotnet

    dotnet/blazor

    9,276Vezi pe GitHub↗

    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.

    PowerShell
    Vezi pe GitHub↗9,276
  • johndyer/mediaelementAvatar johndyer

    johndyer/mediaelement

    8,297Vezi pe GitHub↗

    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.

    JavaScript
    Vezi pe GitHub↗8,297
  • heartcombo/simple_formAvatar heartcombo

    heartcombo/simple_form

    8,229Vezi pe GitHub↗

    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.

    Rubydslform-builderrails
    Vezi pe GitHub↗8,229
  • webstudio-is/webstudioAvatar webstudio-is

    webstudio-is/webstudio

    8,240Vezi pe GitHub↗

    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.

    TypeScriptaccessibilityalternativecloudflare
    Vezi pe GitHub↗8,240
  • drgullin/icheckAvatar drgullin

    drgullin/icheck

    7,300Vezi pe GitHub↗

    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.

    CSS
    Vezi pe GitHub↗7,300
  • cgoldsby/logincritterAvatar cgoldsby

    cgoldsby/LoginCritter

    5,682Vezi pe GitHub↗

    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.

    Swiftanimationswiftuipropertyanimator
    Vezi pe GitHub↗5,682
  • day8/re-frameAvatar day8

    day8/re-frame

    5,532Vezi pe GitHub↗

    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.

    Clojureclojurescriptre-framereact
    Vezi pe GitHub↗5,532
  • kaorun343/vue-property-decoratorAvatar kaorun343

    kaorun343/vue-property-decorator

    5,473Vezi pe GitHub↗

    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.

    TypeScriptdecoratorstypescriptvue
    Vezi pe GitHub↗5,473
  • nervjs/nervAvatar NervJS

    NervJS/nerv

    5,412Vezi pe GitHub↗

    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.

    JavaScriptframeworkfrontendinferno
    Vezi pe GitHub↗5,412
  • unmanner/imaskjsAvatar uNmAnNeR

    uNmAnNeR/imaskjs

    5,187Vezi pe GitHub↗

    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.

    TypeScriptinputmaskvanilla-js
    Vezi pe GitHub↗5,187
Înapoi12Înainte
  1. Home
  2. User Interface & Experience
  3. Component Architectures
  4. HTML Element Wrappers

Explorează sub-etichetele

  • 3D Canvas EmbeddingsIntegrates arbitrary HTML elements into 3D rendering environments with synchronized spatial positioning. **Distinct from HTML Element Wrappers:** Distinct from standard HTML wrappers: focuses on spatial synchronization within 3D scenes.
  • Form Element Wrappers1 sub-tagWrappers that encapsulate standard form elements to provide enhanced interaction and state management. **Distinct from HTML Element Wrappers:** Focuses on wrapping standard form inputs like select boxes for usability, whereas HTML Element Wrappers typically refers to React-based prop mapping for any HTML element.
  • HTML Element References1 sub-tagCapabilities for obtaining references to rendered HTML elements and passing them to JavaScript for DOM manipulation or event triggering. **Distinct from HTML Element Wrappers:** Distinct from HTML Element Wrappers: focuses on capturing references to existing DOM elements, not wrapping them in components.
  • Input Element WrappersWrappers that standardize interactions across various HTML input and contenteditable elements. **Distinct from HTML Element Wrappers:** Focuses on standardizing input behaviors across different DOM elements, whereas HTML Element Wrappers generally refers to React-based prop mapping.
  • Material Logic WrappersHTML elements that encapsulate specific design system logic and styling markers. **Distinct from HTML Element Wrappers:** Distinct from HTML Element Wrappers: specifically focuses on wrapping standard elements with design-system specific logic rather than generic prop enhancement.
  • Root Element OverridesCapabilities to override the root HTML element by defining a special file that wraps the entire application. **Distinct from HTML Element Wrappers:** Distinct from HTML Element Wrappers: specifically targets the root document element (html, head, body), not general component wrappers.
  • Vue Element WrappersVue components that encapsulate standard HTML elements to provide reactive properties and event handling. **Distinct from HTML Element Wrappers:** Specifically targets the Vue ecosystem for wrapping HTML elements, whereas the parent is broader or React-focused.