Vaadin FAQ

General

What is Vaadin?

Vaadin is an open-source platform for building modern, collaborative web apps for Java backends. It integrates UI components, frameworks, and tools into one opinionated web development stack. It comes with over 40 customizable components.

Vaadin is designed for building professional-looking, single-page web applications. Vaadin apps are progressive web apps (PWAs) by default, which means that your users can install them on their devices.

There are two ways you can build a Vaadin app: the Flow and Hilla frameworks.

If you are familiar with Java programming, you'll learn the object-oriented Flow Java API quickly. All components are Java objects and you compose them into views using layouts. You can also expose typed services for frontend views with only a few annotations on a Java service class.

If you come from a frontend-development background, you'll find Hilla's TypeScript-based views a natural way of working. They use the LitElement library, which is a thin, helper library for building web components. The programming model uses standard TypeScript and is very similar to React.

Flow and Hilla are complementary frameworks. You can use either or combine both in the same application.

Who is Vaadin for?

Vaadin is designed to boost the productivity of full-stack teams. With full-stack type safety and seamless communication between the browser and server, you can focus all your efforts on building functionality.

What does a Vaadin app look like in code?

Here you can see the same small application implemented using either the Java API or the TypeScript API.

Vaadin Flow

A minimal Vaadin application using the Flow Java API can be defined in a single class.

Vaadin Flow is is:

• Component-based
• Programmatic
• Event-driven.

MainView.java

@Route("hello") // http://localhost:8080/hello
public class MainView extends VerticalLayout {

   public MainView() {
       TextField name = new TextField("Your name");
       Button button = new Button("Say hello", e ->
           add(new Paragraph("Hello, " + name.getValue()))
       );

       add(name, button);
   }
}

• It has a text field and a button that are stacked vertically.
• The button has a click listener that adds a greeting Paragraph (<p>) that includes the name from the text field beneath the components.

Hilla

A simple app using the Hilla TypeScript API consists of three files:

1. A file containing the view.
2. A routing configuration.
3. An index page.

Hilla is:

• Component-based
• Declarative
• Reactive.

main-view.ts

@customElement("main-view")
export class MainView extends LitElement {
 @internalProperty()
 private name = "";
 @internalProperty()
 private names: string[] = [];

 render() {
   return html`
     <vaadin-text-field
       label="Your name"
       value=${this.name}
       @change=${this.handleChange}
     ></vaadin-text-field>
     <vaadin-button @click=${this.addName}>
       Say hello
     </vaadin-button>

     ${this.names.map((name) =>
       html`<p>Hello, ${name}</p>
     `)}
   `;
 }

 private handleChange(e: { target: HTMLInputElement }) {
   this.name = e.target.value;
 }

 private addName() {
   this.names = [...this.names, this.name];
   this.name = "";
 }
}

• MainView is mapped to a custom HTML element <main-view> with @customElement.
• The component state is defined in two properties: name for the current input and names for all collected names.
• render() defines a reactive template that is updated any time a property changes.
• The value of the text field is bound to the name property, which gets updated by the handleChange method.
• When the button is clicked, the names array is updated to include it.
• The template uses the map operator to create a <p> tag with a greeting for each name in the array.

index.ts

import { Router } from "@vaadin/router";
import "./main-view";

const routes: Route[] = [
 // http://localhost:8080/hello
 { path: "hello", component: "main-view" } 
];

const router = new Router(document.querySelector("#outlet"));
router.setRoutes(routes);

• Maps the root path to the main-view component.
• Outputs all routes in #outlet.

index.html

<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>
 <div id="outlet"></div>
</body>
</html>

• Defines an outlet for the routes.

How hard is it to learn Vaadin?

Vaadin Flow

Vaadin Flow's Java API is easy to learn if you are familiar with Java. Each component is a Java class and you can create more complex components by combining them with layouts.

The Java programming model is similar to desktop app programming, because it abstracts away from a request and response way of thinking. Instead, components emit events on user interaction, which you can use to update the UI.

Hilla

Hilla's TypeScript views are based on LitElement, a small, reactive web-component library. The components have a template that is efficiently re-rendered on any state change. The component and template syntax use standard TypeScript, which means there are very few custom concepts you need to learn. The programming model is similar to React, which makes it easy to pick up if you have previous experience with that.

