Vaadin Elements – a set of Web Components for business apps

As you have probably noticed, we recently introduced a new product called Vaadin Elements. Vaadin Elements builds on the Web Components standards and Google Polymer and will allow you to start using Vaadin components in any front end framework – like jQuery, Angular 2, React, Ember 2 or any plain HTML page.

In this blog post, I want to address some of the questions and concerns we’ve heard about Vaadin Elements, like: What exactly is Vaadin Elements? How does it relate to Java Vaadin Framework?

First off, Vaadin Elements is aiming to allow you to use the Vaadin components you already know in places and with technologies you previously couldn’t use them with. This means that you can now use Vaadin Grid in any plain HTML page, even if you don’t have a Java server available to you. Vaadin Framework will continue to work as before and will allow you to write UIs in server side Java also in the future. Whether it then makes sense to create an HTML page or a Java single-page app with Vaadin Framework is up to your use case.

The below example shows how to build the same grid displaying contact details through both APIs. The end result will look the same to the end user regardless which API you use.

Vaadin Framework

      List<Person> people = service.getPeople();
      Grid personGrid = new Grid();

Vaadin Elements

            <col name="" header-text="First Name" />
            <col name="" header-text="Last Name" />
            <col name="" header-text="Email" flex/>
        var people = api.getPeople();
        var grid = document.querySelector('vaadin-grid');
        grid.items = people;

By removing the need for a Java backend, you are now free to use Vaadin components in any front-end project. Maybe you have an old admin interface that’s in need of an update but doesn’t have the budget for a full overhaul? With Vaadin Elements, you can replace parts of the old static UI with dynamic ajax components, updating the UI piece by piece. Or maybe you are building mobile applications that need to work offline. Or perhaps you are working on an Angular project and need some enterprise grade components to speed up your development. Regardless of your tech stack, Vaadin Elements will allow you to deliver more with less code, by using ready made HTML elements as building blocks.

As you see, the introduction of Vaadin Elements will allow you to use Vaadin in entirely new ways. We’re really excited about all the new possibilities and are working hard on adding new components and improving the ones we have. Please give it a try, and let us know what you think and if you have any suggestions for new components you’d like to see.

Get started with tutorials and examples

Community Spotlight - November 2015

Spotlight, featured image

It’s been a busy autumn for all of us, but the awesome Vaadin community has found some time to squeeze out quite a lot of cool stuff. Let’s cover some of that.


Many developers have been busy participating in Vaadin Challenge. In this competition, organized together with IBM, you can learn a lot about tools, such as Cloud Foundry, Maven, Vaadin, Bluemix, and compete for some awesome prizes.

The answers have been amazing in both quality and innovativity. We’ll most likely cover some of the best parts after the competition. There are still a couple of days left, so if you have a free weekend, it is still not too late to aim for a brand new Apple Watch.

Article picks: an introduction and lots of Domino + Vaadin material

There have been too many nice articles published lately to list them all here. A really nice Vaadin introduction was written by Sing Li. It’s a really good article to link to your friends who still haven’t found Vaadin into their toolbox.

My other article picks also come from the world of big blue. It looks like Domino developers are finding Vaadin as their tool of choice for building UIs. Paul Withers, a well known Domino developer, recently wrote about Vaadin and plans to publish some examples soon. Rene Winkelmeyer wrote about getting the widgetset compilation working with the Domino development setup and the Vaadin Eclipse plugin. And via Rene’s article, I spotted a complete series of articles about getting started with Vaadin + Domino by Sven Hasselbach.

New add-ons

Although we just covered add-ons extensively in the latest Community Spotlight and Vaangular was specially featured in our blog just a week ago, I just cannot avoid listing some new add-ons (or new for Vaadin 7), lately published in the Directory:

  • Html2Canvas Screenshot is an add-on that makes taking screenshots of your clients’ UIs extremely easy with no Java applet or other plugins required.

  • GridStack Add-on provides drag’n drop multi-column grid layouts for Vaadin applications. Good basis for “workspace” like Vaadin UI.

  • brTextField contains lots of helpers to input specifically Brazilian localized values.

  • Extended Token Field is a UI field displaying and inputting tokens.

  • IndeterminateCheckBox A CheckBox with 3 states, now has a Vaadin 7 compatible version.

  • JSClipboard Add-on is a wrapper for a JavaScript tool that allows to copy any text to user clipboard without the need to use an old fashioned Flash integration.

  • MultiRangePicker is a component for selecting multiple fragments from a range of integer values divided into fixed intervals. Selection is possible by clicking individual cells or by dragging the mouse cursor over several at once.

  • LocationTextField is an add-on that geocodes addresses using a configurable geocoder. Now this add-on is also supported in Vaadin 7.

  • LazyTooltip Add-on can replace a standard Vaadin component tooltip with one that can be lazily loaded and asynchronously updated.

  • Waypoints Add-on is an add-on for Vaadin providing a wrapper for the JavaScript library 'Waypoints'.

BTW. If you have an awesome add-on, new or a more mature one, and would like to feature it in more detail in our blog, like we featured Vaangular last week, feel free to contact me and propose an article about it.

Free certification week

The free certification week is on!

This week you can become a certified Vaadin developer and join 500 others for free! A Vaadin certificate shows that you’ve understood how Vaadin works and are able to create applications with it. As we realize this might come quickly, you’ll have until Sunday night to take the exam and then add it to your LinkedIn. The passed exam will also automatically show up on the forums next to your name. But most importantly, you’ll have proof for yourself that you know Vaadin. Just log in and head over to You have one try, so make sure you have the Book of Vaadin next to you while taking the exam.

Coincidentally this is also the last week and chance for you to join the IBM Vaadin Challenge. In it you’ll build a Vaadin application step-by-step and learn how Vaadin works plus have the chance to win an Apple Watch, an iPad or a GoPro camera. You can even think of this as a first step towards your certification.

And as an added bonus, all Vaadin trainings are at a 20% discount for the entire week. We’ve added all classes for the spring of 2016 so now’s your time to book a slot for you and your team at (and note that there are both onsite and online trainings available).

Take the online certification exam