Follow
DevelopmentFrontend DevelopmentWeb

What are the best open source JavaScript GUI/widget frameworks?

11
Options 
Considered
157
User 
Recs.
Last 
Updated
Related Questions
Activity
Here’s the Deal
Slant is powered by a community that helps you make informed decisions. Tell us what you’re passionate about to get your personalized feed and help others.
Have feedback or ideas?
Discord logoJoin our community
on Discord
Ad

The Best 1 of 11 OptionsWhy?

11 Options ConsideredPricev1.0 GZipped sizev2.0 GZipped size (Safari)
91
React with pre-made components
-––
85
Dojo Toolkit
-––
83
Materialize
-––
82
Bootstrap
-––
--
Quasar Framework
-––
See Full List
91
Excellent

React with pre-made components

Add Video or Image
Bryan
Top Pro

Easy to reuse components

•••
Since every single UI component is created independently in JavaScript, it becomes very easy to reuse them throughout your app without having to re-write them.
Bryan
Top Pro

Can be used with different libraries

•••
ReactJS can be used independently as the only library for building the front-end, or it can be used alongside JavaScript libraries such as jQuery, or even Angular.
Bryan
Top Pro

Virtual DOM support

•••
Instead of relying on the DOM, React implements a virtual DOM from scratch, allowing it to calculate precisely what needs to be patched during the next screen refresh. This is orders of magnitude faster than fiddling with the DOM itself.
Bryan
Top Pro

One-way data flow

•••
React's one-way data binding (or one-way data flow) means that it's easy to see where and how your UI is updated and where you need to make changes. It's also very easy to keep everything modular, fast and well-organized.
Bryan
Top Pro

Supported by Facebook and Instagram

•••
React is built by Facebook engineers initially to be used only for their inner projects especially to solve the problem of building large complex applications with constantly changing data.
Endi Sukaj
Top Pro

Extensive SVG support

•••
Since React v0.15, SVG is fully supported. React supports all SVG attributes that are recognized by today's browsers.
Bryan
Top Pro

Template engine independent

•••
React provides a template engine (JSX) which is easy to use. But it's not mandatory.
Bryan
Top Pro

Flux architecture pattern

•••
Flux is a platform agnostic pattern which can technically be used with any application or programming language. One of Flux' main features is that it enforces uni-directional data flow which means that views do not change the data directly. With React this is useful because this way it'...
Bryan
Top Pro

Tested on Facebook itself

•••
React is used on one of the most visited websites on the planet, Facebook. With stellar results and with million of people experiencing it every day.
Bryan
Top Pro

Easy to write tests

•••
Since React's virtual DOM system is implemented completely in JavaScript, it's very easy to write UI test cases.
Bryan
Top Pro

Good debugging tools

•••
React has an official Chrome Extension which is used as a developing and debugging tool. It can be used to quickly and painlessly debug your application or view the whole application structure as it's rendered.
Bryan
Top Pro

Server side rendering

•••
React can render it's components and data server side, then it sends those components as HTML to the browser. This ensures faster initial loading time and SEO friendliness out of the box, since it's indexed as any other static website by search engines.
Endi Sukaj
Top Con

Large file size

•••
React's react.min.js is 145.5KB in size. It's much larger than some other libraries that offer roughly the same features and it's almost the same size as some MV* frameworks such as Angular or Ember that offer more features out of the box. Although, it should be mentioned that sometim...
Bryan
Top Con

You have to learn a new syntax

•••
Requires to learn a custom syntax, JSX that has some gotchas and introduce complexity, a steeper learning curve, and incompatibility with other tools. Though you can opt out from JSX and use vanilla JS instead. But that is not recommended since it adds a lot of unneeded complexity which JSX tries...
Endi Sukaj
Top Con

No support for legacy browsers

•••
React has recently dropped support for Internet Explorer 8. While the library may still work on IE8, issues that affect only IE8 will not be prioritized and/or solved.
Belle
NiceNohochacyum
Top Con

Dependency hell

•••
With all the third party components available for React, which when used smart is a good thing, can result in huge code bloat when used dumb. Javascript sizes can go from KB to MB without doing too much though.
Endi Sukaj
Steven Vachon
Top Con

Slow VirtualDOM

•••
React's VirtualDOM is relatively slow compared to other libraries that implement a VDOM.
Bryan
Top Con

Verbose

•••
React gets a little verbose as applications get more complicated with more components. It's simply not as straightforward as simply writing HTML and JavaScript would be.
See 12 more Pros & ConsSee 16 more Pros & Cons
Ad

