Beginner

Webix Installation Guide

This article will help you to explore all available ways of installing Webix.

Using CDN

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"></script>  
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
 
    // here your app will "take shelter"
</script> </body> </html>

This variant is suitable only for the Webix version distributed under GPL.

Using NuGet/NPM

The Webix library can be installed via special dependency management tools. For now, Webix library is integrated with:

  • NuGet package manager for the Microsoft development platform

Installing Webix by means of this tool requires executing just a line of code inside it (you don't need to download anything):

NuGet

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 Webix version distributed under GPL.

  • NPM

By using NPM, you can install both GPL and PRO Webix versions.

GPL version

To install the GPL version, you just need to run the next command:

NPM

npm install webix

PRO version

If you have a commercial Webix license, you also have the possiblity to install the PRO Webix version via NPM.

You need to register a developer in your Webix Client 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

Compulsory Webix files from the downloaded package are webix.js and webix.css. They are included via standard script and link attributes. Be attentive to specify the right relative path to the files.

<!DOCTYPE HTML>
<html>
    <head>
        <!-- Webix CSS file-->  
        <link rel="stylesheet" href="../../codebase/webix.css" type="text/css">
        <!-- Webix JS file-->    
        <script src="../../codebase/webix.js" type="text/javascript"></script>  
    </head>
    <body>
        <script>
        // here your app will "take shelter"
</script> </body> </html>

Debug and minified versions

Starting from version 6.0, there are two versions of the source files:

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

So, you can include the necessary version in the following way:

// full version
<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"></script>
 
// minified version
<link rel="stylesheet" href="https://cdn.webix.com/edge/webix.min.css" type="text/css"> 
<script src="https://cdn.webix.com/edge/webix.min.js" type="text/javascript"></script>

If you need to get one of the older Webix versions, you should use the scheme below:

// debug version
<link rel="stylesheet" href="https://cdn.webix.com/4.3/webix_debug.css" type="text/css"> 
<script src="https://cdn.webix.com/4.3/webix_debug.js" type="text/javascript"></script>
 
//standard version
<link rel="stylesheet" href="https://cdn.webix.com/4.3/webix.css" type="text/css"> 
<script src="https://cdn.webix.com/4.3/webix.js" type="text/javascript"></script>
Back to top