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.
export class PersonView extends LitElement {
@state() people: Person[] = [];
async firstUpdated() {
this.people = await PersonEndpoint.findAll();
}
render() {
return html`
<vaadin-grid .items=${this.people}>
<vaadin-grid-column path="firstName"></vaadin-grid-column>
<vaadin-grid-column path="lastName"></vaadin-grid-column>
</vaadin-grid>`;
}
}
@Endpoint
@AnonymousAllowed
public class PersonEndpoint {
private PersonRepository repository;
public PersonEndpoint(PersonRepository repository) {
this.repository = repository;
}
public @Nonnull List<@Nonnull Person> findAll() {
return repository.findAll();
}
}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.
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.
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);
}
}
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.
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.