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
        .getCurrent()
        .getServletContext();
String serverName = servletContext.getServerInfo();

// Create a Button and define a server-side click listener.
Button greetButton = new Button("Greet the Server");
greetButton.addClickListener(event ->
        Notification.show("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();
grid.setContainerDataSource(
        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-form-layout>
    <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" />
</v-form-layout>
Show code
Build your first full app in minutes.
In the blog
Community Spotlight - June 2015

by Matti Tahvonen 06/30/15 4:00 AM

Vaadin Font Icons

by Jarmo Kemppainen 06/29/15 11:00 AM

Vaadin 7.5 released

by Sami Ekblad 06/24/15 6:05 PM

On Twitter
TechWars @TechWars_io / 25 minutes ago

We compared #grails vs #vaadin - see results: http://t.co/1TkzfRxCYt

Maciej Przepióra @maciejprzepiora / 2 hours ago

#Vaadin #Font #Icons – Ponad 500 ładnych, darmowych ikonek do użytku w aplikacjach webowych https://t.co/6wdbWBmXsG