Docs

Documentation versions (currently viewingVaadin 24)

Visual View Builder

Visual View Builder enables you to create new views with custom layouts and components without touching code.
Warning
Partially Outdated
This page is partially outdated and doesn’t reflect the current state of editable views in Vaadin Start.

Visual View Builder is a tool in the Vaadin Start application generator. It allows you to assemble custom views by dragging and dropping items into place. When you’re done, you can download and run the application locally or share it with others so they can customize it further.

Visual View Builder generates the required code declarations, configurations, and sample data for your application.

Tip
Theming & Other Features
Visual View Builder is part of Vaadin Start. You can customize the application theme, settings (e.g., Java version), and more before downloading or sharing the application.

Creating a Custom View

Go to https://start.vaadin.com and log in to get started. Select the VIEWS tab, click + Add View, and choose Visual View Builder from the drop-down menu. This opens View Builder.

View Builder in Vaadin Start.

Choosing a Template

Choose one of the four layout templates and add an optional header or footer — or both. You can see how this looks in the previous screenshot. After selecting a template, click Start building to proceed to content and actions.

You can edit the layout later, such as adding a margin, by clicking it once it’s in the view.

Building a View

Drag items from the menu in the toolbar to the view (see the margin in the screenshot here). You can place content and add containers with some pre-made components.

Custom View with Components

Creating a Layout

If you want to place items in a row, for example, you can do so by dragging a Horizontal Layout component from the toolbar on the side and then add items to it. Click on the items to expand them so as to fill the space in the layout.

Do the same instead with a Vertical Layout if you want the items arranged from top-to-bottom.

Deleting Items

If you’re unhappy with an item or its placement, you can delete it by clicking the item in the view and selecting the trash can icon, as shown in the screenshot here:

Location of Delete Button: Circled in Red

Publishing & Sharing

Once you’re ready, you can share the project with others either by copying the link to it and giving it to them, or by creating a GitHub repository for it. Click Share…​ to do so. You can see these options in the screenshot here:

view builder share
Note
Sharing in Preview
Sharing views is a preview feature. Give it a try. If you encounter a bug, though, file an issue by clicking the Submit feedback button in the bottom right-hand corner of the screen.

Downloading the Project

When you’re done with Visual View Builder and ready to generate the application, click Download in the bottom right-hand corner of the screen. Incidentally, you can add as many views as you want before downloading the project.

b9ce6c1a-050b-11ee-be56-0242ac120002