Start Coding with Webix

While working with the Webix library, you go through typical development stages that include setting goals and understanding the requirements, choosing widgets and designing the app to foresee the result and finish it all with the coding itself, which is merely a technical side.

Setting the Goal

At this stage you should determine the app's functionality and evaluate the means of achieving this goal. You should clearly see the purpose of your future app and try to imagine all possible features it may need to meet the requirements.

Preparing Workspace

At this stage you define all the properties of your app and its components, play with event handlers and apply methods for your app to dance in the hands of users. You can check the state of your app in the real time just as you've put the last bracket/brace/colon after the code piece.

The lib package you download from the site includes two versions:

  • full (webix.js) - human-readable code with debugging options
  • minified (webix.min.js) - light-weight code for production

All the coding can be done in any text editor that is capable of syntax highlighting (just for convenience sake) and save the code to a desired format (js, html, php, xml etc.).

Including Webix files into the app

At the initial stage, you need to include Webix library files into your document. It's recommended to use the HTML5 doctype. There are several possible ways, read the Webix Installation Guide article for details.

Enabling Autocompletion for Webix code

You can enable suggestions and automatic completion for Webix methods in text editors, e.g. Visual Studio Code.

If you import Webix as ES6 code, the autocompletion will work automatically:

import * as webix from "@xbs/webix-pro";
const t = webix.uid();// will show the signature and types of Webix methods

If you use Webix as global, you can use the following reference instruction (aka triple-slash directive):

/// <reference path="../../node_modules/@xbs/webix-pro/types/" />
const t = webix.uid();// will show the signature and types of Webix methods

The directive will instruct the compiler to include the TypeScript type definitions that will enable autocompletion of code.

Note that the reference instruction must be at the beginning of the file or after other reference instructions of comments. If it is preceded by a statement or declaration, it is ignored as any other comment.


Here you think about the layout of the app, its look-and-feel, build color scheme and, of course, select all the components for it. You should already decide how the components would be related to each other. The Building App Architecture article will help you position components and make you acquainted with layout types the library offers.

Further on, there are a number of data-presenting components and special features like toolbar, menu and calendar that would breathe life into your app and make it dynamically change to implement all the functions you wish it to perform.

The library is supplied with a rich set of samples to show you how the components look and perform in reality. So you won't regret having spent some time studying them.

Well, there comes time for creativity, so put on your thinking cap and pass to coding.

Main Principles of Coding with Webix

All the components inherit from the base view component and are embedded into it to appear in the output. So, the most frequent piece of code you are going to write is

    view:"...",// specifies the component name you want to create
    //other parameters


var table = new webix.ui({ //any var name will do
    //other parameters

Working with Component ID

Why is ID so important? Because it's the element you can refer to in order to call component methods (including the one that attaches a handler to an inner event):

//attaches handler to inner event
$$("component_id").attachEvent("onSomethingHappens", do_something(){...});
//forces repainting

Methods can be called directly from the component object:

var table = new webix.ui({...});
table.attachEvent("onSomethingHappens", do_something(){...});

However, if you don't specify the ID, it will be automatically generated with the "$component_name1" pattern for each instance of a component.

Auto Generated ID

    //config options
$$("$list1").select(5); // $list1 is an auto-generated ID

Related sample:  Auto-Generated ID

Still, referring to the components by specifying the auto-generated ID is not safe as it may change in case a new instance of one and the same component is added to the application.

Getting Component ID at Runtime

At any moment you can get the component ID (either custom or auto-generated one) through its configuration:

var id =;

and use it for calling methods:


HTML Containers

You can set position, style and dimensions of the needed components with the help of JavaScript only (study Layout and Sizing Components articles) or place them into HTML containers to take the task to CSS.

To achieve this, make up an HTML-layout, set IDs to div elements and set these IDs as the values of the container parameters of the components.

    <div id="dataA" style="width:500px;height:150px;"></div>
    <div id="dataB" style="width:500px;height:300px;"></div>

Code Optimization

Sometimes it is recommended to take some parts of an app to separate variables and include them into the webix.ui() command. It makes it easy to track mistakes and read the code later on.

var simple_config1 = ...;
var simple_config2 = ...;
var simple_config3 = ...;

In case of a really big app with lots of components, controls and functions refer to the Structuring a Big App article to learn all nuances of code optimization.

Read more about HTML templates here.

For further information please study Common Tasks and Event Handling articles.

Back to top