> Markdown version of [Overview](https://vaadin.com/docs/v10/flow/overview). Section index: [llms.txt](https://vaadin.com/docs/v10/flow/llms.txt)

# Vaadin Flow

Vaadin Flow is a new Java web framework for building modern web apps and websites. It is part of the Vaadin Platform and a successor for the Vaadin Framework bringing Web Component support to Java users. Flow allows developers to be super productive by creating UIs in Java or by using HTML Templates for composing the UI and binding it to any backend using Java.

The power of Vaadin Flow comes from the following concepts:

- A set of beautiful UI components build with focus on end-user and developer experience

- Powerful abstraction layers for easily building your own reusable UI components with either Java or HTML templates

- Data Binding API for connecting the UI components to any backend using type safe Java

- Router API for easily creating hierarchical page structures for the user to navigate

This is the documentation for Vaadin Flow. It is divided into the following subsections in recommended reading order.

## <a id="introduction-and-getting-started"></a>Introduction and Getting Started

- [Introduction to Vaadin Flow](https://vaadin.com/docs/v10/flow/introduction/introduction-overview.md)

- [Getting started with Vaadin Flow](https://vaadin.com/tutorials/getting-started-with-flow)

## <a id="router-and-navigation"></a>Router and Navigation

Router is a core concept in Vaadin Flow, enabling Navigation for your website or web app. It is based on HTML5 History API, and makes it possible for the user to navigate pages back and forward, and keep the page state intact. The following tutorials explain how to use the Router:

- [Defining Routes with @Route](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-annotation.md)

- [Navigation Lifecycle](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-lifecycle.md)

- [Router Layouts and Nested Router Targets](https://vaadin.com/docs/v10/flow/routing/tutorial-router-layout.md)

- [URL Parameters for Navigation Targets](https://vaadin.com/docs/v10/flow/routing/tutorial-router-url-parameters.md)

- [URL generation](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-url-generation.md)

- [Navigating Between Routes](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-navigation.md)

- [Updating Page Title on Navigation](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-page-titles.md)

- [Router Exception Handling](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-exception-handling.md)

- [Getting Registered Routes](https://vaadin.com/docs/v10/flow/routing/tutorial-routing-get-registered-routes.md)

## <a id="using-vaadin-components"></a>Using Vaadin Components

- [Using Vaadin Components](https://vaadin.com/docs/v10/flow/components/tutorial-flow-components-setup.md)

- [Component Basic Features](https://vaadin.com/docs/v10/flow/components/tutorial-component-basic-features.md)

- [Component Enabled State](https://vaadin.com/docs/v10/flow/components/tutorial-enabled-state.md)

- [Grid](https://vaadin.com/docs/v10/flow/components/tutorial-flow-grid.md)

- [Using Icons](https://vaadin.com/docs/v10/flow/components/tutorial-flow-icon.md)

## <a id="binding-data-to-components"></a>Binding Data to Components

- [Binder overview](https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-components-binder.md)

- [Validating and Converting User Input](https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-components-binder-validation.md)

- [Loading from and Saving to Business Objects](https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-components-binder-load.md)

- [Binding Beans to Forms](https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-components-binder-beans.md)

- [Showing a list of data with Data Providers](https://vaadin.com/docs/v10/flow/binding-data/tutorial-flow-data-provider.md)

## <a id="importing-html-javascript-and-css-files"></a>Importing HTML, JavaScript and CSS files

- [Including Style Sheets](https://vaadin.com/docs/v10/flow/importing-dependencies/tutorial-include-css.md)

- [Importing html/javascript](https://vaadin.com/docs/v10/flow/importing-dependencies/tutorial-importing.md)

- [Ways of importing the dependencies](https://vaadin.com/docs/v10/flow/importing-dependencies/tutorial-ways-of-importing.md)

## <a id="theming-applications"></a>Theming Applications

- [Theming Overview](https://vaadin.com/docs/v10/flow/theme/theming-overview.md)

- [Using Component Themes](https://vaadin.com/docs/v10/flow/theme/using-component-themes.md)

- [Application Theming Basics](https://vaadin.com/docs/v10/flow/theme/application-theming-basics.md)

- [Theming Crash Course](https://vaadin.com/docs/v10/flow/theme/theming-crash-course.md)

- [Integrating Your Own Component Theme](https://vaadin.com/docs/v10/flow/theme/integrating-component-theme.md)

## <a id="creating-components"></a>Creating Components

- [Creating A Simple Component Using the Element API](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-basic.md)

- [Creating a Component Based on Many Elements](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-many-elements.md)

- [Using API Helpers for Defining Component Properties](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-property-descriptor.md)

- [Creating a Component Using Existing Components](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-composite.md)

- [Using Events with Components](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-events.md)

- [Creating a Component Which Can Contain Other Components](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-container.md)

- [Component Lifecycle Callbacks](https://vaadin.com/docs/v10/flow/creating-components/tutorial-component-lifecycle-callbacks.md)

## <a id="manipulating-dom-with-element-api"></a>Manipulating DOM with Element API

- [Element Properties and Attributes](https://vaadin.com/docs/v10/flow/element-api/tutorial-properties-attributes.md)

- [Listening to User Events](https://vaadin.com/docs/v10/flow/element-api/tutorial-event-listener.md)

- [Retrieving User Input](https://vaadin.com/docs/v10/flow/element-api/tutorial-user-input.md)

- [Dynamic styling](https://vaadin.com/docs/v10/flow/element-api/tutorial-dynamic-styling.md)

- [Shadow root in server-side Element](https://vaadin.com/docs/v10/flow/element-api/tutorial-shadow-root.md)

## <a id="integrating-web-components"></a>Integrating Web Components

- [Integrating a Web Component](https://vaadin.com/docs/v10/flow/web-components/integrating-a-web-component.md)

- [Creating Java API for a Web Component](https://vaadin.com/docs/v10/flow/web-components/creating-java-api-for-a-web-component.md)

- [Debugging a Web Component Integration](https://vaadin.com/docs/v10/flow/web-components/debugging-a-web-component-integration.md)

- [Creating Another type of Add-on](https://vaadin.com/docs/v10/flow/web-components/creating-another-type-of-addon.md)

- [Creating an In-project Web Component](https://vaadin.com/docs/v10/flow/web-components/creating-an-in-project-web-component.md)

- [Introduction to Web Components](https://vaadin.com/docs/v10/flow/web-components/introduction-to-webcomponents.md)

## <a id="creating-polymer-templates"></a>Creating Polymer Templates

- [Creating A Simple Component Using the Template API](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-basic.md)

- [Binding Components from PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-components.md)

- [Using sub-template from PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-subtemplate.md)

- [Using \<slot> in PolymerTemplates](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-components-in-slot.md)

- [Handling User Events in a PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-event-handlers.md)

- [Binding Model Data in a PolymerTemplate](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-bindings.md)

  - [Two-way data binding](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-bindings.md#two-way-binding)

- [Using List of Items in a PolymerTemplate with template repeater](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-list-bindings.md)

- [Using Beans with a PolymerTemplate Model](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-model-bean.md)

- [Using Model Encoders with a PolymerTemplate Model](https://vaadin.com/docs/v10/flow/polymer-templates/tutorial-template-model-encoders.md)

## <a id="using-vaadin-with-spring"></a>Using Vaadin with Spring

- [Use Vaadin with Spring](https://vaadin.com/docs/v10/flow/spring/tutorial-spring-basic.md)

- [Use Vaadin with Spring MVC](https://vaadin.com/docs/v10/flow/spring/tutorial-spring-basic-mvc.md)

- [Routing with Spring](https://vaadin.com/docs/v10/flow/spring/tutorial-spring-routing.md)

- [Vaadin Spring Scopes](https://vaadin.com/docs/v10/flow/spring/tutorial-spring-scopes.md)

- [Vaadin Spring Configuration](https://vaadin.com/docs/v10/flow/spring/tutorial-spring-configuration.md)

- [Getting Started with Spring and Vaadin](https://vaadin.com/docs/v10/flow/spring/tutorial-spring-examples.md)

## <a id="using-vaadin-with-cdi"></a>Using Vaadin with CDI

- [Use Vaadin with CDI](https://vaadin.com/docs/v10/flow/cdi/tutorial-cdi-basic.md)

- [Components instantiated by the framework](https://vaadin.com/docs/v10/flow/cdi/tutorial-cdi-instantiated-beans.md)

- [Vaadin CDI contexts](https://vaadin.com/docs/v10/flow/cdi/tutorial-cdi-contexts.md)

- [Observable Vaadin events](https://vaadin.com/docs/v10/flow/cdi/tutorial-cdi-events.md)

- [Vaadin service interfaces as a CDI bean](https://vaadin.com/docs/v10/flow/cdi/tutorial-cdi-service-beans.md)

- [Getting Started with CDI and Vaadin](https://vaadin.com/docs/v10/flow/cdi/tutorial-cdi-examples.md)

## <a id="packaging-for-production"></a>Packaging for Production

- [Taking your Application into Production](https://vaadin.com/docs/v10/flow/production/tutorial-production-mode-basic.md)

- [Customising Bundling](https://vaadin.com/docs/v10/flow/production/tutorial-production-mode-customising.md)

- [Advanced production mode topics](https://vaadin.com/docs/v10/flow/production/tutorial-production-mode-advanced.md)

## <a id="migrating-from-vaadin-8-to-vaadin-platform"></a>Migrating from Vaadin 8 to Vaadin platform

- [Migrating from Vaadin 8 to Vaadin platform](https://vaadin.com/docs/v10/flow/migration/1-migrating-v8-v10.md)

- [Migration Strategies](https://vaadin.com/docs/v10/flow/migration/2-migration-strategies.md)

- [Differences between Vaadin platform and Vaadin 8 Applications](https://vaadin.com/docs/v10/flow/migration/3-general-differences.md)

- [Routing and Navigation](https://vaadin.com/docs/v10/flow/migration/4-routing-navigation.md)

- [Components in Vaadin platform](https://vaadin.com/docs/v10/flow/migration/5-components.md)

  - [Component Set](https://vaadin.com/docs/v10/flow/migration/5-components.md#components)

  - [Basic Component Features](https://vaadin.com/docs/v10/flow/migration/5-components.md#basic-features)

  - [Layouts in Vaadin platform](https://vaadin.com/docs/v10/flow/migration/5-components.md#layouts)

- [Themes and Theming Applications](https://vaadin.com/docs/v10/flow/migration/6-theming.md)

- [Add-ons, Integrations and Tools](https://vaadin.com/docs/v10/flow/migration/7-tools-integrations.md)

## <a id="advanced-topics"></a>Advanced Topics

- [Application Lifecycle](https://vaadin.com/docs/v10/flow/advanced/tutorial-application-lifecycle.md)

- [Application Localization (I18N)](https://vaadin.com/docs/v10/flow/advanced/tutorial-i18n-localization.md)

- [Modifying the bootstrap page](https://vaadin.com/docs/v10/flow/advanced/tutorial-bootstrap.md)

- [Flow runtime configuration](https://vaadin.com/docs/v10/flow/advanced/tutorial-flow-runtime-configuration.md)

- [Customizing the Loading Indicator](https://vaadin.com/docs/v10/flow/advanced/tutorial-loading-indicator.md)

- [Server Push Configuration](https://vaadin.com/docs/v10/flow/advanced/tutorial-push-configuration.md)

- [Asynchronous Updates](https://vaadin.com/docs/v10/flow/advanced/tutorial-push-access.md)

- [Creating Collaborative Views](https://vaadin.com/docs/v10/flow/advanced/tutorial-push-broadcaster.md)

- [Executing JavaScript from Server Side](https://vaadin.com/docs/v10/flow/advanced/tutorial-execute-javascript.md)

- [Modifying how dependencies are loaded with DependencyFilters](https://vaadin.com/docs/v10/flow/advanced/tutorial-dependency-filter.md)

- [Configure RequestHandlers, BootstrapListeners and DependencyFilters using VaadinServiceInitListener](https://vaadin.com/docs/v10/flow/advanced/tutorial-service-init-listener.md)

- [Showing Dynamic Content](https://vaadin.com/docs/v10/flow/advanced/tutorial-dynamic-content.md)

- [History API](https://vaadin.com/docs/v10/flow/advanced/tutorial-history-api.md)

- [Using stream resources](https://vaadin.com/docs/v10/flow/advanced/tutorial-stream-resources.md)

- [UIInitListener](https://vaadin.com/docs/v10/flow/advanced/tutorial-ui-init-listener.md)