The modern web framework
for Java

Hilla integrates a Spring Boot Java back end with a reactive TypeScript front end. It helps you build apps faster with type-safe server communication, included UI components, and integrated tooling.

Get started Documentation

Coming Soon

Read the blog

Type-safe server access

Hilla simplifies secure data access from the client side. Create type-safe endpoint Java classes and let Hilla take care of the rest. Calling a back-end method is as simple as calling an async function.

UI components included

The included Vaadin web components encapsulate rich functionality so you don't have to build it yourself. Start with ready-made UI components, typography, and a beautiful base theme.

Fast and flexible

It is easy to create your own reusable elements with Lit — a lightweight library for creating web components. You get full control over the DOM and unrivaled rendering performance.

Zero configuration

Full stack & single deployment

Hilla offers a zero-configuration toolchain for building web apps that include both your front-end UI and Java stack in a single project. Fetching data from the Java back end is straightforward, thanks to automatically-generated TypeScript code.

Simple type-safe server communication

Hilla helps you access the back end easily with type-safe endpoints.

Hilla generates TypeScript definitions automatically for all parameter and return types.
Call the server through async TypeScript methods instead of URLs.
Build-time type-checking.
Shared data validation on server and client.
Endpoints are secured by default.


                // Type info is automatically generated based on Java
                import Person from 
                  'Frontend/generated/dev/hilla/demo/entity/Person';
                import { PersonEndpoint } from 'Frontend/generated/endpoints';

                async function getPeopleWithPhoneNumber(){
                  const people: Person[] = await PersonEndpoint.findAll();

                  // Compile error: The property is 'phone', not 'phoneNumber'
                  return people.filter(person => !!person.phoneNumber);
                }

                console.log('People with phone numbers: ', 
                  getPeopleWithPhoneNumber());


                @Endpoint
                @AnonymousAllowed
                public class PersonEndpoint {
                
                    private PersonRepository repository;
                
                    public PersonEndpoint(PersonRepository repository) {
                        this.repository = repository;
                    }
                  
                    public @Nonnull List<@Nonnull Person> findAll() {
                        return repository.findAll();
                    }
                }


                @Entity
                public class Person {
                
                    @Id
                    @GeneratedValue
                    private Integer id;
                
                    @Nonnull private String firstName;
                    @Nonnull private String lastName;
                    @Email @Nonnull private String email;
                    @Nonnull private String phone;

                    // getters, setters
                }


              @customElement('person-view')
              export class PersonView extends View {
                @state() people: Person[] = [];
              
                async getPeople() {
                  this.people = await PersonEndpoint.findAll();
                }
              
                render() {
                  return html`
                    <vaadin-button @click=${this.getPeople}>
                      Fetch data
                    </vaadin-button>
                    <span>Showing ${this.people.length} people.</span>
                
                    <vaadin-grid .items=${this.people}>
                      <vaadin-grid-column path="firstName"></vaadin-grid-column>
                      <vaadin-grid-column path="lastName"></vaadin-grid-column>
                      <vaadin-grid-column path="email"></vaadin-grid-column>
                      <vaadin-grid-column path="phone"></vaadin-grid-column>
                    </vaadin-grid>
                  `;
                }
              }

Declarative & component based

Hilla uses a simple, yet powerful, reactive programming model based on Lit.

Define your components and views declaratively in HTML.
The template is updated efficiently whenever the application state changes.
Bind properties and values using standard JavaScript syntax.
The included Vaadin components include all the building blocks you need to build even complex apps.
Create and validate forms using Binder.
Navigate between views and capture parameters with Router.

Clone this example

Powered by Spring Boot

Hilla uses Spring Boot on the server. It means you can get started quickly and have access to the full power of the Spring ecosystem:

Access your database easily with Spring Data.
Secure your app with Spring Security.
Deploy your app as a standalone JAR.


              @SpringBootApplication
              @PWA(name = "Hilla App", shortName = "Hilla")
              public class Application
                      extends SpringBootServletInitializer
                      implements AppShellConfigurator {

                  public static void main(String[] args) {
                      SpringApplication.run(Application.class, args);
                  }

              }

All the tools you need

Components and tools included

Hilla helps you start fast and stay productive by including everything you need in one package.

40+ UI components.
A customizable design system to match your brand.
Figma design kit to help designers and developers work together.
Unified front end and back end build tooling. Run the entire app with Maven or Gradle.

Learn more

Develop faster with hilla

Features to build faster

Here are some of the great features that gives you a headstart.

Powerful forms

Hilla comes with a library for binding input fields to model objects and keeping track of the form state. It reuses the metadata from Java Bean validation annotations to show client and server-side errors automatically.

In-app navigation with a router

Hilla includes a powerful client-side router for web components. Features include async route resolution, animated transition, child routes, navigation guards, redirects, and more.

Secure endpoints by default

Access control features are enabled by default for all endpoint methods. Hilla uses Spring Security for securing your app.

Supports server-side Java views

Hilla is fully interoperable with Vaadin Flow. You can extend existing server-side Vaadin Flow applications with offline functionality by writing client-side Hilla views.

Productivity with Spring Boot

Hilla helps you be productive by seamlessly integrating with Spring Boot, the industry standard for building fast and secure enterprise Java apps. In addition, Maven and Vite are preconfigured to work together, while Live Reload lets you see the result of your code as you go.

Customizable look and feel

All Vaadin components expose their styleable parts, allowing them to be adapted to a custom design system. Built-in CSS custom properties make changing application-wide settings straightforward.

Stateless by default

Hilla apps are easy to scale because they are stateless by default. Stay performant no matter how much your business grows.

Open Source

Hilla is hosted in a public GitHub repository where you can view, extend and modify the source code and report issues.

Modern web + modern Java =

We think Java web apps deserve some love. That's why we built Hilla, the modern web framework built specifically for Java back ends.