Vaadin 24.4 integrates with React, unifies Flow and Hilla development, and more!
Vaadin | The Web App Platform for Java
Vaadin Reindeer

The Web App Platform for Java Developers

Business apps shouldn't suck. With Vaadin you can craft stunning full-stack web apps at lightning speed. Scaling from hobby projects to enterprise.

Latest:
24.4.2

Two ways of coding the UI

Flow: The most productive way is 100% Java

Hilla: Full-stack React framework for Java

My Leads
Spring Boot
UI
                        
                          @Route("contacts")
                          public class ContactsView extends VerticalLayout {
                              public ContactsView(ContactService contactService) {
                                  var grid = new Grid<>(Contact.class);
                                  grid.setItems(contactService.getContacts());
                                  
                                  grid.addComponentColumn(contact ->
                                      new Image(contact.getPictureUrl(), contact.getName())).setAutoWidth(true);
                                  grid.addColumn(Contact::getName).setHeader("Name").setAutoWidth(true);
                                  grid.addColumn(Contact::getCompany).setHeader("Company").setAutoWidth(true);
                          
                                  grid.addComponentColumn(contact ->
                                      new DatePicker(contact.getLastContacted(), e ->
                                          Notification.show(contact.getName() + " updated: " + e.getValue())
                                  )).setHeader("Last Contacted").setAutoWidth(true);
                              }
                          }
                        
                      
Services
                        
                          @Service
                          public class ContactService {
                              private final ContactRepository contactRepository;
                          
                              public ContactService(ContactRepository contactRepository) {
                                  this.contactRepository = contactRepository;
                              }
                          
                              public List
                  
                  
                   
                    getContacts() {
                                  return contactRepository.findAll();
                              }
                          }
                        
                  
                  
                      
Data
                        
                          @Entity
                          public final class Contact {
                              @Id
                              @GeneratedValue
                              private Long id;
                              private String name;
                              private String company;
                              private LocalDate lastContacted;
                              private String pictureUrl;
                          
                              // Constructor, getters and setters
                          }
                        
                      
UI
                        
                          export default function ContactsView() {
                            const contacts = useSignal<Contact[]>([]);
                            useEffect(() => {
                                ContactService.getContacts().then(newContacts =>
                                   contacts.value = newContacts
                                );
                            }, []);
                        
                            return (
                              <Grid items={contacts.value}>
                                 <GridColumn autoWidth>
                                        {({item}) => (
                                          <img src={item.pictureUrl} alt={item.name}/>
                                        )}
                                    </GridColumn>
                                    <GridColumn path="name" autoWidth/>
                                    <GridColumn path="company" autoWidth/>
                                    <GridColumn path="lastContacted" autoWidth>
                                        {({item}) => (
                                            <DatePicker value={item.lastContacted} onChange={e =>
                                                Notification.show(`${item.name} updated: ${e.target.value}`)}/>
                                        )}
                                    </GridColumn>
                                    </Grid>
                            );
                        }
                        
                      
Spring Boot
Services
                        
                          @Service
                          public class ContactService {
                          
                            private final ContactRepository contactRepository;

                            public ContactService(ContactRepository contactRepository) {
                              this.contactRepository = contactRepository;
                            }

                            public List<Contact> getContacts() {
                              return contactRepository.findAll();
                            }

                          }
                        
                      
Data
                        
                          @Entity
                          public final class Contact {
                              @Id
                              @GeneratedValue
                              private Long id;
                              private String name;
                              private String company;
                              private String jobTitle;
                              private LocalDate lastContacted;
                              private String pictureUrl;
                          
                              // Constructor, getters and setters
                            }
                        
                      
Fighting for simplicity with end-to-end ownership

Full-stack way of thinking

We believe that a full-stack approach is the most productive way of crafting high-quality applications: A development team should own a feature from the back-end to the front-end, rather than dividing tasks between separate front-end and back-end teams. By avoiding communication barriers, a team can iterate drastically faster - not only shipping faster, but also with better quality.


The chosen software stack should align with this organization structure: reducing complexity through a unified full-stack framework.

PRODUCTIVITY
CONTROL

Flow

Components
Flow
Spring Boot
Vaadin Flow boosts developer productivity for web apps with Spring backends. Write UIs with Vaadin components in 100% Java, no JS or HTML. Vaadin handles rendering, events and comms.

Hilla

Components
React
Hilla
Spring Boot
Vaadin Hilla connects React with a Spring backend, automating comms and generating TypeScript APIs for Java services. It also fully integrates Vaadin's powerful UI components with React.

Next.js

Components
React
Next.js
Node.js
Vaadin suits teams using Java backends, while Next.js is popular for those using TypeScript on Node.js. Next.js enables frontend teams to become full-stack by expanding into backend services.

Decoupled

Components
React or Angular
REST or GraphQL
Backend of choice
A fully decoupled stack requires choosing technologies for each layer. This may be preferred by organizations with separate backend and frontend teams, or when control over layers is limited.
Secure by default
Vaadin secures and automates all communication between the browser and server. Safeguards like automated session keys, input type checking, and server-side validation are on by default. Support for Spring Security and optional SSO simplify building security on all levels of your app.
Batteries included
Vaadin is a complete platform that works out of the box. It includes web frameworks, UI components, a Figma-based design system, and tools for building and testing UIs. It speeds up development and scales easily, ensuring well-tested and integrated dependencies you can build on.
Real-time communication
Vaadin enables real-time communication, pushing UI updates and feeding data-hungry UIs from the backend through websockets and lazy loading. Built-in features allow for functionality like Google Docs-style multiplayer editing, enhancing real-time user collaboration.
Vaadin UI Components

Powerful UI Components are the foundation for a great UX

Accessible , Beautiful, Consistent

Optimize developer productivity by building from a set of feature rich web components built-in to Vaadin. They are optimized for data heavy business applications and include API for both Java or with React.

Based on web standards
Based on the open W3C Web Components standard, ensuring that they work natively in all modern browsers and can be used with virtually any front-end framework.
Accessible
Vaadin components work with screen readers and assistive devices so everyone can use your app. Conforms to the WCAG 2.1 AA standard, and EU and US accessibility regulations.
Themable
Easy theming through a set of global CSS properties. Additionally, a powerful CSS injection mechanism is available for advanced custom styling.
Figma library
The high quality, high fidelity Figma library makes it easy to create mockups and prototypes of Vaadin-based UIs.
Java and Typescript APIs
Use Java APIs with Vaadin Flow, or TypeScript APIs with Hilla and other front-end frameworks.
Design systems
A good base for your own design system, complete with a toolkit for setting up a documentation website.

Built for business

Open Source
Open Source
The core of the product is licensed under permissive Apache 2.0 license. Commercial features are available where we can add value beyond the fully functional core.
First party support
Vaadin is built by a company named Vaadin. Since 2000. Our team has supported thousands of organizations building their applications.
15-year maintenance
Business applications should have a long lifespan. Up to 15 years of support is available for each version. Migrations are supported by automated tooling.

Powering the enterprise

Loved by 100,000+ developers and relied on by some of the largest organizations on the planet. Everything from banks, insurance, health care, to aerospace, and government.
Customer stories

Start building with Vaadin now!

We are here to help you succeed. Our specialists are happy to answer any questions you may have, and our technical documentation includes tutorials and copy-paste code examples on the different Vaadin features.