# Building Apps > How to build real-world business applications with Vaadin. Parent index: [Vaadin Docs](https://vaadin.com/docs/v25/llms.txt) ## Overview - [Building Apps](https://vaadin.com/docs/v25/building-apps.md): How to build real-world business applications with Vaadin. ## UI Basics - [UI Basics](https://vaadin.com/docs/v25/building-apps/ui-basics.md): Learn how to compose, arrange, and style UI components in your Vaadin application. - [Compose with Components](https://vaadin.com/docs/v25/building-apps/ui-basics/compose.md): Learn how to decompose user interfaces into a tree of components and how those components communicate. - [Arrange with Layouts](https://vaadin.com/docs/v25/building-apps/ui-basics/layouts.md): Learn how to arrange components horizontally, vertically, and in form grids using Vaadin's built-in layout components. - [Responsive Layouts](https://vaadin.com/docs/v25/building-apps/ui-basics/layouts/responsive.md): Learn how to adapt Vaadin layouts to different screen sizes with built-in components, CSS media and container queries, and Lumo utility classes. - [CSS Grid Layouts](https://vaadin.com/docs/v25/building-apps/ui-basics/layouts/css-grid.md): Learn how to arrange Vaadin components in two-dimensional grids using CSS Grid, including fluid card grids that wrap automatically. - [Write HTML](https://vaadin.com/docs/v25/building-apps/ui-basics/write-html.md): Learn how to create HTML structure in Java using Vaadin's built-in HTML element classes. - [Add Images and Icons](https://vaadin.com/docs/v25/building-apps/ui-basics/add-images-icons.md): Learn how to display images and use icons in your Vaadin application. - [Add Dialogs and Popovers](https://vaadin.com/docs/v25/building-apps/ui-basics/add-dialogs-popovers.md): Learn how to use Confirm Dialog, Dialog, and Popover to present information and collect input in overlays. - [Show a Notification](https://vaadin.com/docs/v25/building-apps/ui-basics/show-notification.md): Learn how to show notifications to inform users about events, completed actions, and errors. - [Add Styling](https://vaadin.com/docs/v25/building-apps/ui-basics/add-styling.md): Learn how to style components using theme variants, inline styles, and CSS class names — starting from pure Java. - [Add Keyboard Shortcuts](https://vaadin.com/docs/v25/building-apps/ui-basics/add-keyboard-shortcuts.md): Learn how to add keyboard shortcuts to buttons and input fields in your Vaadin application. - [Add Drag and Drop](https://vaadin.com/docs/v25/building-apps/ui-basics/add-drag-and-drop.md): Learn how to make components draggable and droppable in your Vaadin application. ## Views & Navigation - [Views & Navigation](https://vaadin.com/docs/v25/building-apps/views.md): Learn how to build views and navigate between them in Vaadin applications. - [Add a View](https://vaadin.com/docs/v25/building-apps/views/add-view.md): Learn how to add a view to a Vaadin application. - [Navigate to a View](https://vaadin.com/docs/v25/building-apps/views/navigate.md): Learn how to navigate between the views of a Vaadin application. - [Pass Data to a View](https://vaadin.com/docs/v25/building-apps/views/pass-data.md): Learn how to pass data between the views of a Vaadin application. - [Route Parameters](https://vaadin.com/docs/v25/building-apps/views/pass-data/route-parameters.md): Learn how to use route parameters in Vaadin. - [Route Templates](https://vaadin.com/docs/v25/building-apps/views/pass-data/route-templates.md): Learn how to use route templates in Vaadin. - [Query Parameters](https://vaadin.com/docs/v25/building-apps/views/pass-data/query-parameters.md): Learn how to manage state with query parameters in Vaadin. - [Complex Data](https://vaadin.com/docs/v25/building-apps/views/pass-data/pass-complex-data.md): Learn how to pass complex data between the views of a Vaadin application. - [Add a Router Layout](https://vaadin.com/docs/v25/building-apps/views/add-router-layout.md): Learn how to add a router layout to a Vaadin application. - [Add a Navigation Menu](https://vaadin.com/docs/v25/building-apps/views/add-navi-menu.md): Learn how to add a navigation menu to a router layout. - [Add a Master-Detail View](https://vaadin.com/docs/v25/building-apps/views/add-master-detail.md): Learn how to build a master-detail view. ## Forms & Data - [Forms & Data](https://vaadin.com/docs/v25/building-apps/forms-data.md): Learn how to create forms and manage data in Vaadin applications. - [Add a Form](https://vaadin.com/docs/v25/building-apps/forms-data/add-form.md): Learn how to add a form to a Vaadin application. - [Fields & Binding](https://vaadin.com/docs/v25/building-apps/forms-data/add-form/fields-and-binding.md): Learn how to compose field components into forms and bind them to Form Data Objects. - [Form Validation](https://vaadin.com/docs/v25/building-apps/forms-data/add-form/validation.md): Learn how to validate a form in a Vaadin application. - [Loading & Saving](https://vaadin.com/docs/v25/building-apps/forms-data/add-form/loading-and-saving.md): Learn how to load and save a form in a Vaadin application. - [Dialogs & Drawers](https://vaadin.com/docs/v25/building-apps/forms-data/add-form/dialogs-and-drawers.md): Learn how to show forms in dialogs and drawers. - [Add a Custom Field](https://vaadin.com/docs/v25/building-apps/forms-data/create-custom-field.md): Learn how to create a Custom Field in Vaadin. - [Add a Grid](https://vaadin.com/docs/v25/building-apps/forms-data/add-grid.md): Learn how to add a data grid to a Vaadin view. - [Static Data](https://vaadin.com/docs/v25/building-apps/forms-data/add-grid/static-data.md): Learn how to populate a grid with static data. - [Buffered Data](https://vaadin.com/docs/v25/building-apps/forms-data/add-grid/buffered-data.md): Learn how to populate a grid with data from an application service. - [Paginated Data](https://vaadin.com/docs/v25/building-apps/forms-data/add-grid/paginated-data.md): Learn how to populate a grid with paginated data from an application service. - [Persistence](https://vaadin.com/docs/v25/building-apps/forms-data/persistence.md): How to choose and combine persistence strategies in Vaadin applications. - [Add Flyway](https://vaadin.com/docs/v25/building-apps/forms-data/persistence/add-flyway.md): Learn how to manage your relational database schema with Flyway. - [Add Spring Data JPA](https://vaadin.com/docs/v25/building-apps/forms-data/persistence/add-spring-data.md): Learn how to integrate Spring Data JPA into a Vaadin application. - [Add jOOQ](https://vaadin.com/docs/v25/building-apps/forms-data/persistence/add-jooq.md): Learn how to integrate jOOQ into a Vaadin application using Spring Boot. - [JPA & Spring Data](https://vaadin.com/docs/v25/building-apps/forms-data/persistence/spring-data.md): How to implement persistence with JPA and Spring Data. - [jOOQ](https://vaadin.com/docs/v25/building-apps/forms-data/persistence/jooq.md): How to implement persistence with jOOQ. - [Handle File Uploads](https://vaadin.com/docs/v25/building-apps/forms-data/handle-uploads.md): Learn how to receive uploaded files, process them with a service, and handle errors. - [Handle File Downloads](https://vaadin.com/docs/v25/building-apps/forms-data/handle-downloads.md): Learn how to serve file downloads from a Vaadin application. - [Generate PDF Reports](https://vaadin.com/docs/v25/building-apps/forms-data/generate-pdf-reports.md): Learn how to generate PDF reports and embed them in a Vaadin view. - [Replace H2](https://vaadin.com/docs/v25/building-apps/forms-data/replace-h2.md): Learn how to replace the H2 database with PostgreSQL. - [Consistency](https://vaadin.com/docs/v25/building-apps/forms-data/consistency.md): How to ensure data consistency in your applications. - [Strong Consistency](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/strong.md): Learn about strong consistency and how to achieve it. - [Transactions](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/transactions.md): Learn about ACID transactions and how to use them in Vaadin applications. - [Declarative Transactions](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/transactions/declarative.md): How to manage transactions declaratively in Vaadin applications. - [Programmatic Transactions](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/transactions/programmatic.md): How to manage transactions programmatically in Vaadin applications. - [Validation](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/validation.md): Learn how to validate your data. - [Domain Primitives](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/domain-primitives.md): Learn what domain primitives are and how to use them in applications. - [Optimistic Locking](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/optimistic-locking.md): Learn about optimistic locking and when to use it. - [Pessimistic Locking](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/pessimistic-locking.md): Learn about pessimistic locking and when to use it. - [Eventual Consistency](https://vaadin.com/docs/v25/building-apps/forms-data/consistency/eventual.md): Learn about eventual consistency and how to achieve it. ## Components - [Components](https://vaadin.com/docs/v25/building-apps/components.md): Learn how to create, style, package, and publish custom Vaadin components, and how to wrap existing web and React components. - [Build a Component](https://vaadin.com/docs/v25/building-apps/components/build-component.md): Learn how to create reusable custom components with a clean API. - [Style a Component](https://vaadin.com/docs/v25/building-apps/components/style-component.md): Learn how to add consistent, maintainable styling to your custom components. - [Package a Component](https://vaadin.com/docs/v25/building-apps/components/package-component.md): Learn how to package a custom component as a JAR that can be shared across projects. - [Publish a Component](https://vaadin.com/docs/v25/building-apps/components/publish-component.md): Learn how to publish your component add-on to Maven Central and the Vaadin Directory. - [Wrap a JavaScript Library](https://vaadin.com/docs/v25/building-apps/components/wrap-js-library.md): Learn how to create a Java API for a plain JavaScript library using @JsModule and the Element API. - [Wrap a Web Component](https://vaadin.com/docs/v25/building-apps/components/wrap-web-component.md): Learn how to create a Java API for a web component, whether third-party or your own. - [Wrap a React Component](https://vaadin.com/docs/v25/building-apps/components/wrap-react-component.md): Learn how to create a Java API for an existing React component using ReactAdapterComponent. ## Business Logic - [Business Logic](https://vaadin.com/docs/v25/building-apps/business-logic.md): Learn how to add business logic to a Vaadin application. - [Add a Service](https://vaadin.com/docs/v25/building-apps/business-logic/add-service.md): Learn how to add an application service to a Vaadin application. - [Background Jobs](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs.md): How to handle background jobs. - [Implementing Jobs](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs/jobs.md): How to implement background jobs. - [Triggering Jobs](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs/triggers.md): How to trigger background jobs. - [UI Interaction](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs/interaction.md): How to interact with jobs from the user interface. - [Callbacks](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs/interaction/callbacks.md): How to use callbacks to interact with the user interface. - [Futures](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs/interaction/futures.md): How to use CompletableFuture to interact with the user interface. - [Producing Reactive Streams](https://vaadin.com/docs/v25/building-apps/business-logic/background-jobs/interaction/reactive.md): How to use reactive streams to interact with the user interface. ## Server Push - [Server Push](https://vaadin.com/docs/v25/building-apps/server-push.md): How to use server push in your user interfaces. - [Pushing](https://vaadin.com/docs/v25/building-apps/server-push/updates.md): How to push updates to a Vaadin Flow user interface. - [Threads](https://vaadin.com/docs/v25/building-apps/server-push/threads.md): How to use threads in a Vaadin Flow user interface. - [Callbacks](https://vaadin.com/docs/v25/building-apps/server-push/callbacks.md): How to use server push with callbacks. - [Futures](https://vaadin.com/docs/v25/building-apps/server-push/futures.md): How to use server push with CompletableFuture. - [Consuming Reactive Streams](https://vaadin.com/docs/v25/building-apps/server-push/reactive.md): How to use server push with reactive streams. ## Security - [Security](https://vaadin.com/docs/v25/building-apps/security.md): Learn how to secure Vaadin applications. - [Add Login](https://vaadin.com/docs/v25/building-apps/security/add-login.md): Learn how to add user login to a Vaadin application using Spring Security. - [Add Logout](https://vaadin.com/docs/v25/building-apps/security/add-logout.md): Learn how to securely logout users from a Vaadin application using Spring Security. - [Protect Views](https://vaadin.com/docs/v25/building-apps/security/protect-views.md): Learn how to protect views in a Vaadin application based on user roles. - [Protect Services](https://vaadin.com/docs/v25/building-apps/security/protect-services.md): Learn how to protect services in a Vaadin application based on user roles. ## Testing - [Testing](https://vaadin.com/docs/v25/building-apps/testing.md): Write tests for your Vaadin application, verify user interactions, and diagnose failures. - [Browserless Testing](https://vaadin.com/docs/v25/building-apps/testing/browserless.md): Choose the browserless test setup for Spring Boot, Java EE/CDI, Quarkus, or plain Java, then test your Flow views. - [Set Up Browserless Tests with Spring Boot](https://vaadin.com/docs/v25/building-apps/testing/browserless/setup-spring-boot.md): Set up a Spring Boot project, write a browserless test for a Flow view, and run it from your IDE or Maven. - [Set Up Browserless Tests in Plain Java](https://vaadin.com/docs/v25/building-apps/testing/browserless/setup-without-spring.md): Configure browserless tests in a plain Java project using a base class or a JUnit extension. - [Set Up Browserless Tests with Quarkus](https://vaadin.com/docs/v25/building-apps/testing/browserless/setup-quarkus.md): Configure Quarkus browserless tests, create a test class, and substitute services using test profiles. - [Set Up Browserless Tests with Java EE/CDI](https://vaadin.com/docs/v25/building-apps/testing/browserless/setup-cdi.md): Use Weld and Vaadin CDI to inject dependencies into browserless view tests, select test alternatives, and manage the test lifecycle. - [Test User Interactions](https://vaadin.com/docs/v25/building-apps/testing/browserless/test-user-interactions.md): Learn how a browserless test works, then fill in forms, select Grid rows, confirm dialogs, and test navigation, shortcuts, and menus. - [Debug a Failing Browserless Test](https://vaadin.com/docs/v25/building-apps/testing/browserless/debug-tests.md): Read the component tree of a failing browserless test, enable failure snapshots, and fix the test. - [Test View Access Control](https://vaadin.com/docs/v25/building-apps/testing/browserless/test-view-access.md): Verify anonymous, authorized, and unauthorized navigation in Spring and Quarkus browserless tests. - [Test a Custom Component](https://vaadin.com/docs/v25/building-apps/testing/browserless/test-custom-components.md): Test a component without a route, add a reusable component tester, and encapsulate interactions in a custom locator. - [Test Signal-Based Views](https://vaadin.com/docs/v25/building-apps/testing/browserless/test-signals.md): Assert changes to signal bindings, process background updates, and verify shared-signal write confirmation. - [Test Multiple Users and Windows](https://vaadin.com/docs/v25/building-apps/testing/browserless/test-multiple-users.md): Verify shared state, independent windows, and authentication isolation across several browserless user sessions. - [Configure a Browserless Test](https://vaadin.com/docs/v25/building-apps/testing/browserless/configure-tests.md): Set Vaadin properties and feature flags for individual browserless tests while retaining the correct framework setup. - [Speed Up Browserless Tests](https://vaadin.com/docs/v25/building-apps/testing/browserless/speed-up-tests.md): Reduce scanning and Spring context startup costs, and evaluate shared test environments without losing test isolation. - [Migrate UI Unit Tests to Browserless Tests](https://vaadin.com/docs/v25/building-apps/testing/browserless/migrate-ui-unit-tests.md): Update UI Unit Testing dependencies and base classes, handle Spring support, and migrate existing JUnit tests. ## Integration - [Integration](https://vaadin.com/docs/v25/building-apps/integration.md): Learn how to integrate Vaadin applications with other systems. - [REST API](https://vaadin.com/docs/v25/building-apps/integration/rest-api.md): Integration of REST API within the Vaadin application. ## AI & LLMs - [AI & LLMs](https://vaadin.com/docs/v25/building-apps/ai.md): Leverage AI in your Vaadin applications with practical use cases and setup options that fit your project. - [Technical Setup](https://vaadin.com/docs/v25/building-apps/ai/technical-setup.md): Configure API keys and IDE settings so your Vaadin application can connect to hosted or local LLMs. - [API Key for your IDE](https://vaadin.com/docs/v25/building-apps/ai/technical-setup/ide.md): instructions how to setup the API License Key in your IDE - [IntelliJ IDEA](https://vaadin.com/docs/v25/building-apps/ai/technical-setup/ide/intellij.md): Learn how to configure environment variables and API keys in IntelliJ IDEA so your Vaadin application can access AI and LLM services. - [Visual Studio Code](https://vaadin.com/docs/v25/building-apps/ai/technical-setup/ide/vscode.md): Configure environment variables or use a .env file in Visual Studio Code to provide API keys for your Vaadin project. - [Eclipse IDE](https://vaadin.com/docs/v25/building-apps/ai/technical-setup/ide/eclipse.md): Configure environment variables or VM arguments in Eclipse IDE to provide API keys for your Vaadin project. - [Quick Start-Guide](https://vaadin.com/docs/v25/building-apps/ai/quickstart-guide.md): A compact chat view with streaming, correct scrolling, and message context. ## Agentic Development - [Agentic Development](https://vaadin.com/docs/v25/building-apps/agentic-development.md): Set up AI coding agents to build Vaadin applications, and give them a loop in which they can verify their own work. - [MCP Server](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp.md): Learn how to integrate AI assistants with Vaadin documentation using the Model Context Protocol. - [Setup Guide](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools.md): Configure your AI development tool to use the Vaadin MCP server for enhanced Vaadin documentation access - [Claude Code](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/claude-code.md): Learn how to configure Claude Code to access Vaadin documentation through the Model Context Protocol server - [Codex](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/codex.md): Learn how to configure OpenAI Codex to access Vaadin documentation through the Model Context Protocol server - [Cursor](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/cursor.md): Learn how to configure Cursor editor to access Vaadin documentation through the Model Context Protocol server - [Windsurf](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/windsurf.md): Learn how to configure Windsurf IDE to access Vaadin documentation through the Model Context Protocol server - [Junie](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/junie.md): Learn how to configure JetBrains Junie AI assistant to access Vaadin documentation through the Model Context Protocol server - [GitHub Copilot](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/github-copilot.md): Learn how to configure GitHub Copilot in VS Code and JetBrains IDEs to access Vaadin documentation through the Model Context Protocol server - [Gemini CLI](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/gemini-cli.md): Learn how to configure Google Gemini CLI to access Vaadin documentation through the Model Context Protocol server - [Other Tools](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/supported-tools/other-tools.md): General instructions for configuring any MCP-compatible tool to access Vaadin documentation - [Self-Hosting](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting.md): Run the Vaadin MCP server inside your own network, on your own host. - [Licensing](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting/licensing.md): Request, install, verify, and renew the license key the server needs to start. - [Deployment Examples](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting/deployment-examples.md): Complete Docker Compose and Kubernetes definitions for a shared internal server. - [Configuration](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting/configuration.md): Every environment variable the self-hosted MCP server reads, and how to place it behind a reverse proxy. - [Air-Gapped Operation](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting/air-gapped-operation.md): How to get the image into a disconnected network, and what the server sends. - [Monitoring and Audit Logging](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting/monitoring-and-audit-logging.md): What to monitor, what to alert on, and how to record every tool call. - [Sizing and Scaling](https://vaadin.com/docs/v25/building-apps/agentic-development/mcp/self-hosting/sizing.md): What one instance needs, and how to add capacity. - [Vaadin Directory MCP Server](https://vaadin.com/docs/v25/building-apps/agentic-development/directory-mcp.md): Configure an AI coding agent to search Vaadin Directory for add-ons, installation instructions, and version compatibility. - [Dev Loop Tutorial](https://vaadin.com/docs/v25/building-apps/agentic-development/dev-loop-tutorial.md): Let an AI coding agent build a feature in a running Vaadin application, and see what the session actually costs. - [Agent Skills](https://vaadin.com/docs/v25/building-apps/agentic-development/agent-skills.md): Install the Vaadin MCP server together with skills for theming, visual design, and form layout in Vaadin Flow applications. - [Agent Tools](https://vaadin.com/docs/v25/building-apps/agentic-development/agent-tools.md): Give an AI coding agent Vaadin commands it can run against your project, instead of facts it has to recall. ## React Views - [React Views](https://vaadin.com/docs/v25/building-apps/react.md): When and how to add client-side React views to a server-driven Vaadin application. - [Add a React View](https://vaadin.com/docs/v25/building-apps/react/add-view.md): Learn to create, name, and organize React views in a Vaadin application - file-based routing conventions, directory structures, route aliases, and explicit routes. - [Navigation and Layouts](https://vaadin.com/docs/v25/building-apps/react/navigate.md): Link and navigate between React and Flow views, pass route and query parameters, and wrap views in shared layouts. - [Call Java Services](https://vaadin.com/docs/v25/building-apps/react/call-services.md): Make a Java service browser-callable and call it from a React view in Vaadin in a type-safe way, with automatically generated TypeScript clients. - [Secure React Views](https://vaadin.com/docs/v25/building-apps/react/security.md): Add login and logout, require authentication, restrict access by role, and protect the services behind React views. ## Architecture - [Architecture](https://vaadin.com/docs/v25/building-apps/architecture.md): Deep Dive articles about architecting full-stack business applications with Vaadin. - [Conceptual Layers](https://vaadin.com/docs/v25/building-apps/architecture/layers.md): Introduces the UI layer and the application layer in Vaadin apps. - [Monoliths](https://vaadin.com/docs/v25/building-apps/architecture/monoliths.md): Essential concepts, as well as advantages and disadvantages of developing and using monolithic applications. - [Microservices](https://vaadin.com/docs/v25/building-apps/architecture/microservices.md): How Vaadin fits into microservice-based systems. - [APIs and SPIs](https://vaadin.com/docs/v25/building-apps/architecture/api-spi.md): The use of Application Programming Interfaces and Service Provider Interfaces in Vaadin applications. - [Package Structure](https://vaadin.com/docs/v25/building-apps/architecture/packages.md): Different ways of structuring the Java packages in Vaadin projects. - [Project Structure](https://vaadin.com/docs/v25/building-apps/architecture/project-structure.md): The basics of structuring and packaging Vaadin projects. - [Single-module Projects](https://vaadin.com/docs/v25/building-apps/architecture/project-structure/single-module.md): How and when to use single-module projects for Vaadin applications. - [Multi-module Projects](https://vaadin.com/docs/v25/building-apps/architecture/project-structure/multi-module.md): How and when to use multi-module projects for Vaadin applications. ## Cookbook - [Cookbook](https://vaadin.com/docs/v25/building-apps/cookbook.md): Code snippets for common tasks