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.
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.
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?
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.
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 font icons are scaled to any size and stay crisp and sharp. See available templates.
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.
Purchase commercial license
We have several options available for starting with Vaadin Designer. You can either start with the evaluation license or purchase a commercial license straightaway.
Latest releases
30th Dec 2016 Vaadin Designer 1.2.0
See release notes »
3rd Jan 2017Vaadin Designer 2.0.0.beta1
See release notes »
Getting started
License terms
Vaadin Designer is licensed under CVAL 3.
Resources
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 »
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 »
Templates
IBM Design Language Template, Blue
Web application templates inspired by the IBM Design Language with a blue look'n feel. Zip holds three templates: navigation, form and dashboard.
IBM Design Language Template, Dark
Web application templates inspired by the IBM Design Language with a dark look'n feel. Zip holds three templates: navigation, form and dashboard.
IBM Design Language Template, Vivid
Web application templates inspired by the IBM Design Language with a vivid look'n feel. Zip holds three templates: navigation, form and dashboard.