The following steps will take you to your own Webix based app.
- create a simple html-page, include js and css files of Webix
<!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>- add UI init code into the script block
webix.ui({
/* UI config here */
});- in place of UI config, put a json object that describes UI. For example, to make a simple panel with header and grid inside, you can use something as:
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](//docs.webix.com/desktop__components.html).
Few tips
You can use js and css files from our CDN, or download those files and use them locally
Webix works better when you are loading html files through some web-server
If you have any questions, feel free to use our forum
What's next
Check one of the following small tutorials to learn how to build web UI with Webix or dive into the documentation.
