html:<style include="styles-micro-styles"></style>
<style include="releases-styles"></style>
<style include="prism-styles"></style>
<style include="plastic-image-styles"></style>
<prism-highlighter></prism-highlighter>
<div class="releases-page-view container container-fluid">
<div class="details-section">
<div class="header-menu-container">
<div class="releases-header">
<releases-top></releases-top>
</div>
</div>
<section class="latest-release">
<h4>Latest stable</h4>
<h2 class="latest-release-version">
Vaadin 13
</h2>
<p class="">Here are the highlighted new and improved features in Vaadin 13. The rest of the bug fixes and
improvements you can check from the full release notes.</p>
<a href="https://github.com/vaadin/platform/releases/tag/[[platform.latest.tagName]]" target="_blank" rel="noreferrer noopener" class="full-changelog button button--noline button--small">
<iron-icon icon="vc-icons:github"></iron-icon>
<span>See full release notes</span>
</a>
<p>To update to this release follow the <a href="/releases/vaadin-13#update-instructions" router-link>update
instructions</a>. To start from a fresh project, we recommend using a <a href="/start/latest" router-link>starter</a>.</p>
<div class="intro-video"></div>
</section>
<section class="highlights">
<div class="release-highlights">
<h3 class="no-margin">Highlighted new and updated features</h3>
<div class="row highlights-toc">
<div class="col-md-6 components highlights-section">
<h4>Data entry components</h4>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#custom-field" router-link>Custom Field</a>
</li>
<li>
<a href="/releases/vaadin-13#email-field" router-link>Email field</a>
</li>
<li>
<a href="/releases/vaadin-13#number-field" router-link>Number Field</a>
</li>
<li>
<a href="/releases/vaadin-13#text-field-clear" router-link>Text Field clear button</a>
</li>
<li>
<a href="/releases/vaadin-13#text-field-autoselect" router-link>Text Field autoselect</a>
</li>
<li>
<a href="/releases/vaadin-13#time-picker" router-link>Time Picker</a>
</li>
<li>
<a href="/releases/vaadin-13#select" router-link>Select</a>
</li>
<li>
<a href="/releases/vaadin-13#grid-pro" router-link>Grid Pro (commercial)</a>
</li>
<li>
<a href="/releases/vaadin-13#rich-text-editor" router-link>Rich Text Editor (commercial)</a>
</li>
</ul>
<h4 class="spacing">Layout components</h4>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#accordion" router-link>Accordion</a>
</li>
<li>
<a href="/releases/vaadin-13#details" router-link>Details</a>
</li>
<li>
<a href="/releases/vaadin-13#login" router-link>Login</a>
</li>
</ul>
</div>
<div class="col-md-6 components highlights-section">
<h4>Interaction components</h4>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#grid-event-context" router-link>Grid event context API</a>
</li>
<li>
<a href="/releases/vaadin-13#nested-context-menu" router-link>Nested context menu</a>
</li>
</ul>
</div>
<div class="col-md-6 flow highlights-section">
<h4>Java only features</h4>
<p></p>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#shortcuts-api" router-link>Keyboard shortcuts API</a>
</li>
<li>
<a href="/releases/vaadin-13#dynamic-routes" router-link>Dynamic registering of routes</a>
</li>
</ul>
</div>
<div class="col-md-6 themes highlights-section">
<h4>Themes and styling</h4>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#compact-theme" router-link>Lumo compact mode</a>
</li>
</ul>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#grid-class-name-generator" router-link>Grid class name generator</a>
</li>
</ul>
<ul class="highlights">
<li>
<a href="/releases/vaadin-13#designer-theme-selector" router-link>Improved theme selector in Designer
(commercial)</a>
</li>
</ul>
</div>
</div>
<section class="highlights-details-section components">
<h3>Data entry components</h3>
<ul class="highlights-details">
<li>
<h5 class="name" id="custom-field">
Custom Field
</h5>
<p class="description">Custom field is a component that can wrap a set of any other components as a single
composite field. The component provides commonly needed `label` and `error-message` features, and the
`required` and `invalid` properties.</p>
<div class="image big-image-container">
<plastic-aspect-ratio aspect-width="846" aspect-height="500">
<plastic-image preload fade lazy-load use-element-dim srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/custom-field.png" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/custom-field.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="email-field">
Email Field
</h5>
<p class="description">Email field is a Text Field component extension that expects its value to be a valid
email address. It also enables the specialized UI controls for typing an email address on mobile devices.</p>
<div class="image big-image-container">
<plastic-aspect-ratio aspect-width="746" aspect-height="850">
<plastic-image preload fade lazy-load use-element-dim srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/email-field.png" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/email-field.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="number-field">
Number Field
</h5>
<p class="description">The number field component is an extension of the text field that allows numeric value
input and enables the dedicated UI controls for it on mobile. The component can be decorated with
decrease/increase buttons for updating the value in steps.</p>
<div class="image big-image-container">
<plastic-aspect-ratio aspect-width="750" aspect-height="750">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/number-field.png" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/number-field.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="text-field-clear">
Text Field clear
</h5>
<p class="description">Text field now has a built-in clear button that can be enabled with a flag. When the
feature is in use, a clear button is displayed on the right-hand side of the text field when there’s text in
it. Clicking the button clears the value. The feature also works with other text field -family components
like password field and text area.</p>
<div class="image big-image-container">
<plastic-aspect-ratio aspect-width="460" aspect-height="270">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/tf-clear.gif" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/text-field-clear-button.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="text-field-autoselect">
Text Field autoselect
</h5>
<p class="description">Setting the autoselect flag on will select the input text of the field, whenever it
gets focused. The feature also works with other text field -family components like password field and text
area.</p>
<div class="image big-image-container">
<plastic-aspect-ratio aspect-width="460" aspect-height="270">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/tf-autoselect.gif" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/text-field-autoselect.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="time-picker">
Time Picker
</h5>
<p class="description">Time Picker now has a Java API for using it from server side with Flow.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/time-picker-java.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="select">
Select
</h5>
<p class="description">The Select component is a simple dropdown and a more lightweight alternative to
ComboBox. It was previously available as a Web Component, but now it also has a Java API.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/select-java.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="grid-pro">
Grid Pro
<a href="/pricing" router-link><span class="product-tag">Pro</span></a>
</h5>
<p class="description">Grid Pro is a Grid extension with additional high level functionality. The first
release brings in a new column type specialised for inline data editing. All the existing Grid features work
with Grid Pro also.</p>
<div class="image">
<plastic-aspect-ratio aspect-width="1864" aspect-height="848">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/gp.gif" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/grid-pro.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="rich-text-editor">
Rich Text Editor
<a href="/pricing" router-link><span class="product-tag">Pro</span></a>
</h5>
<p class="description">Rich Text Editor is a text input component that accepts formatted text as input /
output and supports viewing and editing the text with specialized UI controls.</p>
<p class="description">The component's value can be accessed either as
<a href="https://github.com/quilljs/delta/">Delta</a> (read/write) or HTML (read).</p>
<div class="image">
<plastic-aspect-ratio aspect-width="1866" aspect-height="918">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/rte.gif" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/rich-text-editor.md">
</script>
</marked-element>
</div>
</li>
</ul>
</section>
<section class="highlights-details-section components">
<h3>Layout components</h3>
<ul class="highlights-details">
<li>
<h5 class="name" id="accordion">
Accordion
</h5>
<p class="description">Accordion is a component that wraps a vertically stacked set of panels that can be
individually expanded.</p><p>
</p><div class="image">
<plastic-aspect-ratio aspect-width="1800" aspect-height="300">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/accordion.png" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/accordion.md">
</script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="details">
Details
</h5>
<p class="description">A component to show more content when the user requests it, usually by clicking the
panel header to reveal more content below it.</p>
<div class="image big-image-container">
<plastic-aspect-ratio aspect-width="640" aspect-height="200">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/details.png" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/details.md">
</script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="login">
Login
</h5>
<p class="description">A component to show a login screen having a username and a password field. You can
either use the full page Login Overlay with minimal needed configuration or create a more customized
experience with Login Form component. Login component works with password managers.</p>
<div class="image">
<plastic-aspect-ratio aspect-width="600" aspect-height="350">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/vaadin-login.gif" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
</li>
</ul>
</section>
<section class="highlights-details-section components">
<ul class="highlights-details">
<li>
<h5 class="name" id="grid-event-context">
Grid event context API
</h5>
<p class="description">This new client side API allows obtaining contextual information (such as the column or
the item) about any type of an event that occurs inside the grid.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/grid-event-context-api.md">
</script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="nested-context-menu">
Nested context menu
</h5>
<p class="description">Context menu now supports hierarchical/nested menu items that expand as sub-menus on
mouseover or keyboard navigation. The menu items can be marked as checked or disabled and dividers can be
added in between the items.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/nested-context-menu.md">
</script>
</marked-element>
</div>
</li>
</ul>
</section>
<section class="highlights-details-section flow">
<h3>Java only features</h3>
<ul class="highlights-details">
<li>
<h5 class="name" id="shortcuts-api">
Keyboard shortcuts API
</h5>
<p class="description">New API in Flow allows you to easily assign keyboard shortcuts in Java for your
application to improve the end user experience.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/keyboard-shortcuts.md">
</script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="dynamic-routes">
Dynamic registering of routes
</h5>
<p class="description">Now it is possible to register routes dynamically while the Flow application is
running. You can register routes for all users e.g. on application startup, or just for particular user e.g.
based on access rights.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/dynamic-route-registration.md">
</script>
</marked-element>
</div>
</li>
</ul>
</section>
<section class="highlights-details-section themes">
<h3>Themes and styling</h3>
<ul class="highlights-details">
<li>
<h5 class="name" id="compact-theme">
Lumo compact preset
</h5>
<p class="description">The compact theme/preset defines values for the sizing and spacing properties to reduce
the visual space required by components to better fit a large amount of content on the screen. It’s a
Lumo-only feature and can be enabled by importing the preset file to the application.</p>
<div class="image">
<plastic-aspect-ratio aspect-width="3172" aspect-height="1816">
<plastic-image preload fade lazy-load srcset="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/compact.gif" alt=""></plastic-image>
</plastic-aspect-ratio>
</div>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/compact-theme.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="grid-class-name-generator">
Grid class name generator
</h5>
<p class="description">Grid's new class name generators allow generating CSS class names for grid cells based
on their row and column. This feature together with the themable mixing API leverages styling grid cells to
the next level.</p>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/grid-class-name-generator.md"></script>
</marked-element>
</div>
</li>
<li>
<h5 class="name" id="designer-theme-selector">
Improved theme selector in Designer
<a href="/pricing" router-link><span class="product-tag">Pro</span></a>
</h5>
<p class="description">The theme switcher in Designer received some improvements. The dark palette variants
for Lumo and Material are now available. You can disable auto-import of styles and the theme settings are now
stored into the project.</p>
<div class="video">
<video controls muted>
<source src="https://vaadin.com/download/videos/releases/v13/designer-theming.mp4" type="video/mp4">
Sorry, your browser doesn't support embedded videos.
</video>
</div>
</li>
</ul>
</section>
</div>
</section>
<section class="updates">
<div class="update-instructions">
<h2 class="header" id="update-instructions">Update Instructions</h2>
<div class="code-snippet">
<marked-element>
<div slot="markdown-html"></div>
<script type="text/markdown" src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/update-instructions.md"></script>
</marked-element>
</div>
<p><strong>For users of Vaadin 10 or later, updating the version number in the vaadin-bom is enough.</strong>
This release introduced a few breaking changes from Vaadin 12.</p>
<ul>
<li>Flow Spring integration (<a href="https://github.com/vaadin/spring/releases/tag/11.0.0">release notes</a>)</li>
<li>Context Menu Java API (<a href="https://github.com/vaadin/vaadin-context-menu-flow/releases/tag/2.0.0">release
notes</a>)</li>
<li>Grid Java API (<a href="https://github.com/vaadin/vaadin-grid-flow/releases/tag/3.0.0">release notes</a>)</li>
</ul>
<p>Notice, that a few breaking changes were introduced in <a rel="noreferrer noopener" href="https://github.com/vaadin/vaadin-combo-box-flow/releases/tag/2.0.0">vaadin-combo-box</a>
in Vaadin 12.</p>
</div>
</section>
<section class="compatibility">
<div class="browsers">
<h3>Browser Compatibility</h3>
<div class="compatibility-table">
<div class="compatibility-table-column">
<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/ie.svg" alt="">
<span>IE11</span>
</div>
<div class="compatibility-table-column">
<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/edge.svg" alt="">
<span>Edge</span>
</div>
<div class="compatibility-table-column">
<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/mozilla.svg" alt="">
<span>Firefox</span>
</div>
<div class="compatibility-table-column">
<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/chrome.svg" alt="">
<span>Chrome</span>
</div>
<div class="compatibility-table-column">
<img src="https://cdn2.hubspot.net/hubfs/1840687/Pages/releases/vaadin-13/safari.svg" alt="">
<span>Safari</span>
</div>
</div>
</div>
<div class="java">
<h3 class="java-header">Java Compatibility</h3>
<span>Java 8 and newer</span>
</div>
</section>
</div>
<div class="sidebar">
<releases-side-menu></releases-side-menu>
</div>
</div>