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

# Vaadin Flow Quick Start

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.

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

- About 5 minutes

- JDK 11 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://github.com/vaadin/skeleton-starter-flow-spring/archive/refs/heads/v23.zip)

Unpack the downloaded `ZIP` file into a folder on your computer, and [import the project into the IDE of your choice](https://vaadin.com/docs/v23/guide/step-by-step/importing.md).

## <a id="step-2-add-your-code"></a>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:

`MainView.java`

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

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

2. As the `MainView` class extends `VerticalLayout`, components added to it are 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`. 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 applications in pure Java, without writing any HTML or JavaScript.

[Download a custom project starter](https://start.vaadin.com) to get started on your own application.

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

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

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

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

The source code of the ToDo project is [available on GitHub](https://github.com/vaadin/flow-quickstart-tutorial).

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