hybrids - 🖍 UI library for creating Web Components with simple and functional API

  •        15

⚠️ For the built version all name exports are available on the hybrids global namespace.

https://github.com/hybridsjs/hybrids

Dependencies:

@webcomponents/custom-elements : ^1.2.1
@webcomponents/shadycss : ^1.5.2
@webcomponents/shadydom : ^1.2.0
@webcomponents/template : ^1.4.0
@webcomponents/webcomponents-platform : ^1.0.0
core-js : ^2.5.7

Tags
Implementation
License
Platform

   




Related Projects

Maple

  •    Javascript

Maple is a seamless module that allows you to organise your React project in terms of webcomponents — with HTML Imports, Shadow DOM, and Custom Elements — allowing you to implement any Flux architecture you choose, and then compile with Mapleify for production.💎 Install all dependencies and start server using npm start.

stencil - A Web Component compiler for building fast, reusable UI components and Progressive Web Apps 💎 Built by the Ionic Framework team

  •    TypeScript

Stencil is a simple compiler for generating Web Components and progressive web apps (PWA). Stencil was built by the Ionic Framework team for its next generation of performant mobile and desktop Web Components. Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than run-time tool. It takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that runs on both modern browsers and legacy browsers back to Internet Explorer 11.

ui5-webcomponents - UI5 Web Components - the enterprise-flavored sugar on top of native APIs! Build SAP Fiori user interfaces with the technology of your choice

  •    Javascript

The UI5 Web Components are the new offering of UI5 to provide a set of reusable UI elements to you which can be used for your static web sites or for web application using any web framework of your choice with a minimalistic footprint. They allow you to create a consistent user experience aligned to the SAP Fiori Design Guidelines and incorporate the Fiori 3 design. Web Components are a set of features which allow to enhance the HTML vocabulary with custom HTML elements when the standard HTML elements are not sufficient (for example, a Button with an icon or a DatePicker). The custom HTML elements allow to share those features and qualities in a standard way. The complexity of HTML, CSS and components behavior is encapsulated behind a custom HTML element. The interaction with the custom HTML elements is done using the standard DOM API.


webcomponentsjs - A suite of polyfills supporting the HTML Web Components specs

  •    HTML

Note. For polyfills that work with the older Custom Elements and Shadow DOM v0 specs, see the v0 branch. Note. For polyfills that include HTML Imports, see the v1 branch.

slim.js - Fast & Robust Front-End Micro-framework based on modern standards

  •    Javascript

Slim.js is a lightning fast library for development of native Web Components and Custom Elements based on modern standards. No black magic involved, no useless dependencies. It uses ES6+DOM native API to boosts up HTML elements with superpowers.

custom-elements - A polyfill for HTML Custom Elements v1

  •    Javascript

A polyfill for the custom elements v1 spec. API which might trigger custom element reactions in the DOM and HTML specifications are marked with the CEReactions extended attribute.

core - The Heart of X-Tag

  •    Javascript

This is the repository for the core X-Tag library. X-Tag is a Microsoft supported, open source, JavaScript library that wraps the W3C standard Web Components family of APIs to provide a compact, feature-rich interface for rapid component development. While X-Tag offers feature hooks for all Web Component APIs (Custom Elements, Shadow DOM, HTML Templates), it only requires Custom Element support to operate. In the absence of native Custom Element support, X-Tag relies on the same set of polyfills Google's Polymer framework uses.

skatejs - SkateJS is a web component library designed to give you an augmentation of the web component specs focusing on a functional rendering pipeline, clean property / attribute semantics and a small footprint

  •    Javascript

At its core, Skate is about creating Custom Elements. Skate provides a series of mixin functions that enable you to control what your component can do.Calling withComponent() gives you a Custom Element class constructor, which you can then extend to define your own elements.

elix - High-quality, customizable web components for common user interface patterns

  •    Javascript

Elix is a community-driven collection of high-quality web components for common user interface patterns. Most applications make use of common, general-purpose user interface patterns such lists, menus, dialogs, carousels, and so on. Such patterns can be efficiently implemented and packaged as web components. Their modular nature lets you easily incorporate web components into your web application, and their standard definition ensures good results across browsers.