When should you use Vaadin Flow?

The Flow framework is focused on productivity and security.

You can build the entire application in Java using Flow. Server-client communication is automated: you don't need to write REST endpoints or other communication-layer code. The UI code runs on the JVM and you have full access to server resources, like dependency injection containers and databases. The server-side architecture makes Flow extremely secure by design.

The downside of Flow is that it requires a reliable internet connection to use the application. It is not possible to write offline functionality using Flow (but you can add offline views to a Flow application using Hilla).

When should you use Hilla?

The Hilla framework helps you write frontend apps, but still enjoy full-stack type safety and easily, secure access to the backend. The responsive templates give you full control over the DOM and unrivaled rendering performance. Apps built using Flow run in the browser and you can make them work offline.

You can expose backend services by annotating a Java class with an @Endpoint annotation. Vaadin automatically generates a REST service and enhances it with async TypeScript functions for convenient, type-safe backend access.

Does Hilla replace Flow?

No. Hilla is a separate and complementary framework. You can continue to build applications 100% in Java using Flow without any issues- in fact, a lot of businesses rely on Flow today.

Can you use both Frameworks in the same application?

Yes. You can use both Flow and Hilla views in the same application. You could, for instance, make internal, data-heavy admin views with the Flow, and end-user views that need to work offline with Hilla.

Because the frameworks are interoperable, it's easy to extend existing Flow applications with offline functionality.

Why would you build a frontend in Java?

Vaadin Flow abstracts many of the time-consuming and complex parts of web development. Working on a higher level of abstraction lets you focus on describing what you want your app to do, instead of on exactly how it should be implemented on a DOM level. Having the entire application in a single, strongly-typed language makes it easier to scale up development teams and refactor the app.

The higher level of abstraction also means more API stability. Vaadin can optimize and update how components or communications work under the hood, without requiring you to change your application code. This makes Flow well suited for apps that need to be maintained for a long time. As a matter of fact, we offer a warranty of up to 15 years on LTS releases.

Automated server-client communication means that you don't need to write REST APIs to communicate with your backend, you can use normal Java method calls to access your data. Because the app runs on the server and Vaadin manages communication, Java-based apps are extremely secure by default.

Do I need to be an expert in HTML, CSS, and JavaScript before I can use Vaadin?

No. You can build a complete, modern web app fully in Java using Vaadin Flow.

Vaadin uses CSS for customizing the look and feel, so you will need to know a little CSS if you want to change colors or fonts.

You need to know TypeScript, HTML, and CSS to use Hilla.

Can you build PWAs with Vaadin?

Yes. Vaadin applications are progressive web apps by default. The starters generate a manifest file and a service worker for an offline fallback page. You can customize the colors, icons, and offline page.

You can also make parts of your app, or even your entire app, work offline with client-side views.

Can Vaadin handle large applications?

Yes. Many of our customers have built apps with hundreds of views.

When using the server-side Flow framework, the client JavaScript size is not dependent on the app size, which means a 100-view application loads just as fast as a single-view application.

Client-side Hilla apps can can defer loading views or parts of the application until they are needed. By using dynamic import() statements, you can ensure your build automatically bundles code in an optimal way.

Does Vaadin support building mobile apps?

Yes. All Vaadin components are designed mobile first. They adapt to different viewport sizes and offer an optimal touch screen experience.

All Vaadin apps are PWAs by default, so your users can install them on their Android and iOS-based mobile devices for convenient access.

You can even list Vaadin PWAs in the Android Play store.

Can I build desktop applications with Vaadin?

Yes. All Vaadin applications are PWAs by default, which means that they can be installed on desktop devices with supported browsers. When installed, they still run as web apps and update automatically, which saves you from having to support multiple versions of the app in the wild.

Vaadin-based apps can also be listed in the Windows Store.

Can I use Vaadin in an existing project?

Yes. You can use the standards-based Vaadin components in almost any project by installing them to your project with npm and using them like any other HTML element.

You can also export individual components or views from a Vaadin application as web components that you can embed in an existing app.

Finally, you can write a Vaadin application that embeds your existing app or parts of it.

Can I add custom CSS and JavaScript?

Yes. You can add your own CSS files and CSS class names to any component or use the Element Java API to set CSS properties from the server side. You can quickly customize the theme by using the Lumo theme editor. You can also execute and include custom JavaScript when needed.

