Getting Started

Vaadin Designer works with projects using Vaadin Flow. You can get started with a Flow project with these instructions: https://vaadin.com/start#vaadin10

Creating a Vaadin 10 Design

With your project selected, select File  New  Other (or press Ctrl+N), choose Vaadin 10 Design from the list, and click Next.

Creating a New Vaadin 10 Design in Eclipse

In the next step, make sure the locations are correct. The design file must be placed into the frontend folder or one of its sub-folders. You can also choose to create a Java companion file together with the new design. The companion file can be located under any of the project’s Java source roots.

New Design Parameters

Give your design a descriptive name. The name must be a valid HTML Custom Element name.

For example, the name user-editor-design will result in user-editor-design.html and UserEditorDesign.java.

Choose Finish to create the design and open Vaadin Designer.

Vaadin Designer GUI Overview

Vaadin Designer is fully integrated with the IDE and its views can therefore be freely moved and arranged as you wish.

To be able to successfully use the Designer, you will need the Outline, Palette and Properties views, in addition to the main editor.

Panels in Vaadin Designer

The elements of the Vaadin Designer are as follows:

  1. Design file

  2. Companion file

  3. Editor (see below for close-up)

  4. Component palette

  5. Outline - component hierarchy

  6. Properties for the selected component

In the editor view, illustrated in Component Editor, you have a number of controls in the toolbar.

Component Editor
  1. Center viewport

  2. Viewport size and presets

  3. Rotate viewport (portrait / landscape)

  4. Send feedback

  5. Design mode

  6. Source code mode

  7. Preview mode

  8. Companion file connector

  9. External preview

Important
By default, Vaadin Designer requires polymer dependency to render the whole viewport. Therefore, your project must have Polymer dependency placed inside webapp folder or configured using webjars.
Tip
Vaadin Designer will use shared-styles.html file inside webapp/styles/ folder as a global styles definitions for the whole project.

The Palette

The Palette appears on the right side of the editor. The Palette contains the web components available for the current design. Users can drag a component from the Palette and drop it into the desired locations.

When a design is opened, the Designer searches the entire project for web components and loads them into the Palette.

The Palette

There are 3 groups of components: Project Designs, Web Components and HTML Elements.

Project Designs

This group contains the designs from the project so that you can easily reuse them in the currently edited design.

Web Components

This group contains web components that are included the project, either as WebJars or Bower dependencies.

HTML Elements

This group contains Native HTML5 elements, such as style, h1 to h6, div, li, ol, p, ul, a, span, img, script, col, table, button, form, input, label, slot and template.

Tip
Make sure to run mvn install before opening your project. Otherwise, web components are not added into the Palette and your project will not work properly.
How the "Project Components" scanning actually works

Whenever you open a Vaadin 10 design, Vaadin Designer will scan whole project for you. All html files with dom-module and template tags will be considered as web components and end up in "Web Components" section.

Additionally, Vaadin Designer supports web components inside webjars dependencies. Those dependencies could be added using build tool, such as Gradle or Maven.

As a result, your palette might look a bit crowded. Palette Search field can help you to find elements quickly. Hover over the element and palette status bar will show its location.

Palette shows the filtered components

The Outline

The Outline is shown on top-right corner of the IDE by default, containing the hierarchy of the opened design.
You can drag and drop components from the Palette to the Outline and create your design’s structure.

A Vaadin 10 design can have many root elements.
Layout elements, such as div, vaadin-form-layout, vaadin-split-layout, vaadin-horizontal-layout and vaadin-vertical-layout, have their width and height expanded to 100% when they are roots.

Inside the Outline, you can also drag and drop a component around to re-arrange it, or press "Delete" to remove a selected component.

The Outline

The Properties

The Properties lay under the Outline by default, showing the properties of a selected component.

After selecting a component from the Editor or the Outline, you can edit its properties in the Properties table. It is a good idea to give components at least an id if they are to be used from Java code to add logic (such as click listeners for buttons).
Generally, this is needed for most controls, but not for most layouts.

The Properties in IntelliJ IDEA (left) and Eclipse (right)

You can also add a new property by clicking on Click here to add a string property, Click here to add a boolean property (in IntelliJ IDEA) or the Add a new property icon (in Eclipse).