10 Other Options Considered

85

Dojo Toolkit

Add Video or Image
DiligentDaichinTengri
Top Pro

Consistent and complete

•••
Endi Sukaj
Top Pro

Highly modular

•••
Dojo Toolkit is a highly modular framework. It uses AMD modules and the module system is extremely powerful and easy to learn.
Endi Sukaj
Top Pro

Not only web apps

•••
Dojo is not used only for web development. The widgets featured in Dojo can also be used to create mobile user interfaces.
Endi Sukaj
Top Con

Not able to keep up with the future of the web

•••
The web is moving towards web components, something that Dojo does not implement. In its current state Dojo badly needs more abstraction and it also needs to provide some form of modern application architecture.
thermoplastics
Aluan Haddad
Top Con

Integrated first-party loader makes interoperability extremely difficult

•••
See 3 more Pros & ConsSee 3 more Pros & Cons
83

Materialize

Add Video or Image
thermoplastics
Top Pro

Opinionated

•••
Material design is very opinionated on how design elements should behave and look. The basics of which revolve around certain visual elements (physics, space, momentum and light) which are used to create specific UX elements. This is very helpful because it creates a consistent feel without making...
thermoplastics
Top Pro

Device agnostic

•••
Since Materialize follows Google's guidelines for Material design, which in theory is device agnostic, Materialize itself is device agnostic too. It's designed to look good on every device.
thermoplastics
Top Pro

Customizable

•••
While the default style is not bad at all, Materialize also gives developers the ability to customize it and fit their own style, while still keeping in line with the Material Design philosophy. Along with the CSS files, designers can also download the SASS files which can be edited and compiled.
Know any negative aspects of this option?
See 2 more ProsSee 2 more Pros
82

Bootstrap

Add Video or Image
Laura Kyle
Top Pro

Well documented

•••
Documentation is thorough, well organized and full of live examples and templates ready for use. Every component and every part of the framework is explained and covered in depth.
Laura Kyle
Craig Deubler
Top Pro

Massive userbase

•••
Bootstrap is very popular and has a large community. As a result of this it is much easier to find help with anything you might need.
Laura Kyle
Top Pro

Custom builds

•••
If you don't want to download the full Bootstrap framework. Custom builds of Bootstrap can be created, including only the desired CSS, CSS components, and JavaScript components. This can be done directly from the Bootstrap website by simply choosing what components to download.
Basarat Ali
Top Con

Can be difficult to change the UI opinions it comes with

•••
Laura Kyle
Top Con

Limited features as a widget framework

•••
Bootstrap is a full-featured CSS framework, which also includes some powerful prebuilt JavaScript components. However, compared to options with the main purpose of being a GUI/widget framework/tookit, there is a limited number of options with Bootstrap.
Laura Kyle
Top Con

Depends on jQuery

•••
Depends heavily on jQuery.
See 4 more Pros & ConsSee 4 more Pros & Cons
--

Quasar Framework

Add Video or Image
Monika
Erick Petrucelli
Top Pro

CSS Framework with themes

•••
Full-featured CSS Framework with Material Design and iOS themes out of the box. Apps deploy looking native without additional steps.
Monika
Erick Petrucelli
Top Pro

Hot reload for web & mobile development

•••
Develop websites and/or apps with hot reload directly on your browser or your phone (with the help of Quasar Play app), without the need of F5 or reinstallation.
Monika
Erick Petrucelli
Top Pro

Modern ecosystem with Vue & ES2015+

•••
Leverage all the Vue and the NPM ecosystem easily, including support for '.vue' single-file components.
Monika
Erick Petrucelli
Top Pro

All platforms in one go

•••
One source code for all platforms simultaneously: responsive websites, PWA and hybrid mobile apps.
Monika
Erick Petrucelli
Top Con

Almost a "one-man project"

•••
It's open source, but it's also mainly developed by the creator, which causes a lot of delay between releases.
See 3 more ProsSee 3 more Pros
--

Inferno

Add Video or Image
thermoplastics
Dominic Gannaway
Steven Vachon
Top Pro

Pretty light-weight

•••
Inferno weighs in at 9kb gzipped, which is light-weight.
Dominic Gannaway
Endi Sukaj
Steven Vachon
Top Pro

Fast performance

•••
Inferno is one of the fastest UI libraries around and widely considered the fastest.
Steven Vachon
Top Pro

Modular

•••
Use it however you want in a framework of your own custom design. When things change in the industry, swap things out instead of being locked in by someone else's design.
Dominic Gannaway
Top Pro