How do you unit test Vaadin apps?

You can use JUnit or any other Java framework for unit testing. You can additionally use Vaadin Test Bench to implement integration tests that interact with your application and let you verify conditions on these interactions.

Are Vaadin apps accessible with screen readers and other assistive technologies?

Yes. All Vaadin components follow accessibility best practices and standards. However, the application developer still needs to take care of ensuring the accessibility of the application, because it is not enough for only the components to be accessible. You can read more about Vaadin accessibility on the dedicated accessibility page.

Which companies use Vaadin?

Vaadin is used by some 150,000 developers and by 40% of the Fortune 500.

Companies known to use Vaadin today include: Disney, Wells Fargo, Bank of America, GlaxoSmithKline, Raytheon, JP Morgan Chase, Volkswagen America, Rockwell Automation, National Public Radio (NPR) and many more.

For more on who uses Vaadin, see the success stories page.

How is Vaadin versioned?

Vaadin uses a fixed release schedule with four minor releases each year (for the latest major version). A new major release comes out roughly every two years. See the blog post about our release model for details.

The currently supported versions of Vaadin are:

You can find the roadmap for upcoming releases on the roadmap page. Commercial support options are available, extending support up to 15 years in total.

Do new releases include breaking changes?

Major versions may include breaking changes, but they are always fully documented in the release notes. Since Vaadin 10, we have kept breaking changes in the Java API to a minimum.

What are the main differences between the currently-supported Vaadin versions?

Vaadin 8 and earlier were based on GWT.

Vaadin 10 and later use web components for the browser implementation, and come with an entirely new set of components. The framework architecture is more modular: you can use the components independently of the Java backend, and you can more easily control custom client-side components though the Flow Java API. The Java programming model remains similar to previous Vaadin versions, although there are some API changes in the new component set.

Vaadin 15 added support for TypeScript-based client-side views and typed endpoints with the Fusion framework. You can continue to use the Java API as before, create apps entirely with the new API, or use both in the same app. Fusion was later separated into its own framework, Hilla, from Vaadin 23.

Is Vaadin free to use?

Yes. Vaadin is an Apache 2.0-licensed, open-source framework. The framework and components are free to use for any purpose. You can develop fully-functional, complete web applications with the core components in Vaadin. Commercial offerings help you to increase your productivity, but are entirely optional.

How does Vaadin make money if the framework is free?

Vaadin sells products and services that relate to the open-source framework. These include additional components, a testing tool, a visual design tool, and online training material. Vaadin also offers professional services ranging from custom component development to customer team augmentation, and even full, turn-key project deliveries. You can find out more about Vaadin's sustainable, open-source model on the Vaadin home page.

Who is behind Vaadin?

Vaadin is a company with more than 20 years of experience in building tools for web developers on the Java platform. Vaadin has offices in the U.S., Finland, and Germany, but supports customers all around the world.

Where does the name Vaadin come from?

Vaadin is the word for a female reindeer in the Finnish language. The reindeer is also included in our }> logo and in our 3D-reindeer branding.

Since most of our users don't speak Finnish, we've heard many variants of the name over the years, such as: vaddin, vaatin, vadib, vadiin, vadin, vaaadin, vaadim, vaadon, vaain, vaardin, vadim, vasdin, waadin, avadin, vadinn, baadin, caadin, faadin, ovadin, vaacin, vaadan, vaaden, vaadi, vaadmin, vaaldin, vaandi, vacdin, vaddim, vadeen, vadein, vadyn, vahdin, vaicadin, vakadin, vakdin, vaodin, vlaadin, vvadin, weadi. We added them here to help you find us on Google no matter how you spell the name.

What kind of apps can you build with Vaadin?

Vaadin is designed for building modern, single-page applications (SPA) with a focus on usability. It is especially well suited for apps that deal with large amounts of data in data grids, forms, and charts.

Vaadin apps are often multi-user apps that help people or teams collaborate and work together.

Here are a two example applications that are built with Vaadin:

• TaskMob - A mobile-first, collaborative task manager that is an installable PWA.
• Business App - A responsive app with dashboards and CRUD views.

How do I get started with Vaadin?

The best way to create your own project is to use our Vaadin Start, which is a visual tool for quickly generating Vaadin web apps that you can download and open in your IDE.

