September 12, 2023Marcus Hellberg

What's new in Hilla 2.2: React form hook and hot reloading

Grids and forms are the workhorses of business applications. While Hilla already has a powerful grid component, creating forms has been more challenging than we would have liked. Hilla 2.2 fixes this by introducing a new form hook for React.

โœ๏ธ New React form support

Building a robust form can be a pain. You need to handle validation, error messages, and user interaction. You can't trust the browser, which means you need to validate the data on the server as well. But you also want to deliver good UX, so you want to give the user feedback as soon as possible on the client. This leads to boilerplate and duplication of validation logic, all of which you need to maintain.

Hilla simplifies this process:

  1. Define validation rules on your Java object
  2. Hilla generates a TypeScript model description that includes the validation logic
  3. Use the generated model description to create a form in React
  4. The user sees validation errors as soon as they type
  5. When the user submits the form, Hilla re-validates the data on the server

Here's how it works in practice:

Define a Java class with validation annotations:

public class Person {
    @Size(min = 2, max = 30)
    private String name;

    private String email;

    private LocalDate birthday;

    // getters and setters omitted

Then, create an Endpoint that returns a Person:

public class PersonEndpoint {

    // ...

    public Person getPerson() {
        return new Person("John Doe", "", LocalDate.of(1980, 1, 1));

    public Person savePerson(Person person) {
        // Save the person to the database

Hilla will inspect the validation rules in your Java class, and it will auto-generate a TypeScript model description that includes these validation rules.

You can now use the generated TypeScript model description to create a form in React:

interface FormProps {
  person: Person;

export default function Form({ person }: FormProps) {
  const { model, field, read, submit } = useForm(PersonModel, {
    onSubmit: async (person) => {
      await PersonService.savePerson(person);

  // Read the person into the form when the person changes
  useEffect(() => read(person), [person]);

  return (
    <div className="flex flex-col gap-m items-start">
      <TextField label="Name" {...field(} />
      <TextField label="Email" {...field(} />
      <DatePicker label="Birthday" {...field(model.birthDay)} />
      <Button onClick={submit}>Submit</Button>

That's it. The user sees validation errors as soon as they type, and the form is automatically validated on the server when the user submits it.

Read more about binding data to forms in the docs.

๐Ÿ”„ Endpoint is now BrowserCallable

As we've talked to developers, we've realized that the term Endpoint is confusing to many. It reminds people of REST endpoints, while Endpoints are actually more similar to RPC Services.

To make the intent clearer, we've added a BrowserCallable alias for Endpoint and will be using it in the documentation going forward. This is not a breaking change, so you don't need to update your code.

A normal Spring Service

public class OrderService {
    // ...

A Spring Service that you can call from the browser

public class OrderService {
    // ...

๐Ÿ“š Better component documentation

The component section of the Hilla documentation now includes a ton of live examples and code snippets to help you get stuff done faster.

A live ComboBox example with source code
A live ComboBox example with source code

โšก๏ธ Faster development with hot reloading

Hilla 2.2 also includes a fix requested by community members working on large projects: improved support for hot reloading in development mode. Endpoints are re-generated without a server restart if you use JRebel or HotSwapAgent, so you can stay in the flow while developing your app.

๐Ÿšข The first of four minor releases this fall

We have a lot of plans for the rest of the year. So much so that we decided to increase the release cadence of Hilla to four minor releases until the end of the year. This means we'll be able to ship more new features and improvements to you faster.

You can view and comment on the list of planned features on GitHub Discussions. Your feedback helps us build the best possible framework for you, so please share your thoughts!

๐Ÿ“ฆ Upgrade to Hilla 2.2

Upgrade by updating the Hilla version property in your pom.xml:

    <!-- other properties -->

You can also create a new app with the Hilla CLI:

npx @hilla/cli create my-app

๐Ÿ“š Full release notes

Read the full release notes on GitHub.

Marcus Hellberg

Marcus Hellberg

Marcus is the VP of Developer Relations at Vaadin. His daily work includes everything from writing blogs and tech demos to attending events and giving presentations on all things Vaadin and web-related.

ยฉ 2023 Vaadin. All rights reserved