ZUL Visual Editor display the result preview of the ZUL document, the preview will be updated instantly according to the changes of the content of ZUL file in ZUL Editor. When you select certain component in Intelligent Editor, that whole area of that component inside the ZUL Visual Editor will be marked with blue dash-line rectangle frame, and if that component has an id attribute, there will be a ID tag shown in the visualized content area for indication.

There are two control buttons on ZUL Visual Editor, right one is to refresh the content shown in ZUL Visual Editor, right one is to refresh preview if the ZUL Visual Editor doesn't change the preview when you update zul file, left one is used to completely restart ZUL Visual Editor when you manually change your JAR file in project's library.

If you click certain component in the result preview of the ZUL Visual Editor, the corresponding code segment in ZUL Editor and the component in Hierarchy View of Web Page will be highlighted.

ZUL Visual Editor Runtime Quick Switch

You can change the version of ZK library that ZUL Visual Editor used to see the difference between different ZK version via a drop down menu, it pops out when you click the triangular button in ZUL Visual Editor toolbar button.

(Note: change the library that ZUL Visual Editor used via this menu will automatically change the Visual Editor project preference of this project that contain the currently opened zul file.)

There are some options for ZUL Visual Editor you can configure in ZK Studio, refer to Global Preference section in Preference for details.

ZUL Visual Editor can present the preview of your zul file even if they are in a Java Project that is not a Dynamic Project. You have to set a folder as the WebContent path in project preference and make sure at least one ZK Package has been installed in Eclipse.