Vaadin Flow Quick Start

Learn to build and deploy a modern web application 100% in Java.

Step 1: Download a Vaadin Project
Step 2: Add Your Code
Step 3: Run the Application

Vaadin Flow enables you to quickly build web applications in pure Java, without writing any HTML or JavaScript.

In this guide, you learn how to build a small but fully functional ToDo application using Vaadin Flow.

What You Need

About 5 minutes
JDK 11 or higher (For example, Eclipse Temurin JDK).

Step 1: Download a Vaadin Project

Download

Unpack the downloaded ZIP file into a folder on your computer, and import the project into the IDE of your choice.

Step 2: Add Your Code

Open src/main/java/com/example/application/views/main/MainView.java. Replace the code in MainView.java with the following code:

package com.example.application.views.main;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.checkbox.Checkbox;
import com.vaadin.flow.component.html.H1;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;

@Route("") // (1)
public class MainView extends VerticalLayout { // (2)

  public MainView() {
    VerticalLayout todosList = new VerticalLayout(); // (3)
    TextField taskField = new TextField(); // (4)
    Button addButton = new Button("Add"); // (5)
    addButton.addClickListener(click -> { // (6)
      Checkbox checkbox = new Checkbox(taskField.getValue());
      todosList.add(checkbox);
    });
    addButton.addClickShortcut(Key.ENTER); // (7)

    add( // (8)
      new H1("Vaadin Todo"),
      todosList,
      new HorizontalLayout(
        taskField,
        addButton
      )
    );
  }
}

The @Route annotation makes the view accessible to the end user, in this case using the empty `` route.
As the MainView class extends VerticalLayout, components added to it are ordered vertically.
todosList is a vertical layout that displays a list of the tasks along with checkboxes.
taskField is a text input field to enter the description of new tasks.
addButton is a button for adding a new task.
In the listener for the button click, first create a new checkbox with the value from the taskField as its label. Then add the checkbox to the todosList.
Add a shortcut for the addButton component when the Enter key is pressed.
Call add() on the VerticalLayout to display the components vertically. Notice that taskField and addButton are in a HorizontalLayout, which puts them next to each other.

Step 3: Run the Application

To run the project in your IDE, launch Application.java, which is located under src/main/java/org/vaadin/example.

Alternatively, you can run the project from the command line by typing mvnw (on Windows) or ./mvnw (on macOS or Linux).

Then, in your browser, open localhost:8080. You should see the following:

Animation of adding a new ToDo item and checking it.

Go Further

Now you have a taste of how Vaadin Flow empowers you to quickly build web applications in pure Java, without writing any HTML or JavaScript.

Download a custom project starter to get started on your own application.

Continue exploring Vaadin Flow in the documentation, tutorials, and video courses:

The source code of the ToDo project is available on GitHub.

4762E8FE-6BAA-405E-8C48-E62042C55239

Documentation