How is Vaadin different from other web frameworks?

Tip: You can find a more in-depth comparison of Vaadin and other frontend frameworks on the web framework comparison page.

Why should I use Vaadin instead of a framework like React or Angular?

Vaadin is a full-stack web app platform. This means that, unlike React or Angular, Vaadin helps you with the backend of the application and makes it easier to coordinate frontend and backend work. Vaadin makes you more productive because it automates time-consuming tasks, like browser-server communication. It also gives you the confidence to develop your app faster because you have full-stack type safety.

Vaadin comes with an extensive design system with more than 40 customizable UI components. It allows you to build cohesive, professional looking apps with minimal effort.

Vaadin is well suited for business-critical applications because it contains everything you need to build an app: components, router, form support, backend communication, and more. When the framework is updated, all parts are verified to work together to ensure a smooth upgrade path. LTS releases enjoy 5 years of free maintenance, which can be extended to 15 years with a Vaadin Prime plan.

How is Vaadin different from Angular?

Angular is a frontend framework, whereas Vaadin is a full-stack web app platform. Both are designed for building single-page apps. In order to build a complete application, Angular needs a separate backend. Backend communication is usually done over REST.

Angular comes with a set of material design components. If you want a different design system, you need to depend on third-party components. With Vaadin, the components are a part of the framework and are maintained and supported alongside it. This means there are fewer moving parts and therefore fewer potentially breaking changes as the software evolves.

How is Vaadin different from React?

React is a flexible library for building UI components. For larger applications, it's often combined with other libraries for functionalities like routing, forms, state management, and components. This flexibility is also React's biggest challenge. Because projects depend on several third-party libraries for core framework functionality, there is a greater risk of breaking changes as libraries are updated or abandoned. React applications also need a separate backend server, often over REST or GraphQL.

Vaadin, like React, is component based. Hilla's programming model is very similar to React. It has a reactive, declarative template that is efficiently updated whenever the component state changes. You can access the backend asynchronously though TypeScript methods, with full type information.

Vaadin's Java API is also component based. It does not use templates, components are constructed programmatically in Java instead. Java components are not reactive.

How is Vaadin different from JSF?

JSF applications are by nature multi-page applications, whereas Vaadin creates dynamic single-page applications that handle navigation to different routes by updating the page content.

If you use Vaadin Flow, you can build your application fully in Java, without templates or XML configuration. If you prefer separating your data from your presentation, you can use the Hilla TypeScript API and define the template in HTML with TypeScript logic.

How is Vaadin different from Spring MVC?

Spring MVC applications with Thymeleaf or other templates are by nature multi-page applications, whereas Vaadin creates dynamic single-page applications. Building dynamic applications with Spring MVC requires you to write your own JavaScript and communicate with the backend through REST.

Vaadin gives you a full set of components and automated server-client communication that makes it much faster to build professional-grade, dynamic web apps. You can use other Spring features, like dependency injection, Spring Security, and Spring Data, together with Vaadin.

How is Vaadin different from GWT?

Vaadin Flow is similar to the GWT API in that it uses components and layouts. The big architectural difference between Vaadin's Java API and GWT is that GWT applications run in the browser, while Vaadin apps run on the server. With Vaadin's Java API, you don't need to define any RPC endpoints or deal with serializing your data, as the framework handles this transparently.

Hilla is architecturally similar to GWT. It produces client-side views that communicate with the server through a typed endpoint. The big difference is that Vaadin TypeScript views are based on W3C browser standards and have a reactive programming model, whereas GWT views are defined programmatically and use a proprietary format.

How does Vaadin work?

How does Vaadin communicate between the server and browser?

Vaadin Flow

The state is maintained on the server and gets rendered in the browser. By default, Vaadin uses XHR (Ajax) requests between the browser and the server. You can opt in to use a WebSocket instead if you need two-way communication or a lower latency.

Hilla

The state is maintained on the client. You access the server through asynchronous TypeScript methods that wrap a REST call to give full-stack type info.

What does the generated HTML look like?

When using the Java API, each Java component has a browser counterpart. Flow maps the Java components to the web components of the same name, for instance, a Button becomes a <vaadin-button> in the DOM.

How easy is it to change the look and feel of Vaadin apps?

