Designing

To add a component to your design, drag it from the component Palette view and drop it in the desired location - either in the canvas area or in the hierarchical Outline view. Dropping in the desired location on the canvas is the most common approach, but in some situations (especially with complex, deeply nested component hierarchies) dropping on the Outline view gives more control.

Adding Components

Components can be added by dragging from the Palette view, either to the canvas or to the Outline view.

The component you add will be selected in the editor view, and you can immediately edit its properties, such as the caption.

Editing Properties

You can edit component properties in the Properties view. 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.

In addition to exporting the named components to Java, you will end up with things like saveButton and emailField in your Outline view, which will help you keep track of your components.

Vaadin Designer will discover the defined properties of the selected web component. Public properties (name does not start with an underscore '_') and non-readonly properties will be populated to the properties table. You can also add a new property by using the two special lines of the properties table in IntelliJ or by using the plus button (+) on Actions bar of the table in Eclipse.

Adding new property in IntelliJ
Adding new property in Eclipse
Tip
The ellipsis (…​) button next to most properties - when you click it, in many cases a more helpful editor is presented.
Tip
Some boolean properties might not have a checkbox as property editor because Vaadin Designer is not able to guess the type of the properties without a predefined default value. A workaround for this issue is to add the boolean attribute into the declarative using in Source mode, then switch back to the Edit mode. For example: <vaadin-text-field disabled></vaadin-text-field>

Theme Property

When editing a Vaadin element, theme property is always available in properties table, and you can easily apply styles from Vaadin Themes. For example, to change the visual appearance of a Vaadin Button you can apply the primary style.

Theme property

Previewing

While creating a design, it is convenient to preview how the UI will behave in different sizes and on different devices. There are a number of features geared for this.

Resizing Viewport and Presets

The WYSIWYG canvas area also doubles as viewport. By resizing it, you can preview how your design will behave in different sizes, just as if it was displayed in a browser window that is being resized.

You can manually resize the viewport by grabbing just outside of an edge or corner of the viewport, and dragging to the desired size. When you resize the viewport, you can see that the viewport control on the toolbar changes to indicate the current size.

By typing in the viewport control, you can also input a specific size (such as " 200 x 200"), or open it up to reveal size presets. Choose a preset, such as Phone to instantly preview the design on that size.

Viewport Preset Sizes

You can also add your own presets - for instance known portlet or dashboard tile sizes, or other specific sizes you want to target.

To preview the design in the other orientation (portrait vs. landscape), press the icon right of the viewport size control.

Quick preview

The Quick preview is one of the edit-modes available to the right in the toolbar (the other modes being Design and Code). In this mode, all designing tools and indicators are removed from the UI, and you can interact with components - type text, open dropdowns, check boxes, tab between fields, and so on. It allows you to quickly get a feel for (for instance) how a form will work when filling it in. Logic is still not run (hence "quick"), so no real data is shown and, for example, buttons do nothing.

External Preview

The external preview popup shows a QR code and its associated URL. By browsing to the URL with browser or device that can access your computer (that is, on the same LAN), you can instantly see the design and interact with it. This view has no extra designer-specific controls or viewports added, instead it just shows the design as-is; the browser is the viewport.

External Preview

External preview allows multiple browsers and devices to be connected at once, and they are all updated live as you change the design in the IDE. This is an awesome way to instantly preview results on multiple devices and browsers, or to show off a design and collaborate on it - for instance in a meeting setting.