User interface components
for web apps

UI components
for web apps

Build your apps in
the language you ♥ Java Scala Groovy Java EE Spring GWT
See more
Build your web UIs in HTML or Java

Vaadin Framework

Apache License 2.0

Vaadin Framework lets you build single page web apps in server-side Java or any other JVM language. All of the browser–server communication and DTOs are automated for you. Your app's state resides on the server, but your end-users use an HTML5 web app in their browsers.

#1 single-page web framework for Java developers The 2014 Decision Maker's Guide to Java Web Frameworks
Web UIs in server-side Java

// All of this code is running in your server's JVM
// Create a TextField input.
TextField name = new TextField("Your Name", "Vaadin");

// Access any server-side API directly.
ServletContext servletContext = VaadinServlet
String serverName = servletContext.getServerInfo();

// Create a Button and define a server-side click listener.
Button greetButton = new Button("Greet the Server");
greetButton.addClickListener(event ->"Hello " + name.getValue() + "!\n" +
                          "I'm " + serverName));

// Display TextField and Button vertically.
VerticalLayout layout = new VerticalLayout(name, greetButton);
Show code
Powerful components

// List of entities from any Java backend (EJB/JPA/Spring/etc).
List<Person> personList = backendService.getAllPersons();

// Create a Grid and data-bind the Person objects.
Grid grid = new Grid();
        new BeanItemContainer<Person>(Person.class, personList));

// Define which columns to be displayed.
grid.setColumnOrder("firstName", "lastName", "email");
Show code
Layouting in Java or markup

public class PersonForm extends FormLayout {
    // Define the input fields for data.
    TextField firstName = new TextField("First name");
    TextField lastName = new TextField("Last name");
    TextField email = new TextField("Email");
    DateField birthday = new DateField("Birthday");

    public PersonForm() {
        addComponents(firstName, lastName, email, birthday);

// Create a PersonForm and bind form fields to a person bean.
PersonForm form = new PersonForm();
BeanFieldGroup.bindFieldsUnbuffered(personBean, form);

    <v-text-field _id="firstName" caption="First name" />
    <v-text-field _id="lastName" caption="Last name" />
    <v-text-field _id="email" caption="Email" />
    <v-date-field _id="birthday" caption="Birthday" />
Show code
Build your first full app in minutes.
In the blog
Vaadin opens an office in Berlin

by Tanja Repo 09/01/15 10:00 AM

Community Spotlight - August 2015

by Matti Tahvonen 08/26/15 9:14 AM

Jar packaged web apps with WildFly Swarm

by Matti Tahvonen 08/19/15 9:50 AM

On Twitter
TechWars @TechWars_io / 56 minutes ago

We compared #bootstrap vs #vaadin - see results:

Elijah Motornyy @el_mot / 4 hours ago

Tuesday. #vaadin #biketowork challenge accepted