Vaadin components use the customizable Lumo theme. You can configure things like colors, spacing, and roundness through CSS variables without writing any CSS.

Vaadin components are normal HTML elements and can be positioned like any other HTML.

It is also possible to customize individual components beyond variable-based changes. You can read more about this in the styling documentation.

Can I use third-party components in Vaadin apps?

Yes, Vaadin is designed to be very easy to extend. Whether you're using Flow or Hilla, you can import JavaScript components through npm or a CDN and embed them. You can set and read properties and listen to JavaScript events directly from Java. To make it easier to reuse a component in your project, you can create a Java API for it.

What technologies does Vaadin support?

Which Java versions does Vaadin support?

Which browsers does Vaadin support?

Vaadin 8 and 14 support the latest versions Chrome, Firefox (and the latest ESR), Safari, Edge, and Internet Explorer 11. Note that using Vaadin 14 with IE 11 requires the use of a polyfill which decreases performance.

Vaadin 15 and later work with all the evergreen browsers mentioned above, except IE11.

Does Vaadin support Spring?

Yes. Vaadin has built-in support for Spring. You can Autowire dependencies into Vaadin components and use Spring Security for authentication and authorization. Learn more about Spring support on the Spring page.

Does Vaadin require Spring Boot?

Vaadin Flow does not require Spring Boot. You can use other Java frameworks (like Jakarta EE's CDI) or no framework at all.

Hilla requires Spring Boot currently, although we are looking into adding support for other backend technologies in future versions.

Are there official Spring Security and OAuth integrations for Vaadin?

Vaadin comes with built-in support for Spring Security and can be integrated with most web security libraries. If you "enable access control" on the settings tab in start.vaadin.com, the generated example app comes with a Spring Security based authentication and authorisation examples.

Does Vaadin support Java/Jakarta EE?

Yes. Vaadin Flow has built-in support for Java/Jakarta EE. You can use CDI to inject dependencies into Vaadin components. Learn more about JEE support on the information page.

Hilla endpoints are only supported with Spring.

Does Vaadin support Kotlin?

Yes. You can build Vaadin Flow applications in Kotlin. You can read more about Vaadin's Kotlin support on the Vaadin with Kotlin page.

Can Vaadin apps use REST APIs?

Yes. Vaadin can be hooked up to any kind of backend, locally on the JVM or remotely over something like REST. You can use whichever REST library you are familiar with and your setup supports, like Spring RestTemplate, Feign, or JAX-RS. Learn more about accessing REST backends in Vaadin.

Does Vaadin support microservices?

Yes. You can easily consume microservices through REST. For more advanced microservice setups, read our microservices tutorial.

What databases does Vaadin support?

Vaadin supports all databases that can be used from Java.

How do you deploy a Vaadin app?

What servers does Vaadin support?

Vaadin supports the following servers:

• Apache Tomcat 8.0.x, 8.5, 9.
• Apache TomEE 7.0.4+.
• Oracle WebLogic Server 12.2.1.
• IBM WebSphere Application Server 8.5 Liberty Profile and 9.
• RedHat JBoss EAP 7.
• WildFly 14, 15, 16.
• Jetty 9.4.
• Payara Server.
• Payara Micro.

Can Vaadin apps run in Docker containers?

Yes. You can find a Docker tutorial in this blog post.

How well do Vaadin apps scale?

How many concurrent users can Vaadin support?

Applications using the server-side Flow API can handle approximately 2,000 - 15,000 concurrent users on a single server, depending on the server memory size and the application’s complexity. Servers can be scaled horizontally with sticky sessions to add more concurrent capacity. The largest stateful Vaadin application that we are aware of today is used by over 100,000 bank employees who concurrently manage 80 million bank accounts. Read more about scalability and read our report on the Vaadin Flow scalability page.

Hilla applications that only use stateless Vaadin endpoints use the serverHttpSession only for authentication. They can be scaled as easily as any other REST backend.

Do you need to use sticky sessions to scale Vaadin apps?

Vaadin Flow UIs are built around having the UI state on the server, in the HTTP session. In practice the session is so large and requires locking for exclusive access so live session replication will not be performant enough. For this reason, you must use sticky sessions.

Hilla UIs have the state in the browser and are not at all stored in the HTTP session. You can enable session replication in a standard way for any other info you choose to store in the session.