Docs

Documentation versions (currently viewingVaadin 25 (prerelease))

Welcome to the Vaadin Tutorial!

A step-by-step tutorial to get started with Vaadin.

This tutorial will guide you through the basics of building a web application using Vaadin. You’ll start with an empty project and gradually add features to create a functional web application step by step.

You’ll be building parts of the back office of a fictional Click & Collect service for a retail company. The application allows employees to manage the product catalog, process customer orders and track deliveries.

In each step, you’ll explore different aspects of Vaadin, including UI components, data binding, navigation, and more. Some steps depend on previous ones, others can be done independently.

Tip
Fast Lane
If you are in a hurry and have never used Vaadin before, check out the Quick Start tutorial. You can always return to this comprehensive tutorial later.
Setup Project
Set up a new Vaadin project with the necessary dependencies and configuration.
List Data
Build your first Vaadin view that displays a product catalog using a grid component and data from a database.
Sort & Filter
Enhance the product catalog view by adding sorting and filtering capabilities.
Add & Edit
🚧 Work in progress, check back later.