Vaadin Designer

From Idea to App in an Instant

We wanted to challenge the old myth that "Java developers can't create beautiful UIs". This in mind, we introduced Vaadin Designer. Now any Java developer can create great looking web UIs with great productivity.


Vaadin Designer 2.2
for Vaadin Framework 8

Vaadin Designer 1.4
for Vaadin Framework 7

See installation instructions: IntelliJ IDEA Eclipse
Great productivity

Real artists ship, but getting the UI just right can take a long time with all the fine tuning involved. Vaadin Designer is built to let you focus on the results instead of building the layout by trial and error.

We asked seasoned Vaadin developers to implement identical UIs in plain Java and with Vaadin Designer. The time it took to deliver results was halved with the designer. And these developers know Vaadin's Java APIs inside out. Imagine what this would do to the productivity of your entire team!

Build visually

UIs are visual and building visual things as textual Java code can be overwhelming. With Vaadin Designer What You See Is What You Get. Simply drag and drop components in their place. You will see the component hierarchy at all times and have easy access to each component's properties. The canvas has size presets for most common devices or you can simply drag it to a custom size, while seeing how your responsive layout works in real time. The highly configurable rulers, grids, snapping and guidelines make aligning your UI easy.

Hierarchy overview
Configurable canvas
Size presets
Live view on real devices

Get checking your UI design right on all devices and browsers from the start by seeing the UI live on real devices while editing.The external preview is as easy as scanning a QR-code with your device or opening a URL with any browser. You can even go beyond mobile device testing. Why not share the URL with your colleagues or users and let them view your app live when prototyping it in a workshop?

External preview
Collaborative design
Built for real development

Visual editors that assume they know how you want to structure your app rarely support your work beyond the prototyping phase. Vaadin Designer is different by not trying to build a bulky app for you, but instead it simply edits a declarative layout and generates a statically typed Java class to make accessing the components a breeze. The generated code is cleanly separated from your code with inheritance to ensure that you can rely on it being editable throughout development, but still maintains all the benefits of static typing.

Declarative code
Code view
Three-tier separation of concerns
Static typing
Great looking templates

Although having a set of highly polished UI components is a good start, it seldom is enough for creating a usable UI. That's why we introduced support for templates in the Vaadin Designer. Now you can have a jumpstart in building great looking UIs by using our templates or re-using your own designs over and over. It is so powerful it almost feels like cheating. And don't forget to finalize your UI with great looking icons. The built-in FontAwesome icons are scaled to any size and stay crisp and sharp. See available templates.

Scalable font icons
Live theming

Making look'n feel adjustments with CSS and SASS would be so much easier if you could see an instant refresh of your Vaadin app. This is why we introduced the split view to Vaadin Designer. Now you can have your design and your theme files side by side and all changes are applied instantly. And of course, the powerful Valo theme is supported.

Live style updates
Valo support

Commercial license

We have several options available for starting with Vaadin Designer. You can either start with the evaluation license or get a commercial license straightaway.

Latest releases

Jun 28th 2017 Vaadin Designer 2.2.0
See release notes »

Jun 28th 2017 Vaadin Designer 1.4.0
See release notes »

Getting started
License terms

Vaadin Designer is licensed under CVAL 3.

Got feedback?

Get in touch with the dev team and share your improvement ideas.

Give feedback

Documentation in Vaadin Docs

Read the official documentation about Vaadin Designer from Vaadin Docs.
Learn now »

Why it's faster to use Vaadin Designer than write Java

Article on how and why it's quicker to use Vaadin Designer compared to using only Vaadin Java API.
Read now »

Do you know the benefits?

A free PDF "What are the business benefits of Vaadin Pro Tools and how to get there?" is available for download.
A must read for all wishing to succeed with Vaadin.

Get it now and learn all about it

Connecting your designs to data

This tutorials shows you how to connect your Vaadin Designer based views to a real database backend.
Learn now »

Building a comprehensive UI from scratch with Vaadin Designer

In this tutorial you will build a bit more extensive application UI than in some of the earlier tutorials. This tutorial familiarizes you with the different features of Vaadin Designer and gives you ideas of how the tool can be used more effectively
Learn now »

Content property in Vaadin Designer 1.1

How to use the new content property feature in Vaadin Designer 1.1.
Learn now »

Vaadin Designer 1.2 - Responsive templates user guide

In this tutorial we take a look at how to use the responsive templates in Vaadin Designer 1.2. Templates are easy to use and allow you to quickly get up to speed with developing your application with responsive design.
Learn now »

View Navigation with Vaadin Designer

In this tutorial you will learn to set up event listeners to handle user input and leverage those event listeners to build navigation between views.
Learn now »