Beginner

Webix Installation Guide

This article tells how to prepare the workspace for developing with Webix and lists all available ways of installing the library:

Preparing Workspace

For the simplest Webix app, you need just an HTML file (HTML5 doctype recommended) with:

  • included library sources, JS and CSS files fetched by any of the ways described below;
  • Javascript part or an included JS file with the code of your Webix app.

The lib package contains two versions of Webix JS file:

  • 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 (Sublime, Visual Studio Code, etc.), optionally you can enable code completion.

CDN links

You can directly set links to webix.js and webix.css files located in Webix CDN:

<!DOCTYPE HTML>
<html>
    <head>
    <link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css"
         type="text/css"> 
    <script src="https://cdn.webix.com/edge/webix.js" type="text/javascript"/> 
    </head>
</html>

This variant is suitable only for the open-source Webix edition distributed under General Public Licence (GPL).

NuGet and NPM

Using NuGet

The Webix library can be installed via dependency management tools like NuGet, a package manager for the Microsoft development platform.

Installing Webix by means of this tool requires executing just a line of code:

nuget install Webix
 
// if you use Microsoft Visual Studio, execute this from Package Manager Console
install-package Webix

This variant is suitable only for the open-source Webix edition distributed under General Public Licence.

Using NPM

The Webix library can be installed via NPM, which allows you to get updates for both open-source and commercial (PRO) Webix editions.

GPL edition

To install the open-source version, you just need to run the next command:

npm install webix

PRO edition

If you have a Webix PRO, you can install it via NPM.

You need to register a developer in your Webix Clients Area (the Users section). Then you will get credentials for accessing Webix npm repository:

After that you will be able to install Webix PRO and Complex widgets according to your license. Updates will be available during the whole licensing period.

Downloading Webix Package

You can get the package locally by:

Enabling Autocompletion

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/webix.global.d.ts" />
 
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 to 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.

Back to top