English | Русский
Quick Start

The following steps will take you to your own Webix based app.

<!DOCTYPE HTML>
<html>
    <head>
    <link rel="stylesheet" href="//cdn.webix.com/edge/webix.css" type="text/css">
    <script src="//cdn.webix.com/edge/webix.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript" charset="utf-8">
        /* place for webix.ui */
        </script>
    </body>
</html>
webix.ui({
  /* UI config here */
});
webix.ui({
  rows:[
      { view:"template", 
        type:"header", template:"My App!" },
      { view:"datatable",
        autoConfig:true,
        editable:true,
        data:{
          title:"My Fair Lady", year:1964, votes:533848, rating:8.9, rank:5
        }
      }
  ]
});

And that is all. Just open the page in a browser and you'll see a working mini app.

You can click "Edit Code" and try your own code configs. Full list of possible properties can be found in the API reference.

Few tips

What's next

Check one of the following small tutorials to learn how to build web UI with Webix or dive into the documentation.

Demos

Views and Layouts

Basic building blocks of UI. Placing and sizing elements on the page.

Learn now
Forum Support

Forms and Controls

Controls are the core of the app interactivity. From buttons to calendars.

Learn now
Documentation

DataTable (Grid)

Fast editable grid with built-in sorting, filtering, grouping and paging functionality.

Learn now