Release Webix 3.1

Let’s say “Good bye” to the rainy weather and “Good day” to our new release of Webix 3.1! Less than 2 month passed since our last big update of Webix 3.0, and we are already ready to present the new one.



Our library is updated with new widgets – SideMenu and TreeMap. We also created a new component – Sidebar, which is not included in the package, but you can download it right now.

What we have in the programme today:

  1. TreeMap;
  2. Sidebar;
  3. Sidemenu;
  4. AutoWidth for Menus and Buttons.

TreeMap widget

{ view:"treemap", data: some_data }

This new widget can be used to visualize complex data. It can show plain or hierarchical diagrams, where color and size of each area depends on the underlying data. File system usage, stock market shares, economical and physical stats, those are most common applications for the widget.

The component works similar to any other data widget, so you can use the same ways for data loading and data binding, context menu integration, inline editing and etc.

You can check samples or read the detailed documentation.

TreeMap is available only in Webix Pro.

var menu = webix.ui({ view:"sidemenu", position:"top", body:

The long awaited SideMenu component is now available as a part of Webix UI. SideMenu is a container component which can be used to show some extra content (an extra toolbar, an info panel or any other Webix UI) at some side of the screen.

{ view:"sidebar", data: menu_links }

When SideMenu is not enough SideBar comes to help. Sidebar is a specialized widget, that can be used for creating navigation menus. It can be shown as a wide menu panel, or a narrow list of icons. It’s especially useful for responsive apps that must look fine both on a wide screen and on portable devices.

SideBar and SideMenu are available in both Pro and Standard editions of Webix. While SideMenu is included in the core library, SideBar is released as a separate extension and can be downloaded from GitHub under MIT license.

If you need some more info, check:

AutoWidth for Menus and Buttons

It may sound as a little update, but it is a game changer when you are working on a multilingual app. Starting from Webix 3.1, it’s possible to configure buttons and menus, so that they will adjust themselves to the text automatically instead of using hardcoded values.

For buttons it will look like:

{ view:"button", value:"Click me", autowidth:true }

and for menus:

data: menu_links

Check the Menu and Button documentation for details.

As you can see, as usual we have something to share and to show. Leave you comments and share the opinion.

Have a great day!

Written by
The following two tabs change content below.
Olga Vazhnik

Olga Vazhnik

Webix product manager. Interested in creating strong, hand over hand relationships between the company and its customers using Internet marketing.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on Vote on Reddit
  • Mads Lie Jensen

    The Sidebar sounds very exciting for my current project, thank you!

    On a related note, I would like to see some tutorials on the use of Webix in a Phonegap/Cordova project and some guidelines about how to make an app that can be used on both a browser/pc, a tablet and a phone (In my case, how best to make the app usable on the small phone screen)

    • Maksim Kozhukh


      There is no any specific in working with Webix and Phonegap.

      As for creating an app for Desktop and mobile it is a bit complicated. Web apps based on widgets can’t use common reflow strategy. There are two possible solutions, how to define the different order of views for mobile and desktop – you can use “responsive” mode of webix layouts, or you can define different layouts for mobile and desktop app, and reuse the logic of widgets.


      • Szczepan Rędzioch

        That’s not exactly true. Bootstrap proves that it is possible – and quite easy to create interface, which will work both on mobile and desktop. In Bootstrap you just define what should happen to certain object depending on resolution. But in Webix it is quite difficult to i.e. hide part of field label or move it to another line in low resolution.

        I hope it will be fixed in 4.0. Lack of responsiveness if major flaw of Webix in my opinion.

  • Mangap

    I hope the website is responsive