Vaadin 24.4: Introducing the code-first AI-powered UI editor and React seamlessly integrated into the Vaadin platform
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.6

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<Contact> 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
                          @BrowserCallable
                            @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.
Vaadin copilot

Code-First UI Building

Seamlessly integrate visual editing and coding with AI assistance for Vaadin projects. Changes made with Copilot appear instantly in your IDE, keeping your codebase as the source of truth.

Accelerated Development
Advanced visual editing tools, AI-powered features, and seamless integration with your IDE make UI development faster and more intuitive.
Intuitive UI Building
Drag and drop components, rearrange layouts, and change captions and labels directly within the application you are building.
Smart AI Assistance
Ask your AI assistant to handle tedious tasks, generate mock data, or create the first draft of a new feature.

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.