How to work with Designer?
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 and spacing panel
Set width, height, margin, padding, spacing properties with CSS values, or Lumo presets using a dropdown.
Quickly check the responsiveness of the design.
Palette shows snippets and components
Pre-built snippets for Vaadin components. Use any web components from the project.
Outline to display component hierarchy
Modify component hierarchy using drag and drop. Easily connect components to the Java companion file.
Preview in browser or on your 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.
Vaadin Designer has significantly improved our productivity by enabling us to directly produce a working prototype quickly, and have client's feedback very early on. I strongly recommend Vaadin Designer and suggest to try the templates, they are simply awesome!Farrukh Ijaz CEO
Vaadin Designer, with its standard templates, plus the power of SCSS and the Lumo theme, gave me a huge running start when building a new web based front-end to replace our desktop product.Greg Woolsey Director of Engineering
Free 14-days trial
Our tutorial will help you to get started with the trial and shows how to build user interfaces efficiently with Vaadin Designer. Credit card information is not needed for starting the trial period. Vaadin Designer is included in the Vaadin Pro subscription. See Pricing.