Vaadin Fusion

The modern frontend framework for Java

Vaadin Fusion integrates a Spring Boot Java backend with a reactive TypeScript frontend. It includes all the UI components and tools you need so you can focus on building your app instead of configuring stuff.
Type-safe server access
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.
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

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.

Powered by Spring Boot

Vaadin Fusion uses Spring Boot on the server. Get started quickly and 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 = "Fusion App", shortName = "Fusion", offlineResources = {"images/logo.png"})
public class Application extends SpringBootServletInitializer implements AppShellConfigurator {

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

}

Simple type-safe server communication

Vaadin Fusion helps you access the backend easily with type-safe endpoints.

  • Fusion 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.
    // --- Server ---

@Endpoint
public class TodoEndpoint {
    private TodoRepository repo;

    // Repository autowired by Spring
    public TodoEndpoint(TodoRepository repo) {
        this.repo = repo;
    }

    // Publish a typed endpoint
    public List<Todo> getTodos() {
        return repo.findAll();
    }
}

// --- Client ---

// Call the backend in TypeScript
const todos: Todo[] = await TodoEndpoint.getTodos();

Reactive views with declarative templates

Vaadin Fusion has a reactive programming model based on Lit

  • The declarative template is automatically updated when the application state changes. 
  • Lit uses a simple template syntax based on standard JavaScript.
  • Fusion comes with built-in support for MobX for application state management. 
    
@customElement('hello-world-view')
export class HelloWorldView extends View {
  @state() name = '';
  @state() allNames: string[] = [];

  render() {
    return html`
      <h1>Greetings!</h1>
      <ul>
        ${this.allNames.map((name) => html`<li>Hello, ${name}</li>`)}
        <li>
          <vaadin-text-field
            placeholder="Your name"
            .value=${this.name}
            @value-changed=${this.nameChanged}
          ></vaadin-text-field>
          <vaadin-button @click=${this.addGreeting}>Add name</vaadin-button>
        </li>
      </ul>
    `;
  }

  nameChanged(e: CustomEvent) {
    this.name = e.detail.value;
  }

  addGreeting() {
    this.allNames = [...this.allNames, this.name];
    this.name = '';
  }
}

Components and tools included

Vaadin 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 frontend and backend build tooling. Run the entire app with Maven or Gradle.
Image-content-02@2x
Create a project

Get started with Fusion

Create your first app project in seconds with our online starter tool or follow our quick start guide.
Get started Read tutorial
Powerful forms
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
Vaadin 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.
Live View extension for VS Code
See your changes in real-time without saving and redeploying your app. Available for free on the Visual Studio Marketplace.
Source code on GitHub
Fusion is hosted in a public GitHub repository where you can view, extend and modify the source code and report issues.
Video tutorial

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.

Considering Vaadin for your business?

Book a demo with a Vaadin expert to see how our unmatched stability, commercial tooling and dedicated support services can help your organization deliver better web apps faster.