document-register-element - A stand-alone working lightweight version of the W3C Custom Elements specification

  •    Javascript

A stand-alone lightweight version of Custom Elements V1 based on top, and compatible with, the battle-tested Custom Elements V0, already used in production with projects such Google AMP HTML ⚡ and others. If you specify noBuiltIn property as true, the V1 API will be polyfilled where needed, but no extra checks and patches will be applied to make custom elements built-in working, since no browser is currently shipping this part of the specification.

vaadin-core - An evolving set of free, open source web components for building mobile and desktop web applications in modern browsers

  •    HTML

Vaadin core components is the open source part of the Vaadin standards-based Web Components set, which contains high-quality user interface components commonly needed in modern mobile and desktop business web applications. For more information, see the Vaadin components README.

ReactiveElements - Allows to use React.js component as HTML element (web component)

  •    Javascript

Original children of a custom element is injected to component as this.props.children. In this case this.props.children is equal to "Hello world".

etch - Builds components using a simple and explicit API around virtual-dom

  •    Javascript

Etch is a library for writing HTML-based user interface components that provides the convenience of a virtual DOM, while at the same time striving to be minimal, interoperable, and explicit. Etch can be used anywhere, but it was specifically designed with Atom packages and Electron applications in mind.Note that using an Etch component does not require a reference to the Etch library. Etch is an implementation detail, and from the outside the component is just an ordinary object with a simple interface and an .element property. You can also take a more declarative approach by embedding Etch components directly within other Etch components, which we'll cover later in this document.

vaadin-grid - vaadin-grid is a free, high quality data grid / data table Web Component

  •    HTML

<vaadin-grid> is a free, high quality data grid / data table Web Component, part of the Vaadin components. The Vaadin components are distributed as Bower and npm packages. Please note that the version range is the same, as the API has not changed. You should not mix Bower and npm versions in the same application, though.

wired-elements - Collection of elements that appear hand drawn. Great for wireframes.

  •    Javascript

Wired Elements is a series of basic UI Elements that have a hand drawn look. These can be used for wireframes, mockups, or just the fun hand-drawn look. The elements are drawn with enough randomness that no two renderings will be exactly the same - just like two separate hand drawn shapes.

marksy - A markdown to custom VDOM components library

  •    Javascript

A markdown to custom components library. Supports any virtual DOM library. This will be converted to the component above. You can pass in any kind of props, as if it was normal code. If you are not familiar with h, this is a convention for creating elements and components in virtual dom implementations.

expense-manager-demo - Progressive Web App (PWA) demo using Vaadin components

  •    HTML

This is an example project for how you can build a Progressive Web Application with Polymer and Vaadin components. The application uses a Service Worker to cache the Application Shell. A Web App Manifest file ensures that the browser identifies our app as a Progressive Web Application and offers the user to install the application through an install banner.

html-as-custom-elements - HTML as Custom Elements

  •    CSS

A demo is available, which shows implementation efforts for a number of fairly simple elements, and outlines the missing platform features each of them highlights. Even these simple elements have highlighted one major area of missing functionality in custom elements, which has been written up in the document "Gap Analysis: Accessibility". One of the axioms of the extensible web project is that high-level, declarative APIs should be able to be explained in terms of lower-level, imperative APIs. Not just lower-level algorithms, but APIs: the capabilities that we encapsulate inside a given HTML element should also be exposed directly to JavaScript authors. And those APIs should be factored into small, composable pieces, that build on each other to eventually produce the declarative edifice that is HTML. In this way, authors can reuse these platform capabilities without jumping through hoops (like instantiating a HTMLAnchorElement just to parse a URL) or rebuilding large parts of the platform for themselves (like creating their own scrolling logic just to get pull-to-refresh behavior).





We have large collection of open source products. Follow the tags from Tag Cloud >>


Open source products are scattered around the web. Please provide information about the open source projects you own / you use. Add Projects.