Building Zebra UI is not rocket science. Take blank HTML, add reference to Zebra JavaScript library that is hosted on zebra web site and write JavaScript code. The three steps procedure is illustrated below:

1 Take blank HTML

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body> </body>
</html>

2 Add reference to Zebra JS library

<html>
    <head>
        <script type="text/javascript"
                src="http://repo.zebkit.org/latest/zebra.min.js">
        </script>
     ...

3 Write JavaScript code

<script type="text/javascript">
   zebra.ready(function() {
   // import all classes, functions, constants
   // from zebra.ui, zebra.layout packages
   eval(zebra.Import("ui", "layout"));

   // create canvas
   var root = (new zCanvas(400, 400)).root;
   root.properties({
       layout : new BorderLayout(8,8),
       border : new Border(),
       padding: 8,
       kids: {
           CENTER: new TextField("Hi ...\n", true),
           BOTTOM: new Button("Clear").properties({ 
               canHaveFocus: false 
           })
       }
   });
				
   root.find("//zebra.ui.Button").bind(function() {
       root.find("//zebra.ui.TextField").setValue("");
   });
});

</script>

Find result here!