vaadin.comVaadin | The Web App Platform for Java

Platform Flow Framework Java backend & Java UI Hilla Framework Full-stack React for Java Acceleration Kits Faster development Modernization Toolkit Modernize old apps UI Components 45+ UI components Designer Visual UI builder TestBench Automated UI tests Get started Read Vaadin quick start tutorial to get started. Try Vaadin Pro Evaluate the full power of Vaadin with Pro. Solutions Use cases App creation App modernization Migration from Swing Design Systems Creation Our services Vaadin support Design services Expert services Migration assistance Technical Success Manager Modernize your app Let us help modernize your legacy app. Customer stories Read how Vaadin helped these companies. Company About Careers Leadership Brand Whistleblowing Developers Developer portal Documentation Vaadin Start Add-on Directory Training videos Cookbook API docs Community Forum Resources Blog Enterprise Java Report Events & Webinars Customer stories White papers Platform FAQ Upgrade from V8 Framework comparison Pricing Contact us Get started Contact us Get started 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. Create a New App Built for Business Latest: 24.3.12 Two ways of coding the UI Java React 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 ([]); 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 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. Based on web standards Accessible Themable Figma library Java and Typescript APIs Design systems 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. 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. Easy theming through a set of global CSS properties. Additionally, a powerful CSS injection mechanism is available for advanced custom styling. The high quality, high fidelity Figma library...