Vaadin Designer is the fastest way to visually build UI designs
for Vaadin apps. Designer is part of Vaadin subscription plans
- and you can try it 14 days for free.
Vaadin Designer is a visual tool where you can drag and drop - and configure - web components on a canvas.
The result is an HTML template. With Vaadin Designer, you have the end result in front of you at all times, and any change you do is instantly reflected in the end result.
A Java class is created which refers to the HTML template. This class can be added to your application in Java. Components with defined IDs are available as Java references, and you can insert backend data into them. See the tutorial and start your trial.
Building UI layouts in code involves a lot of trial and error. With Designer, you get to create the component tree and positioning visually in the design canvas and write the UI logic in your Java IDE. And because the layout is simply a Polymer 3 template, it lives as any code file in your version control system.
Get a quick overview of DesignerBuild your UIs by dragging and dropping on a resizable design canvas to ensure responsiveness at all times. Use any Vaadin component or snippet component collections and you'll have a fully functional UI in no time.
Get a quick overview of DesignerYou can preview your designs live on an external device anytime, be it mobile or desktop. See your changes immediately on your device’s screen. Or, share the design with colleagues to set up a prototyping workshop.
Get a quick overview of DesignerBuilding UI layouts in code involves a lot of trial and error. With Designer, you get to create the component tree and positioning visually in the design canvas and write the UI logic in your Java IDE. And because the layout is simply a Polymer 3 template, it lives as any code file in your version control system.
Get a quick overview of DesignerBuild your UIs by dragging and dropping on a resizable design canvas to ensure responsiveness at all times. Use any Vaadin component or snippet component collections and you'll have a fully functional UI in no time.
Get a quick overview of DesignerYou can preview your designs live on an external device anytime, be it mobile or desktop. See your changes immediately on your device’s screen. Or, share the design with colleagues to set up a prototyping workshop.
Get a quick overview of DesignerDrag and drop web components. Updates when the design properties or styles are changed.
Control VerticalLayout, HorizontalLayout, and other flex containers quickly with flexbox controls.
Set width, height, margin, padding, spacing properties with CSS values, or Lumo presets using a dropdown.
Quickly check the responsiveness of the design.
Pre-built snippets for Vaadin components. Use any web components from the project.
Modify component hierarchy using drag and drop. Easily connect components to the Java companion file.
View design on a mobile device with one click. Share the preview link to others.
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 CEOVaadin 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 EngineeringOur 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.