Docs

Docs

React Views

When and how to add client-side React views to a server-driven Vaadin application.

A Vaadin application is built primarily from server-side Flow views written in Java. In addition to these, you can add client-side views written in React and TypeScript. A React view runs entirely in the browser and communicates with the server through type-safe service calls, rather than being rendered on the server like a Flow view.

This section explains how to add React views to an otherwise server-driven Vaadin application. It’s not a guide to building a complete application in React.

Note
Built on Hilla
React views use the technology previously released as a separate product called Hilla, which is now an integrated part of Vaadin. You may still encounter the Hilla name in package names, annotations, and reference documentation.

When to Use React Views

Most views in a Vaadin application are best implemented as Flow views: the logic stays on the server, close to your data and business logic, and you write the whole view in Java. Reach for a React view when a specific view benefits from running on the client:

  • Offline capability — the view needs to keep working when there’s no connection to the server, for example in a field or warehouse application.

  • Highly interactive, low-latency UI — the view updates so frequently that a server round trip per interaction would feel sluggish, such as a drawing canvas or a real-time editor.

  • Reusing existing React code — you already have React components or an ecosystem library that you want to use as-is.

If none of these apply, prefer a Flow view. Mixing client-side and server-side views in the same application is fully supported, but each React view adds a separate, client-side programming model to your codebase, so add them deliberately.

Tip
Wrapping a React Component Is Different
This section is about adding React views (pages with their own route) to your application. If instead you want to use an individual React component inside a Flow view — for example a third-party chart or color picker — you don’t need a React view. See Wrap a React Component instead.

How React Views Fit In

React views and Flow views live in the same application and share the same browser session:

  • They share a single client-side router, so you can link and navigate between Flow and React views freely.

  • They can share the same application shell, such as an AppLayout with a navigation drawer.

  • They’re protected by the same Spring Security configuration on the server.

React views are placed as .tsx files under src/main/frontend/views. Their routes are derived from the file system, so adding a view is often a matter of adding a file. The server side — services, security, and data — is the same Java backend your Flow views already use.

Topics

This section covers:

  • Add a React View — create views, the file-based routing conventions, and how to organize them.

  • Navigation and Layouts — link between views (including to and from Flow views), pass route and query parameters, and wrap views in shared layouts.

  • Call Java Services — make a Java service browser-callable and call it from a React view in a type-safe way.

  • Secure React Views — require authentication, restrict access by role, add login and logout, and protect the services behind your views.

For form building, validation, and other in-depth React topics, see the Hilla reference guides.