Documentation versions (currently viewingVaadin 8)

Vaadin 8 reached End of Life on February 21, 2022. Discover how to make your Vaadin 8 app futureproof →

Vaadin 8 Designer

Vaadin Designer is a visual WYSIWYG tool for creating Vaadin UIs and views by using drag&drop and direct manipulation. With features such as live external preview and a strong connection between the clean declarative format and the Java code, it allows you to design and layout your UIs with speed and confidence.

designer overview
Vaadin Designer Views

Vaadin Designer is used to create two things:

  1. A declarative file defining a UI (or part of a UI), also known as a design and

  2. A companion Java file used to bind the UI components to Java logic.

The declarative format is a feature of the Vaadin Framework, and can be also used and edited without Vaadin Designer. See "Designing UIs Declaratively" for a description of the format.

Vaadin Designer automatically creates and updates a Java file that exposes sub-components of the design as Java member variables, using variable names that you specify. This file provides the magic that creates a static binding between your design and your Java logic. It also enables Java syntax checking for using a design - if you remove from the design a component that your code needs, or change its variable name, you will get a compile-time error.

A design can be the whole UI or a smaller part of the UI, such as a view or its sub-component. A UI or view can contain many designs.