Create and Run Your First ZK Application with Visual Studio Code

From Documentation


We assume you chose VS Code because it is your favourite IDE and you already know your way around. Hence this article doesn't go into much detail. The bottom line is, there shouldn't be any surprise, ZK application can be run like any servlet web application (war) or spring boot (jar) application - the project structure remains the same (following the conventions of a maven or gradle project). Ideally your project should not depend on a specific IDE and run from command line. That allows your team members to pick an IDE of their choice. That being said a pointers to get started below.

Install Visual Studio Code

Install VS Code from the official website.

Java Support in VS Code

As ZK is based on JAVA the first thing to add is java support to VS Code following the official guide.

The Extension Pack for Java works sufficiently well.

Syntax Highlighting for ZUL Files

As of now, there is no official ZK Extension available. However since zul files are technically XML files you can add XML Schema based auto-completion. The popular extension XML Tools can be configured like this.

   "xml.fileAssociations": [
           "pattern": "**/*.zul",
           "systemId": ""

Then prepend your .zul files with the xml prolog and add the zul-xmlns to your root element (then close and reopen the file).

   <?xml version="1.0" encoding="UTF-8"?>
   <zk xmlns="">

Now element and attribute names will be suggested while typing.

Run the Project

Each project has a different ways to build/run. ZK projects produce standard war files or runnable spring boot jars, which can be run with the respective tools - e.g. Maven/Gradle plugins or Tomcat, Jetty extension in VS Code. As mentioned above ZK doesn't add anything specific here -> just run your project using the plugin of your choice.