Build secure and scalable
web apps with TypeScript

Vaadin Fusion is a framework that helps you rapidly deliver beautiful reactive client-side web apps with a Java backend. It is part of the open-source Vaadin platform.

Get started Documentation

Latest release: 18.0.6

End-to-end type safety

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

UI components included

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

Performance and flexibility

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

Full stack & single deployment

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

Reactive, declarative templates

Vaadin Fusion has a reactive programming model thanks to LitElement. You express your UI declaratively as a function of state. Elements update automatically when their properties change.

click-counter.ts TypeScript
@internalProperty()
private count = 0;

render() {
  return html`
    <vaadin-button @click="${this.onClick}">
      Click
    </vaadin-button>
    <p>Clicked ${this.count} times</p>
  `;
}

onClick() {
  this.count += 1;
}

Designed for the Java backend

The framework exports typed async functions for server access, giving you the same types on both the server and the client. The functions are automatically generated based on the Java classes, which means you will notice breaking API changes early—at compile time.

PersonEndpoint.java Java
@Endpoint
@AnonymousAllowed
public class PersonEndpoint {
  public List<Person> findAll(String filter, int limit) {
    // ...
  }
}

/* Generates TypeScript function
function findAll(
  filter: string,
  limit: number
): Promise<Array<Person>> */

Type-safe and secure data access to Java endpoints

Vaadin Fusion uses asynchronous, type-safe endpoints to communicate with the backend. The framework generates TypeScript interfaces for all Java data types, so you have full-stack type checking. You can access the backend by simply calling the generated functions.

hello-world.ts typescript
import { allGreetings } 
  from "../../generated/GreetingEndpoint";

@internalProperty()
private greetings: String[] = [];

async firstUpdated() {
  this.greetings = await allGreetings();
}

render() {
  const items = this.greetings.map(
    item => html`<li>${item}</li>`);
  return html`
    <ul>
      ${items}
    </ul>
  `;
}

Get started with Fusion

Create your first app project in seconds with our online starter tool or follow our quick start guide.

Get started

Form binding simplified

Fusion comes with a library for binding form 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

Fusion includes a modern 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 any endpoint method. You can utilize servlet container-based security, third-party libraries, or session-based solutions.

Supports server-side Java views

Flow and Fusion are 100% interoperable. You can, for instance, extend existing server-side Vaadin Flow applications with offline functionality by writing client-side Fusion views.

Productivity with Spring Boot

Vaadin Fusion enhances productivity by seamlessly integrating with Spring Boot, the industry standard for building fast and secure enterprise Java apps. In addition, Maven and webpack are preconfigured to work together, while Live Reload helps you focus on development.

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.

Building your first Fusion app

Learn to build a full-stack web application with a Spring Boot Java backend and a TypeScript based LitElement frontend using the open-source Vaadin Fusion framework.