Hilla

Full-stack React framework for Spring

Hilla is a full-stack web app framework that seamlessly combines Spring Boot, React, and UI components, so you can build better apps, faster.
Build better business apps faster

Benefits of pairing React and Spring
Boot with Hilla

File-based routing

Create new views in a Spring Boot project by adding React components in the src/main/frontend/views folder. Hilla will automatically register the route and capture parameters. You can also configure properties like view title and access control right in your React component.
    
           
           
// views/products/{id}/edit.tsx export const config: ViewConfig = { title: "Edit Product", rolesAllowed: ["ADMIN"] } export default function ProductEditor() { const {id} = useParams(); return ( <div> <h2>Edit product {id}</h2> ... </div> ); };

Call Java services directly from React

Hilla enables developers to use React with Java. Use @BrowserCallable to make a Spring class available to your browser. Hilla uses Spring Security to ensure that only the right people have access.

    

// Spring Boot
@BrowserCallable
class CustomerService {
    private final CustomerRepo repo;

    CustomerService(CustomerRepo repo) {
        this.repo = repo;
    }

    public List<Customer> getCustomers() {
        repo.findAll();
    }
}
  
You can then access the service from TypeScript through an async method call, type information included.
    
// React
function CustomerList() {
  // Customer type is automatically generated by Hilla
  const customers = useSignal<Customer[]>([]);

  useEffect(() => {
      CustomerService.getCustomers().then(newCustomers =>
          customers.value = newCustomers
      );
  }, []);

  return (
      <ComboBox items={customers.value} />
  )
}
  

Move fast without breaking stuff with end-to-end type safety

Spend less time reading API docs and more time coding. Automatically generated TypeScript services and data types allow you to explore APIs right in your IDE.

Breaking changes to the API leads to compile-time errors instead of runtime errors in the frontend.

Ensure data consistency with shared form validation logic

Define validation rules in the Java model object, Hilla will automatically reuse them in your React form. On form submit, Hilla automatically re-validates the input in your Spring service.

    
public class Customer {

  @NotBlank(message = "Name is mandatory")
  private String name;

  @NotBlank(message = "Email is mandatory")
  @Email
  private String email;

  // Getters and setters
}
  

The Hilla useForm hook uses the generated TypeScript model to apply the validation rules to the form fields.

    
function CustomerForm() {

  const {model, field, submit} = useForm(CustomerModel, {
      onSubmit: CustomerService.saveCustomer
  });

  return (
  <div>
    <TextField label="Name" {...field(model.name)} />
    <EmailField label="Email" {...field(model.email)} />
    <Button onClick={submit}>Save</Button>
  </div>
  )
}
  

UI components included

Hilla uses the Vaadin UI component library designed for complex, data-heavy business applications. Easily customize forms, data grids, editors, and more to fit your brand. All components are rigorously tested to ensure WCAG 2.2 AA accessibility.

No lock-in: Hilla supports any React components, so you can also bring your own or mix and match as needed.

Stream live updates to the browser with ease

With support for reactive data types, you can build real-time dashboards, notifications, and more without managing websockets yourself.

To stream data from the Spring Boot backend to the React frontend, return a Project Reactor Flux data type from your service.

    
@BrowserCallable
@Service
public class CustomerService {
    public Flux<Customer> getOnlineCustomers() {
        return Flux.just(/*...Online customers...*/);
    }
}
  

Then subscribe to the stream and update the client state as new data comes in.

    
function OnlineCustomers() {
  const [onlineCustomers, setOnlineCustomers] = useState<Customer[]>([]);

  // Instead of awaiting a single response, subscribe to the stream of data
  useEffect(() => {
    CustomerService.getOnlineCustomers().onNext(setOnlineCustomers);
  }, []);

  return (
    <AvatarGroup
      items={onlineCustomers.map((customer) => ({
        name: customer.name,
        img: customer.profilePicture
      }))} />
  )
}
  

What are developers saying?

With a thriving community of developers, it's easy to see why Hilla is quickly becoming
a go-to solution for combining React and Spring Boot and building robust business applications.
Company Logo
I regularly complain on the lack of full-stack framework for Java. There are great backend frameworks, but frontend always felt as second class citizen involving glueing together 3rd party libraries. This isn't true anymore. Check @hillaframework
Avatar New
Maciej Walkowiak
Spring Academy Founder
Company Logo
Amazing! The best way to use React with a Java Backend
Avatar New
Simon Martinelli
Founder of 72 Services
Company Logo
[Hilla] gives you a Spring Boot back-end that's optimized to easily expose your services in a way that those front-end applications can consume
Avatar New
Josh Long
Spring Developer Advocate at VMware Tanzu
Still not convinced?

More reasons to choose Hilla

Powerful forms with shared validations
Add Java bean validations to your server-side objects, and Hilla will automatically apply those validations on the client side. Plus, re-validation on the server ensures data integrity.
Stateless and scalable
Your Hilla app stays nimble and cost-effective, scaling easily because it's stateless by default. You focus on growing your business; we ensure your app can handle it.
Secure communication out-of-the-box
Hilla uses Spring Security to enable access control features by default for all your endpoint methods. Build secure apps without the boilerplate.
Built-in support for streaming data
Build apps that are as dynamic as your business. Hilla fully supports reactive Flux and Mono data types for seamless real-time experiences.
Works with React and Lit frontends
Hilla also supports building the frontend with the Google Lit library, if you prefer. This allows you to build the entire app using web component standards.
TypeScript autocompletion
Say goodbye to constant API doc browsing. Hilla's automatic TypeScript type generation lets you explore your API right within your IDE, speeding up development.
Truly open source
Extend, modify, or even contribute to Hilla. Hilla is Apache 2.0 licensed and hosted on a public GitHub repository. You're encouraged to engage with the code and the community!
Designed for Spring Boot
Hilla is designed to work hand-in-glove with Spring Boot. Enjoy a smooth developer experience with pre-configured Maven and Vite setups and real-time code reloading via Live Reload.
Enterprise support options
Hilla framework is free and open source, but you can also accelerate your time to market with our commercial subscriptions. Get expert support or gain access to premium features like Charts, Grid Pro, and more.
Your brand, your look
Customize the included UI components easily through exposed styleable parts and CSS custom properties. The included Figma design kit ensures designers and developers speak the same language for smooth handovers.
Accessible components
Everyone deserves better business apps. That's why the included Vaadin UI components are continuously tested to ensure good support for assistive devices and technologies.
Single Sign-On Support
Easily integrate your Hilla app with third-party identity providers for a seamless user experience. Our SSO Kit, part of the Acceleration Kits, is available for commercial use.
GraalVM native image support
Compile your Hilla application into a GraalVM native image for lightning-fast startup times and minimal resource use.
Installable on any device
You can configure your Hilla application to generate a PWA ServiceWorker and manifest file with a simple annotation, making your app installable on any device.

Ready to build better business applications, faster?

Get up and running in minutes.