Vaadin has always been a bit different.
Yes, it's a Java framework. Yes, it’s great for building modern web UIs. But if you’ve ever used Vaadin seriously, you’ve probably noticed something that sets it apart: its component architecture.
Whether you're using a ready-made component from the official library, building your own from scratch, or integrating a 3rd-party NPM package, all Vaadin components follow a consistent maintainable structure that bridges the server and the client and can evolve along with your application.
Not just widgets
There are lots of UI libraries out there. React has its components. Lit has web components. Bootstrap has... buttons.
Vaadin? It’s not just about visuals. It is not uncommon that Vaadin application and components are developed and maintained for many years. That is by design and is part of the Vaadin ideology.
With Vaadin the UI components can live entirely on the server, fully on the client, or anywhere in between. That flexibility is the superpower.
To better understand what and how, let’s go through the main types of components Vaadin has and and you can also build with Vaadin.
Server-only components
This is the most "Vaadin-native" approach. You’re writing pure Java. No HTML templates. No JavaScript. Just composing UI dynamically from existing Vaadin components (like TextField, Button, Grid, etc.) and building higher-level features—think “InvoiceEditor” rather than just “Form”.
Great for back-office UIs, internal tools, and anything where control and validation matter more than animations and visual finesse.
Pros:
- Full user input validation on the server
- No need to write or maintain any front-end code
- Dynamic UI generation on the fly
- Easy to hook into existing Java libraries and logic
Cons:
- All interactions round-trip to the server
- Not ideal for things like animations or drag-and-drop interactions
Want to create your own? Use this add-on project template
Client-server components
Here’s where things get exciting.
This type of component combines a custom client-side element (written in Lit, TypeScript, or plain Web Components) with a Vaadin Java API on the server. You get the best of both worlds: smooth UX and secure logic.
Want to build a date picker that works exactly how your users expect—right down to keyboard shortcuts and color transitions—but still ensure the selected date is validated against backend rules? This is your pattern.
Pros:
- Full DOM access and rich interactions
- Server-side Java validation and logic
- Clean separation of concerns, with communication handled by the framework
Cons:
- Requires knowledge of both client-side and server-side tech (TypeScript + Java)
Want to create your own? Use this add-on project template
Wrapping third-party custom elements
Sometimes, you don’t want to build it yourself. Fair enough.
In 2025, the web is full of amazing custom elements you can install with npm and drop into your app. Vaadin makes it easy to wrap these into reusable components—with a little TypeScript glue—and expose them to your Java UI.
Pros:
- Rapidly integrate NPM-based components into your Java app
- Minimal boilerplate to get started
- Great for visual enhancements or non-critical UX features
Cons:
- Server-side validation is still your responsibility
- Some components may not blend perfectly with the Vaadin design system
Want to create your own? Use this add-on project template
Choosing the right model
Which one should I use? Each type of Vaadin component has its place. The idea is not to pick just one and stick with it—it’s to use the best tool for the job:
- Server-only components for secure, logic-heavy forms and flows
- Client-server components for interactive, UX-rich widgets
- NPM-wrapped components for integrating modern web UIs quickly
The beauty of Vaadin is that these all coexist in the same app. You don’t need to compromise. You can treat your UI as a tree of components, each doing what it does best—on the server or the client. Your application integrates them on logical level: button is still fundamentally a button regardless of it's implementation.
The real magic behind Vaadin components isn't about whether they look nice or use Java or TypeScript. It’s the flexibility and maintainability. You can build UIs in Java, TypeScript, or both. You choose where the logic lives. You validate securely and integrate freely.
Most importantly, you don’t have to rewrite your app just to take advantage of something new. The component model is built for real-world apps that evolve over time.
--
Have you explored the different component types in your app? What kind of hybrid approach have you found most useful?
Top comments (2)
Awesome overview. Anyone want to co-create a small open-source starter that shows all three patterns side by side (server-only, client–server, NPM-wrapped) with shared validation and tests? I'm happy to bootstrap the repo and set up CI—drop a comment if you're in.
Absolutely. We have them as separate project, but perhaps having a single one multi-module Maven project makes sense.