Getting Started

This section documents the current Vaadin release line — Vaadin 24 LTS / 25.x, Java 17+, Spring Boot 3 / Jakarta EE 10 — as published at the official Vaadin documentation, which is the reference these pages are written and verified against. No specific patch version is pinned. Flow (server-side Java) is the authoring style used throughout, with Hilla / React shown where it differs; Vaadin 7 and the pre-Flow architecture appear only as migration contrast.

This content was generated with the assistance of AI and should be verified against the official documentation before being relied on in production, since Vaadin ships major releases roughly twice a year and its ecosystem iterates.

This section’s bibliography lists the reference material consulted while preparing these pages.

Vaadin is a Java web framework for building browser user interfaces without hand-writing HTML or JavaScript. This page introduces its two programming models, its open-source and commercial editions, and how to create, run and structure a project; the official Getting Started guide is the reference it follows.

Flow, Hilla and Web Components

Vaadin is server-driven: your application logic runs as Java on the server, and a thin client-side engine keeps the browser DOM in sync over an HTTP/WebSocket channel. Two programming models sit on top of that channel and can coexist in one project:

  • Flow — server-side Java, and the style used throughout this section. You compose a view from Java component objects (Button, Grid, VerticalLayout); every click or keystroke is an event handled on the server, which returns the minimal DOM change. See What is Flow? and the Flow reference.

  • Hilla — a browser-side UI written in React and TypeScript that calls type-safe endpoints generated from your Java services. Covered in Hilla and React Views and React Reference.

Both models render the same underlying Web Components — framework-agnostic custom elements such as <vaadin-grid> and <vaadin-button> — so a Flow view and a Hilla view share one component set, one theme and one build. A single application can route some paths to Flow views and others to Hilla views. Architecture covers the request lifecycle. In Vaadin 7 the UI was also server-side Java, but built on GWT; Flow replaced that architecture and is the only current model.

Editions: open source and commercial

The framework itself — Flow, Hilla, routing, Binder data binding and 40+ UI components — is open source under Apache-2.0 and free for commercial use. A separate set of commercial components and tools needs a subscription (Pricing):

  • Pro components — Charts, Grid Pro, CRUD, Dashboard and Map. The component set is listed in Components Overview and Components.

  • TestBench, the end-to-end UI testing tool.

  • Acceleration Kits — for example the SSO Kit, Kubernetes Kit, Azure Cloud Kit and Observability Kit. Not all Kits are commercial: the Collaboration Kit is itself Apache-2.0.

  • The Enterprise subscription tier adds long-term support and security guarantees on top of the Pro contents.

Commercial parts compile and run in development mode without a licence; a production build validates the subscription and fails without one. Configuration and Dev Tools covers those checks.

Creating a project

There are three official routes, all producing a Spring Boot and Maven project (Gradle and plain-servlet variants also exist — see Starters). Install a JDK and an IDE first: Set up the environment.

Vaadin Start. The configurator at start.vaadin.com lets you pick views, a theme, the Java version and add-ons, then downloads a ready project. This is the route in the Quick Start.

Spring Initializr. If you already use Spring Boot, generate at start.spring.io and add the Vaadin dependency — see Spring Initializr.

Maven archetype. From the command line (Maven Archetype):

mvn -B archetype:generate \
  -DarchetypeGroupId=com.vaadin \
  -DarchetypeArtifactId=vaadin-archetype-application \
  -DarchetypeVersion=LATEST \
  -DgroupId=com.example \
  -DartifactId=my-app

Project structure

A generated project follows the standard Maven layout with a frontend folder added:

my-app/
├── pom.xml                       Maven build, Vaadin BOM and plugin
├── package.json                  frontend dependencies (managed by Vaadin)
├── src/main/java/                Flow views, layouts, services, the main() class
├── src/main/frontend/            TypeScript / React (Hilla) sources, themes, index.html
├── src/main/resources/
│   └── application.properties    Spring Boot and Vaadin configuration
└── src/main/resources/META-INF/resources/   static assets

src/main/java holds server-side code: the @Route-annotated Flow views and the Spring Boot main() class. src/main/frontend holds browser-side sources — Hilla React views under views/, theme files, and the generated index.html; Vaadin watches this folder in development mode (Run in your IDE). package.json and vite.config.ts are generated and rarely edited by hand.

pom.xml pulls the platform in through a BOM and the Spring Boot starter, plus vaadin-maven-plugin for the frontend build:

<dependencyManagement>
  <dependencies>
    <dependency>
      <groupId>com.vaadin</groupId>
      <artifactId>vaadin-bom</artifactId>
      <version>24.5.0</version>
      <type>pom</type>
      <scope>import</scope>
    </dependency>
  </dependencies>
</dependencyManagement>

<dependencies>
  <dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-spring-boot-starter</artifactId>
  </dependency>
</dependencies>

A production Maven profile activates the vaadin:build-frontend goal for an optimized bundle; see Maven configuration and Spring Boot Integration.

application.properties carries both Spring and Vaadin keys:

server.port=8080
vaadin.launch-browser=true
vaadin.frontend.hotdeploy=true

Configuration and Dev Tools lists the Vaadin-specific properties.

Running the application

A Spring Boot Vaadin app starts like any other — from the IDE, or with Maven:

mvn spring-boot:run

The first start also downloads npm packages and builds the frontend, then serves the app at http://localhost:8080. Running in development mode (the default) enables:

  • Live reload — editing a Java class triggers an automatic restart, or a hot swap when run under a debugger or the Vaadin IDE plugin; editing anything under src/main/frontend is pushed to the browser with no restart (Run in your IDE).

  • Vaadin Copilot — a visual, AI-assisted editor that appears as a toolbar in the running app for inspecting and editing components, themes and views (Copilot).

  • The dev tools window for build warnings, plus the Vite-served frontend development bundle.

A production build (mvn -Pproduction package) instead pre-compiles and minifies the frontend into the JAR.

A first view

A Flow view is a Java class mapped to a route:

package com.example.views;

import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("")
public class MainView extends VerticalLayout {

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

The click handler runs on the server; Vaadin sends only the notification’s markup back to the browser. The Hilla equivalent is a .tsx file under src/main/frontend/views that uses the same components as React elements — see Hilla and React Views and Components Overview. For the TypeScript side of a Hilla view, see TypeScript Reference.

Versions and baseline

Vaadin ships a major release roughly twice a year. Two lines matter (Upgrading):

Line Baseline

Vaadin 24 (LTS)

Long-term support. Java 17+, Spring Boot 3 / Spring Framework 6, Jakarta EE 10 (Servlet 6). The safe default for a new production app.

Vaadin 25

Current feature line. Java 21+, Spring Boot 4 / Spring Framework 7, Jakarta EE 11 (Servlet 6.1).

Both lines use the same Flow and Hilla APIs — the difference is the platform baseline, not how you write views. Choose the LTS unless you need something newer; moving between lines is covered step by step in the upgrade guide.

See also