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 sample or read Treemap 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!