React compatability

•••
Using the Inferno compatibility package ("inferno-compat"), Inferno can support the vast majority of React codebases.
Endi Sukaj
Top Con

Some React components may not work with Inferno

•••
Inferno and React have different public and private APIs. If 3rd party components use a private API then it's almost certainly going to break when you use it with Inferno. Once React Fiber is implemented, even libraries that are currently working will break and will not be supported by Infern...
thermoplastics
Steven Vachon
Top Con

Not very popular

•••
Which can hinder one's opinion of its future, but the future of all "frameworks" is to break things into smaller pieces, so inferno very well might get used by the big names in the future.
See 4 more Pros & ConsSee 4 more Pros & Cons
--

Material Components

Add Video or Image
ingenue
Top Pro

Also useful w/o JavaScript

•••
Know any negative aspects of this option?
--

Discover AngularJS

Add Video or Image
--

jQuery UI

Add Video or Image
Endi Sukaj
Top Pro

Globalization support

•••
jQuery UI has internationalization (globalization) support.
Endi Sukaj
Top Pro

Cross-browser compatibility

•••
jQuery UI, like jQuery has great cross-browser and backward compatibility with the most popular browsers on the market.
Endi Sukaj
Top Con

Slow development

•••
jQuery UI development is rather slow and new features or components are not released frequently.
See 1 more ProSee 1 more Pro
--

Polymer

Add Video or Image
Aubrey
Top Pro

Based on web components

•••
Web Components are a collection of specifications released by W3C as a way to reduce the complexity of web apps by creating reusable components. Browser support is currently poor for web components, however Polymer is developed to make web components compatible with modern browsers.
Aubrey
Top Con

Lack of browser support

•••
Due to web components being so new, there is still a lot of issues with browser compatibility. Though Polymer has solved some of these compatibility issues with polyfills, there is still a lot of bugs and unpredictability.
--

Fit.UI - Object Oriented UI framework

Add Video or Image
Endi Sukaj
PrudentPercunatele
Top Pro

Completely free and open source

•••
Most UI frameworks seems to be really limited or cost money. Fit.UI is actually quite comprehensive and licensed under LGPL which means you can use it for any kind of project - commercial, personal, or open source.
Endi Sukaj
PrudentPercunatele
Top Pro

Full intellisense for JS and TypeScript in Visual Studio Code

•••
You never have to look look up the names of functions - Visual Studio code just lists all the possible functions available on a given Fit.UI object.
Endi Sukaj
PrudentPercunatele
Top Pro

NPM package available

•••
It can easily be installed through npm: npm install fit-ui.
Endi Sukaj
PrudentPercunatele
Top Pro

Enhances productivity

•••
You can create a fairly complex app in little time from scratch using Fit.UI.
Endi Sukaj
PrudentPercunatele
Top Con

Not as much third-party resources available

•••
Since it's not as popular as other libraries there are not as many third-party resources like plugins or tutorials available.
See 3 more ProsSee 3 more Pros

157 Community Recommendations

Steven Vachon
Craig Deubler
Onze
Ben Creasy
Jame Braint
Javier Miguel
Aluan Haddad
Janaka Bandara
Siarhei Hamanovich
Aleksey “astynax” Pirogov
Erick Petrucelli
+88
Request recommendations from the community
DiligentDaichinTengri
DiligentDaichinTengri
Contributor for 4 months
1
Total 
Recs.
15
Total 
Karma
Dojo Toolkit
Recommended 4 months ago
Everything you need in one single place. Declarative or programmatic programming.
Pro
 Consistent and complete
See full
ingenue
ingenue
Contributor for 2 years
48
Total 
Recs.
3K
Total 
Karma
Material Components
Recommended 6 months ago
The official components from Google
Pro
 Also useful w/o JavaScript
See full
PrudentPercunatele
PrudentPercunatele
Contributor for 6 months
1
Total 
Recs.
80
Total 
Karma
Fit.UI - Object Oriented UI framework
Recommended 6 months ago
Enhances productivity by 5x. UI controls look super sleek and works really well.
Pro
 Enhances productivity
Pro
 NPM package available
Pro
 Full intellisense for JS and TypeScript in Visual Studio Code
Pro
 Completely free and open source
Con
 Not as much third-party resources available
See full
Currently displaying 3 out of 157 total recommendations.
Explore Related Questions
I Recommend...
Help millions of people make better decisions.
Each month, over 1.7 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.
undefined