Friends of OpenJDK Today

Vaadin 24.4 Adds React Support, In-App Coding Assistant

June 12, 2024


Unified Vaadin Platform: Seamless Integration with Hilla

24.4 adds React support to the entire Vaadin platform by including the Hilla framework.

The Vaadin BOM and Vaadin Spring Boot Starter now include Hilla, allowing you to choose between Flow and Hilla or mix both in your projects.

Vaadin Copilot: an in-app development assistant

Vaadin 24.4 introduces Vaadin Copilot, a visual development tool and AI-powered assistant.

Available by default in development mode, Copilot helps you inspect and edit the UI, and use generative AI to create or modify code.

Copilot is a code-first editor, meaning there is no intermediate design format, it modifies your code directly.

Flow Enhancements

  • Mixing Flow and Hilla views: Combine server-side and client-side routes in a single application. No special configuration needed. Docs · Example Project
  • Using React components in Flow: Wrap any React component as a Flow component and manage its state and events automatically. Docs
  • Using Flow components in React: Embed Flow components in Hilla/React views using WebComponentExporter. Docs
  • React Router by default: Vaadin Flow now uses React Router, simplifying the addition of React components and views. Docs
  • New default frontend directory: The default location for frontend resources is now src/main/frontend/, aligning better with Maven project structure.

Hilla Enhancements

  • Hilla File Router: Simplifies adding React views by automatically mapping files in src/main/frontend/views/ as routes. Docs
  • Automatic Main Menu: The file router’s createMenuItems() utility populates the menu items in the React main layout. Docs
  • Hilla React Signals: Manage state in React applications with @vaadin/hilla-react-signals, offering a robust way to share state updates across components. Docs

Detailed Changelogs

For full details, check the release notes.

Upgrading Guides


Related Articles

View All


Comments (1)

Your email address will not be published. Required fields are marked *

Highlight your code snippets using [code lang="language name"] shortcode. Just insert your code between opening and closing tag: [code lang="java"] code [/code]. Or specify another language.

Save my name, email, and website in this browser for the next time I comment.

Java Weekly, Issue 547 | Baeldung

[…] >> Vaadin 24.4 Adds React Support, In-App Coding Assistant [] […]

Subscribe to foojay updates:
Copied to the clipboard