Documentation

Documentation versions (currently viewingVaadin 24)

Designer

Note
Commercial feature

A commercial Vaadin subscription is required to use Designer in your project.

Vaadin Designer is a visual tool where you can drag and drop - and configure - web components on a canvas. With Designer, you always have the end result in front of you. Any change you do is instantly reflected in the live preview of the UI you are building.

Features

WYSIWYG Design Canvas

Drag and drop web components. Updates when the design properties or styles are changed.

Quick Layout Editing

Control VerticalLayout, HorizontalLayout, and other flex containers quickly with flexbox controls.

Sizing & Spacing Panel

Set width, height, margin, padding, spacing properties with CSS values, or Lumo presets using a drop-down.

Viewport Controls

Quickly check the responsiveness of the design.

Palette Shows Snippets & Components

Pre-built snippets for Vaadin components. Use any web components from the project.

Outline to Display Component Hierarchy

Change component hierarchy using drag and drop. Connect components to the Java companion file.

Preview in Browser or Device

View design on a mobile device with one click. Share the preview link to others.

Work within your Project

Work with designs directly in your Java project. Use a Java companion file to connect design to backend data.

C5F0925C-7BC3-429F-A253-FF5853F0FA06