> Markdown version of [Quick Start](https://vaadin.com/docs/v14/flow/guide/quick-start). Section index: [llms.txt](https://vaadin.com/docs/v14/flow/llms.txt)

# Vaadin Flow Quick Start

> **Caution: This tutorial is for Vaadin 14.**
>
> If this is your first time trying out Vaadin, you should [read the same tutorial for the latest Vaadin version](/docs/guide/quick-start) instead.

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

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

## <a id="what-you-need"></a>What You Need

- About 5 minutes

- JDK 8 or higher (For example, [Eclipse Temurin JDK](https://adoptium.net/)).

## <a id="step-1-download-a-vaadin-project"></a>Step 1: Download a Vaadin Project

[Download](<https://vaadin.com/vaadincom/start-service/lts/project-base?appName=My Todo\&groupId=org.vaadin.example\&techStack=spring>)   [Open in online IDE](https://gitpod.io/#/https://github.com/vaadin/skeleton-starter-flow-spring/tree/v14)

Unpack the downloaded zip into a folder on your computer, and import the project in the IDE of your choice. (Alternatively, open the project in an online IDE).

## <a id="step-2-add-your-code"></a>Step 2: Add Your Code

Open `src/main/java/org/vaadin/example/MainView.java`. Replace the code in MainView with the code below:

`MainView.java`

```java
package org.vaadin.example;

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
      )
    );
  }
}
```

1. This `@Route` annotation makes the view accessible to the end user, in this case, using the empty \`\` route.

2. As the the `MainView` class extends `VerticalLayout`, components added to it will be ordered vertically.

3. `todosList` is a vertical layout that displays a list of the tasks along with checkboxes.

4. `taskField` is a text input field to enter the description of new tasks.

5. `addButton` is a button for adding a new task.

6. 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`.

7. Add a shortcut for the `addButton` component when the Enter key is pressed.

8. 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.

## <a id="step-3-run-the-application"></a>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` and you should see the following:

[Image: Animation of adding a new todo item and checking it.]

## <a id="go-further"></a>Go further

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

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

- [Flow framework overview](https://vaadin.com/docs/v14/flow/overview.md)

- [In-depth course: learn Vaadin Flow development in 4 hours](https://vaadin.com/docs/v14/flow/tutorial.md)

- [Free online video courses covering Vaadin basics](https://vaadin.com/learn/training)

Source code of the todo project is [available on GitHub](https://github.com/vaadin-learning-center/vaadin-todo).

`B4DF08AB-8BE6-4CC1-B8AF-B47FA07C3795`