JavaScript 활용팁
2017.05.16 / 10:05

w2ui New JavaScript UI Library

추천 수 181


New JavaScript UI Library

What People Are Saying

I have been using it quite substantially for a number of different projects now and must say that I absolutely love the way it works. 

- Soteri Panagou
I've been using your grid on a couple of small projects and I've got to say it's an awesome piece of work. It's very easy to configure and offers a lot of features while staying really responsive. As a programmer it inspires me to write better code. 

- Collanders
I must say, I really like all of these controls. They have clean, elegant visuals and the attention to design detail really makes me a fan. In particular, the grid is just incredible. 

- Bob F
I was searching for a slick and simple, but also user-friendly UI library. I tried Polymer, Angular, OpenUI5, jqwidget, … but they do not satisfy my needs. I don’t want to declare the whole UI in html (templates) but instead will create ALL UI elements programmatically (in an easy way). With w2ui this can be done really easy and the UI elements looks really nice. 

- Gerald Leeb
W2UI is an excellent library! In less than a couple of days I was able to reach the same degree of functionality in my project (an interface for my lab database), which took me a couple of months using a well known widget library. W2UI is clean, small, fast and efficient. Plus, it's good looking! 

- Antonio Santos
Very nice looking library. I'm impressed and very hopeful that this will continue to grow and become a major player. The Grid is awesome! 

- John Whitten
I'm loving w2ui, it packs a lot of punch for such a light library. After working with ExtJS for 5 years, I've finally found a suitable replacement. The grid is fantastic! Thanks for all your hard work. 

- Neil Grover
I am seriously blown away at the amazing quality of this library. Well done! 

- Billy
This is amazing! If any project I use this is profitable I'll make sure to pay you for it. 

- Bruno Cassol
This is incredible, thank you. 

- Anthony Isaacson
This library is absolutely amazing, i never seen in my life such a clean and understandable code!!! Congrats for your work! 

- MrCatt
First of all, thank you very much for your hard work on these components - they're all very, very good! 

- Dave Thompson

W2UI 1.5 - MIT License

W2UI is modern, intuitive JavaScript UI library for building rich data-driven web application. The library has a small footprint and only jQuery (1.9+) as a dependency. The library has the following widgets:

  • w2layout
  • w2grid
  • w2toolbar
  • w2sidebar
  • w2tabs
  • w2form
  • w2fields
  • w2popup
  • w2utils

The complete library is only 69Kb (minified & gzipped)

Who Uses It

If you're using w2ui I'd love to hear about it, please email to name of your project and a link to a public website or demo and I will add it to the list.

List of projects that use w2ui

Quick Start

Current stable version is 1.4. Current development version is 1.5.rc1.

You can:

bower install w2ui

To start using the library you need to include into your page:

  • w2ui-1.4.js (or w2ui-1.4.min.js)
  • w2ui-1.4.css (or w2ui-1.4.min.css)

All the widgets and their css classes are defined inside of these two files. There is no image dependencies, some images are embedded into CSS file.

There is no requirement for a server side language. Node, Java, PHP, ASP, Perl or .NET all will work, as long as you can return JSON format from the server (or write a converter into JSON format on the client).

Getting Started Guide

Documentation & Demos

You can find documentation and demos here:

Bug Tracking

Have a bug or a feature request? Please open an issue here Please make sure that the same issue was not previously submitted by someone else.


I have switched to Grunt as a build tool. You will find Gruntfile.js in the root. You still can build with ANT if you are more comfortable with it. Both processes will produces same w2ui.js and w2ui.css files. Grunt has a few more tasks, such as watch, to auto compiles less and js files as you develop. Both tools will do the following:

  • Compile LESS files
  • Concatenate and minify CSS files
  • Concatenate, uglify and minify JS files

To use ANT, you will need to install NodeJS and NPM, then run the following command to install dependencies

sudo npm install less -g
sudo npm install clean-css -g
sudo npm install uglify-js@1 -g

To use Grunt, you will still need to install NodeJS and NPM, then run npm install that will install all dependencies as they are described in package.json file.

npm install

File Structure

- dist           - compiled JS and CSS files
- src            - source JS files
  - kickstart    - copy of another project used with the demos (not part of w2ui itself)
  - less         - LESS files (source for css)
- demos          - all demos, same as on the website
- libs           - auxiliary libraries (jquery, codemirror, etc.) used in the demos (not part of w2ui itself)
- server         - example implementations for a server implementation communicating with w2ui instances
- test           - feature testing files
- qa             - some qunit test


Your contributions are welcome. However, few things you need to know before contribution:

  1. Please check out latest code before changing anything. It is harder to merge if your changes will not merge clean.
  2. If you are changing JS files - do all changes in /src folder
  3. If you are changing CSS files - do all changes in LESS in /src/less/src
  4. If you want to help with unit test - do all changes in /qa
  5. If you want to change documentation - do all changes in /docs
  6. If you want to add demos - do all changes in /demos