Comparison of Material Design implementations

Last updated

This article contains general information about Google's Material Design implementations.

Notes

As of 15 December 2018, unless indicated, all of the components listed below conform to the new Material Design specifications.

Implemented web components (2018 specifications)

Components Polymer Project AngularJS Material Materialize Material-UI Material Design Lite Material Components for the web
App bars App bars: bottom Dark Red x.svgDark Red x.svgDark Red x.svgBrown check.svg [1] Dark Red x.svgDark Red x.svg
App bars: top (formerly known as toolbar in the former specifications)Yes check.svg [2] Yes check.svg [3] Yes check.svg [4] Yes check.svg [5] Brown check.svg [6] Yes check.svg [7]
Backdrop Dark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svg
Banner Dark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svg
Bottom navigation Dark Red x.svgDark Red x.svgDark Red x.svgYes check.svg [8] Dark Red x.svgDark Red x.svg
Buttons Text button Yes check.svg [9] Yes check.svg [10] Yes check.svg [11] Yes check.svg [12] Yes check.svg [13] Yes check.svg [14]
Outlined button Dark Red x.svgDark Red x.svgDark Red x.svgYes check.svg [15] Dark Red x.svgYes check.svg [16]
Contained button (formerly known as raised button in the former specifications)Yes check.svg [9] Yes check.svg [10] Yes check.svg [17] Yes check.svg [18] Yes check.svg [13] Yes check.svg [19]
Toggle button (not included in the former specifications)Dark Red x.svgDark Red x.svgDark Red x.svgBrown check.svg [20] Dark Red x.svgDark Red x.svg
Icon Button (not in the specifications)Yes check.svg [21] Yes check.svg [10] Dark Red x.svgYes check.svg [22] Yes check.svg [13] Yes check.svg [23]
Icon Toggle Button (not in the specifications)Dark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgYes check.svg [24] Yes check.svg [25]
Floating Action Button (AKA FAB)Yes check.svg [26] Yes check.svg [10] Yes check.svg [27] Yes check.svg [28] Yes check.svg [13] Yes check.svg [29]
Extended FAB Dark Red x.svgDark Red x.svgDark Red x.svgYes check.svg [28] Dark Red x.svgYes check.svg [30]
Cards Yes check.svg [31] Yes check.svg [32] Yes check.svg [33] Yes check.svg [34] Yes check.svg [35] Yes check.svg [36]
Chips Dark Red x.svg(no official implementation)Yes check.svg [37] Yes check.svg [38] Yes check.svg [39] Yes check.svg [40] Yes check.svg [41]
Data tables Dark Red x.svg(no official implementation)Dark Red x.svg(no official implementation)Yes check.svg [42] Yes check.svg [43] Yes check.svg [44] Dark Red x.svg
Dialogs Yes check.svg [45] Yes check.svg [46] Yes check.svg [47] Yes check.svg [48] Brown check.svg [49] Yes check.svg [50]
Dividers Dark Red x.svg(no official implementation)Yes check.svg [51] Dark Red x.svgYes check.svg [52] Dark Red x.svgBrown check.svg [53]
Image lists (formerly known as grid lists in the former specifications)Dark Red x.svgYes check.svg [54] Yes check.svg [55] Yes check.svg [56] Yes check.svg [6] Yes check.svg [57]
Lists Yes check.svg [58] Yes check.svg [59] Yes check.svg [60] Yes check.svg [61] Yes check.svg [62] Yes check.svg [63]
Menus Dropdown menu (formerly known as menu in the former specifications)Yes check.svg [64] Yes check.svg [65] Brown check.svg [66] Yes check.svg [67] Yes check.svg [68] Yes check.svg [69]
Exposed dropdown menu (formerly known as dropdown button in the former specifications)Yes check.svg [70] Yes check.svg [71] Yes check.svg [72] Yes check.svg [73] Dark Red x.svg(no official implementation)Yes check.svg [74]
Navigation drawer Yes check.svg [75] Yes check.svg [76] Yes check.svg [77] Yes check.svg [78] Yes check.svg [6] Yes check.svg [79]
Progress indicators Linear progress indicators Yes check.svg [80] Yes check.svg [81] Yes check.svg [82] Yes check.svg [83] Yes check.svg [84] Yes check.svg [85]
Circular progress indicators Dark Red x.svg(no official implementation)Yes check.svg [86] Yes check.svg [87] Yes check.svg [88] Yes check.svg [84] Dark Red x.svg
Selection controls Checkboxes Yes check.svg [89] Yes check.svg [90] Yes check.svg [91] Yes check.svg [92] Yes check.svg [24] Yes check.svg [93]
Radio buttons Yes check.svg [94] [95] Yes check.svg [96] Yes check.svg [97] Yes check.svg [98] Yes check.svg [24] Yes check.svg [99]
Switches Yes check.svg [100] Yes check.svg [101] Yes check.svg [102] Yes check.svg [103] Yes check.svg [24] Yes check.svg [104]
Sheets Standard bottom sheet Dark Red x.svg(no official implementation)Yes check.svg [105] Brown check.svg [106] Dark Red x.svg(no official implementation)Dark Red x.svgDark Red x.svg
Modal bottom sheet Dark Red x.svgYes check.svg [105] Dark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svg
Expanding bottom sheet Dark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svgDark Red x.svg
Standard side sheet (similar to drawers)Brown check.svg [75] Brown check.svg [76] Brown check.svg [77] Yes check.svg [107] Brown check.svg [6] Brown check.svg [79]
Modal side sheet (similar to drawers)Brown check.svg [75] Brown check.svg [76] Brown check.svg [77] Yes check.svg [108] Dark Red x.svgBrown check.svg [79]
Sliders Continuous Slider Yes check.svg [109] Yes check.svg [110] Yes check.svg [111] Brown check.svg [112] Yes check.svg [113] Yes check.svg [114]
Discrete Slider Yes check.svg [109] Yes check.svg [110] Dark Red x.svgDark Red x.svgDark Red x.svgYes check.svg [115]
Snackbars Yes check.svg [116] Yes check.svg [117] Brown check.svg [118] Yes check.svg [119] Yes check.svg [120] Yes check.svg [121]
Tabs Fixed tabs Yes check.svg [122] Yes check.svg [123] Yes check.svg [124] Yes check.svg [125] Brown check.svg [6] Yes check.svg [126]
Scrollable tabs Yes check.svg [122] Yes check.svg [123] Yes check.svg [124] Yes check.svg [127] Brown check.svg [6] Yes check.svg [126]
Text fields Filled text field Brown check.svg [128] Dark Red x.svgDark Red x.svgYes check.svg [129] Dark Red x.svgYes check.svg [130]
Outlined text field Brown check.svg [128] Dark Red x.svgDark Red x.svgYes check.svg [131] Dark Red x.svgYes check.svg [132]
Tooltips Yes check.svg [133] Yes check.svg [134] Yes check.svg [135] Yes check.svg [136] Yes check.svg [137] Dark Red x.svg
    1. "App Bar React component - Material-UI" . Retrieved 15 December 2018.
    2. "PolymerElements/paper-toolbar - webcomponents.org" . Retrieved 15 December 2018.
    3. "AngularJS Material - Demos > Toolbar" . Retrieved 15 December 2018.
    4. "Navbar - Materialize" . Retrieved 15 December 2018.
    5. "App Bar React component - Material-UI" . Retrieved 15 December 2018.
    6. 1 2 3 4 5 6 "Material Design Lite (Layout)" . Retrieved 15 December 2018.
    7. "Top App Bar - Material Components for the Web" . Retrieved 15 December 2018.
    8. "Bottom Navigation React component - Material-UI" . Retrieved 15 December 2018.
    9. 1 2 "PolymerElements/paper-button - webcomponents.org" . Retrieved 15 December 2018.
    10. 1 2 3 4 "AngularJS Material - Demos > Button" . Retrieved 15 December 2018.
    11. "Buttons - Materialize" . Retrieved 15 December 2018.
    12. "(Text) Button React component - Material-UI" . Retrieved 15 December 2018.
    13. 1 2 3 4 "Material Design Lite (Buttons)" . Retrieved 15 December 2018.
    14. "Buttons - Material Components for the Web" . Retrieved 15 December 2018.
    15. "(Outlined) Button React component - Material-UI" . Retrieved 15 December 2018.
    16. "(Outlined) Buttons - Material Components for the Web" . Retrieved 15 December 2018.
    17. "(Raised) Buttons - Materialize" . Retrieved 15 December 2018.
    18. "(Contained) Button React component - Material-UI" . Retrieved 15 December 2018.
    19. "(Contained) Buttons - Material Components for the Web" . Retrieved 15 December 2018.
    20. "Toggle Button React component - Material-UI" . Retrieved 15 December 2018.
    21. "PolymerElements/paper-icon-button - webcomponents.org" . Retrieved 15 December 2018.
    22. "(Icon) Button React component - Material-UI" . Retrieved 15 December 2018.
    23. "Icon Buttons - Material Components for the Web" . Retrieved 15 December 2018.
    24. 1 2 3 4 "Material Design Lite (Toggles)" . Retrieved 15 December 2018.
    25. "Icon Toggle Buttons - Material Components for the Web" . Retrieved 15 December 2018.
    26. "PolymerElements/paper-fab - webcomponents.org" . Retrieved 15 December 2018.
    27. "(Floating Action) Buttons - Materialize" . Retrieved 15 December 2018.
    28. 1 2 "(Floating Action) Button React component - Material-UI" . Retrieved 15 December 2018.
    29. "Floating Action Button - Material Components for the Web" . Retrieved 15 December 2018.
    30. "(Extended) Floating Action Button - Material Components for the Web" . Retrieved 15 December 2018.
    31. "PolymerElements/paper-card - webcomponents.org" . Retrieved 15 December 2018.
    32. "AngularJS Material - Demos > Card" . Retrieved 15 December 2018.
    33. "Cards - Materialize" . Retrieved 15 December 2018.
    34. "Card React component - Material-UI" . Retrieved 15 December 2018.
    35. "Material Design Lite (Cards)" . Retrieved 15 December 2018.
    36. "Cards - Material Components for the Web" . Retrieved 15 December 2018.
    37. "AngularJS Material - Demos > Chips" . Retrieved 15 December 2018.
    38. "Chips - Materialize" . Retrieved 15 December 2018.
    39. "Chip React component - Material-UI" . Retrieved 15 December 2018.
    40. "Material Design Lite (Chips)" . Retrieved 15 December 2018.
    41. "Chips - Material Components for the Web" . Retrieved 15 December 2018.
    42. "Table - Materialize" . Retrieved 15 December 2018.
    43. "Table React component - Material-UI" . Retrieved 15 December 2018.
    44. "Material Design Lite (Tables)" . Retrieved 15 December 2018.
    45. "PolymerElements/paper-dialog - webcomponents.org" . Retrieved 15 December 2018.
    46. "AngularJS Material - Demos > Dialog" . Retrieved 15 December 2018.
    47. "Modals - Materialize" . Retrieved 15 December 2018.
    48. "Dialog React component - Material-UI" . Retrieved 15 December 2018.
    49. "Material Design Lite (Dialogs)" . Retrieved 15 December 2018.
    50. "Dialogs - Material Components for the Web" . Retrieved 15 December 2018.
    51. "AngularJS Material - Demos > Divider" . Retrieved 15 December 2018.
    52. "Divider React component - Material-UI" . Retrieved 15 December 2018.
    53. "List (Dividers) - Material Components for the Web" . Retrieved 15 December 2018.
    54. "AngularJS Material - Demos > Grid List" . Retrieved 15 December 2018.
    55. "Grid - Materialize" . Retrieved 15 December 2018.
    56. "Grid List React component - Material-UI" . Retrieved 15 December 2018.
    57. "Grid Lists - Material Components for the Web" . Retrieved 15 December 2018.
    58. "PolymerElements/paper-item - webcomponents.org" . Retrieved 15 December 2018.
    59. "AngularJS Material - Demos > List" . Retrieved 15 December 2018.
    60. "Collections - Materialize" . Retrieved 15 December 2018.
    61. "List React component - Material-UI" . Retrieved 15 December 2018.
    62. "Material Design Lite (Lists)" . Retrieved 15 December 2018.
    63. "Lists - Material Components for the Web" . Retrieved 15 December 2018.
    64. "PolymerElements/paper-menu-button - webcomponents.org" . Retrieved 15 December 2018.
    65. "AngularJ S Material - Demos > Menu" . Retrieved 15 December 2018.
    66. "Dropdown - Materialize" . Retrieved 15 December 2018.
    67. "Menu React component - Material-UI".
    68. "Material Design Lite (Menus)" . Retrieved 15 December 2018.
    69. "Menus - Material Components for the Web" . Retrieved 15 December 2018.
    70. "PolymerElements/paper-dropdown-button - webcomponents.org" . Retrieved 15 December 2018.
    71. "AngularJS Material - Demos > Select" . Retrieved 15 December 2018.
    72. "Select - Materialize" . Retrieved 15 December 2018.
    73. "Select React component - Material-UI" . Retrieved 15 December 2018.
    74. "Select Menus - Material Components for the Web" . Retrieved 15 December 2018.
    75. 1 2 3 "PolymerElements/paper-drawer-panel - webcomponents.org" . Retrieved 15 December 2018.
    76. 1 2 3 "AngularJS Material - Demos > Sidenav" . Retrieved 15 December 2018.
    77. 1 2 3 "Sidenav - Materialize" . Retrieved 15 December 2018.
    78. "Drawer React component - Material-UI" . Retrieved 15 December 2018.
    79. 1 2 3 "Drawers - Material Components for the Web" . Retrieved 15 December 2018.
    80. "PolymerElements/paper-progress - webcomponents.org" . Retrieved 15 December 2018.
    81. "AngularJS Material - Demos > Progress Linear" . Retrieved 16 December 2018.
    82. "(Linear) Preloader - Materialize" . Retrieved 16 December 2018.
    83. "Linear Progress React component - Material-UI" . Retrieved 16 December 2018.
    84. 1 2 "Material Design Lite (Circular/Linear Progress)" . Retrieved 16 December 2018.
    85. "Linear Progress - Material Components for the Web" . Retrieved 16 December 2018.
    86. "AngularJS Material - Demos > Progress Circular" . Retrieved 16 December 2018.
    87. "(Circular) Preloader - Materialize" . Retrieved 16 December 2018.
    88. "Circular Progress React component - Material-UI" . Retrieved 16 December 2018.
    89. "PolymerElements/paper-checkbox - webcomponents.org" . Retrieved 16 December 2018.
    90. "AngularJS Material - Demos > Checkbox" . Retrieved 16 December 2018.
    91. "Checkboxes - Materialize" . Retrieved 16 December 2018.
    92. "Checkbox React component - Material-UI" . Retrieved 16 December 2018.
    93. "Checkboxes - Material Components for the Web" . Retrieved 16 December 2018.
    94. "PolymerElements/paper-radio-group - webcomponents.org" . Retrieved 16 December 2018.
    95. "PolymerElements/paper-radio-button - webcomponents.org" . Retrieved 16 December 2018.
    96. "AngularJS Material - Demos > Radio Button" . Retrieved 16 December 2018.
    97. "Radio Buttons - Materialize" . Retrieved 16 December 2018.
    98. "Radio React component - Material-UI" . Retrieved 16 December 2018.
    99. "Radio Buttons - Material Components for the Web" . Retrieved 16 December 2018.
    100. "PolymerElements/paper-toggle-button - webcomponents.org" . Retrieved 16 December 2018.
    101. "AngularJS Material - Demos > Switch" . Retrieved 16 December 2018.
    102. "Switches - Materialize" . Retrieved 16 December 2018.
    103. "Switch React component - Material-UI" . Retrieved 16 December 2018.
    104. "Switches - Material Components for the Web" . Retrieved 16 December 2018.
    105. 1 2 "AngularJS Material - Demos > Bottom Sheet" . Retrieved 16 December 2018.
    106. "(Bottom Sheet) Modals - Materialize" . Retrieved 16 December 2018.
    107. "(Clipped under app bar) Drawer React component - Material-UI" . Retrieved 17 December 2018.
    108. "(Swipeable temporary) Drawer React component - Material-UI" . Retrieved 17 December 2018.
    109. 1 2 "PolymerElements/paper-slider - webcomponents.org" . Retrieved 17 December 2018.
    110. 1 2 "AngularJS Material - Demos > Slider" . Retrieved 17 December 2018.
    111. "Range - Materialize" . Retrieved 17 December 2018.
    112. "Slider React component - Material-UI" . Retrieved 17 December 2018.
    113. "Material Design Lite (Sliders)" . Retrieved 17 December 2018.
    114. "(Continuous) Sliders - Material Components for the Web" . Retrieved 17 December 2018.
    115. "(Discrete) Sliders - Material Components for the Web" . Retrieved 17 December 2018.
    116. "PolymerElements/paper-toast - webcomponents.org" . Retrieved 17 December 2018.
    117. "AngularJS Material - Demos > Toast".
    118. "Toasts - Materialize" . Retrieved 17 December 2018.
    119. "Snackbar React component - Material-UI" . Retrieved 17 December 2018.
    120. "Material Design Lite (Snackbar)" . Retrieved 17 December 2018.
    121. "Snackbars - Material Components for the Web" . Retrieved 17 December 2018.
    122. 1 2 "PolymerElements/paper-tab - webcomponents.org" . Retrieved 17 December 2018.
    123. 1 2 "AngularJS Material - Demos > Tabs" . Retrieved 17 December 2018.
    124. 1 2 "Tabs - Materialize" . Retrieved 17 December 2018.
    125. "(Fixed) Tabs React component - Material-UI" . Retrieved 17 December 2018.
    126. 1 2 "Tab - Material Components for the Web" . Retrieved 17 December 2018.
    127. "(Scrollable) Tabs React component - Material-UI" . Retrieved 17 December 2018.
    128. 1 2 "PolymerElements/paper-input - webcomponents.org" . Retrieved 17 December 2018.
    129. "(Filled) Text Field React component - Material-UI" . Retrieved 17 December 2018.
    130. "Text Field - Material Components for the Web" . Retrieved 17 December 2018.
    131. "(Outlined) Text Field React component - Material-UI" . Retrieved 17 December 2018.
    132. "(Outlined) Text Field - Material Components for the Web" . Retrieved 17 December 2018.
    133. "PolymerElements/paper-tooltip - webcomponents.org" . Retrieved 17 December 2018.
    134. "AngularJS Material - Demos > Tooltip" . Retrieved 17 December 2018.
    135. "Tooltips - Materialize" . Retrieved 17 December 2018.
    136. "Tooltip React component - Material-UI" . Retrieved 17 December 2018.
    137. "Material Design Lite (Tooltip)" . Retrieved 17 December 2018.

    Related Research Articles

    <span class="mw-page-title-main">Graphical widget</span> Element of interaction in a graphical user interface

    A graphical widget in a graphical user interface is an element of interaction, such as a button or a scroll bar. Controls are software components that a computer user interacts with through direct manipulation to read or edit information about an application. User interface libraries such as Windows Presentation Foundation, Qt, GTK, and Cocoa, contain a collection of controls and the logic to render these.

    In computing, a mouseover, mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers. For example, hovering over a hyperlink triggers the mouseover control element to display a URL on the status bar. Site designers can define their own mouseover events using JavaScript or Cascading Style Sheets.

    State management refers to the management of the state of one or more user interface controls such as text fields, OK buttons, radio buttons, etc. in a graphical user interface. In this user interface programming technique, the state of one UI control depends on the state of other UI controls. For example, a state managed UI control such as a button will be in the enabled state when input fields have valid input values and the button will be in the disabled state when the input fields are empty or have invalid values. As applications grow, this can end up becoming one of the most complex problems in user interface development.

    qooxdoo Open-source Ajax web application framework

    qooxdoo is an open-source Ajax web application framework. It is an LGPL- and/or EPL-licensed client-side and server-agnostic solution, and includes support for professional JavaScript development, a graphical user interface (GUI) toolkit and high-level client-server communication.

    <span class="mw-page-title-main">YUI Library</span>

    The Yahoo! User Interface Library (YUI) is a discontinued open-source JavaScript library for building richly interactive web applications using techniques such as Ajax, DHTML, and DOM scripting. YUI includes several core CSS resources. It is available under a BSD License. Development on YUI began in 2005 and Yahoo! properties such as My Yahoo! and the Yahoo! front page began using YUI in the summer of that year. YUI was released for public use in February 2006. It was actively developed by a core team of Yahoo! engineers.

    <span class="mw-page-title-main">Features of the Opera web browser</span> List of software application features

    This article details features of the Opera web browser.

    UI data binding is a software design pattern to simplify development of GUI applications. UI data binding binds UI elements to an application domain model. Most frameworks employ the Observer pattern as the underlying binding mechanism. To work efficiently, UI data binding has to address input validation and data type mapping.

    A single-page application (SPA) is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. The goal is faster transitions that make the website feel more like a native app.

    AngularJS is a discontinued free and open-source JavaScript-based web framework for developing single-page applications. It was maintained mainly by Google and a community of individuals and corporations. It aimed to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in web applications and progressive web applications.

    Foundation is a free and open-source responsive front-end framework, providing a responsive grid and HTML and CSS UI components, templates, and code snippets, including typography, forms, buttons, navigation and other interface elements, as well as optional functionality provided by JavaScript extensions. Foundation is an open source project, and was formerly maintained by ZURB. Since 2019, Foundation has been maintained by volunteers.

    <span class="mw-page-title-main">List builder</span> Graphical user interface element

    A list builder, also known as a dual list, dual listbox, disjoint listbox, list shuttle, shuttle, swaplist, transfer list and two sided multi select is a graphical control element in which a user can select a set of text values by moving values between two list boxes, one representing selected values and the other representing unselected ones. Moving values back and forth is usually accomplished selecting values within one of the two lists and clicking buttons reading "Add" and "Remove", rather than by dragging and dropping them. Less traditionally, there may instead be an add or delete button individually next to each item. The widget can sometimes also include the ability to rearrange the selected values. There may also be buttons to add or remove all values, or a text field to filter the list.

    <span class="mw-page-title-main">Ember.js</span>

    Ember.js is an open-source JavaScript web framework that utilizes a component-service pattern. It allows developers to create scalable single-page web applications by incorporating common idioms, best practices, and patterns from other single-page-app ecosystem patterns into the framework.

    There are different JavaScript charting libraries available. Below is a comparison of which features are available in each.

    <span class="mw-page-title-main">Material Design</span> Design language developed by Google in 2014

    Material Design is a design language developed by Google in 2014. Expanding on the "cards" that debuted in Google Now, Material Design uses more grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows. Google announced Material Design on June 25, 2014, at the 2014 Google I/O conference.

    <span class="mw-page-title-main">React (JavaScript library)</span> JavaScript library for building user interfaces

    React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. React can be used as a base in the development of single-page, mobile, or server-rendered applications with frameworks like Next.js. However, React is only concerned with state management and rendering that state to the DOM, so creating React applications usually requires the use of additional libraries for routing, as well as certain client-side functionality.

    <span class="mw-page-title-main">Ionic (mobile app framework)</span> Open-source framework to develop hybrid mobile apps

    Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry, and Adam Bradley of Drifty Co. in 2013. The original version was released in 2013 and built on top of AngularJS and Apache Cordova. However, the latest release was re-built as a set of Web Components, allowing the user to choose any user interface framework, such as Angular, React or Vue.js. It also allows the use of Ionic components with no user interface framework at all. Ionic provides tools and services for developing hybrid mobile, desktop, and progressive web apps based on modern web development technologies and practices, using Web technologies like CSS, HTML5, and Sass. In particular, mobile apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by utilizing Cordova or Capacitor.

    <span class="mw-page-title-main">Polymer (library)</span> Open-source JavaScript library of Web Components

    Polymer is an open-source JavaScript library for building web applications using Web Components. The library is being developed by Google developers and contributors on GitHub. Modern design principles are implemented as a separate project using Google's Material Design design principles.

    jQWidgets Software framework

    jQWidgets is a software framework with widgets, themes, input validation, drag & drop plug-in, data adapters, built-in WAI-ARIA accessibility, internationalization and MVVM support. It is built on the open standards and technologies HTML5, CSS, JavaScript and jQuery. This library is used for developing responsive web and mobile applications. Some developers consider jQWidgets one of the top alternatives to the open-source jQuery UI.

    <span class="mw-page-title-main">Vue.js</span> Open-source JavaScript framework for building user interfaces

    Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.

    <span class="mw-page-title-main">Angular (web framework)</span> Open source web application framework

    Angular is a TypeScript-based free and open-source web application framework lead by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS.