demo.vaadin.comVaadin - The best Java framework for Progressive Web Apps

\n \x3C/marked-element \n \x3C/div \n \x3Cdiv class=\"code-example-interface\" \n \x3Cslot name=\"java-demo-slot-1\" \x3C/slot \n \x3C/div \n \x3C/div \n \x3Cdiv class=\"code-example-container\" selected$=\"[[isEqual(selectedTab, '2')]]\" \n \x3Cdiv class=\"title-flex-container\" \n \x3Ch3 Web Components\x3C/h3 \n \x3Cp Feature-rich components allow you to build a powerful user interface with just a few lines of code. All components are mobile first, touch-enabled, but also work great on desktop for the most data-intensive applications. Components are tested with keyboard and screen readers on all modern browsers, keeping accessibility in mind on your behalf.\x3C/p \n \x3Cp \x3Ca href=\"/components\" class=\"button\" router-link Browse components\x3C/a \x3C/p \n \x3C/div \n \x3Cdiv class=\"main-row--code\" \n \x3Cvc-extended-marked-element class=\"main-row--code\" full-source=\"https://cdn2.hubspot.net/hubfs/1840687/Pages/index/web-components-full.md\" preview-source=\"https://cdn2.hubspot.net/hubfs/1840687/Pages/index/web-components.md\" \x3C/vc-extended-marked-element \n \x3C/div \n \x3Cdiv class=\"code-example-interface\" \n \x3Cslot name=\"java-demo-slot-2\" \x3C/slot \n \x3C/div \n \x3C/div \n \x3Cdiv class=\"code-example-container\" selected$=\"[[isEqual(selectedTab, '3')]]\" \n \x3Cdiv class=\"title-flex-container\" \n \x3Ch3 Data binding\x3C/h3 \n \x3Cp Vaadin's data binding API makes creating forms a breeze. Bi-directional client-server communication and data synchronization are completely automatic and secure. The data binding API supports Java Bean Validation, custom validators, and data conversion.\x3C/p \n \x3C/div \n \x3Cdiv class=\"main-row--code\" \n \x3Cvc-extended-marked-element class=\"main-row--code\" full-source=\"https://cdn2.hubspot.net/hubfs/1840687/Pages/index/data-binding-full.md\" preview-source=\"https://cdn2.hubspot.net/hubfs/1840687/Pages/index/data-binding.md\" \x3C/vc-extended-marked-element \n \x3C/div \n \x3Cdiv class=\"code-example-interface\" \n \x3Cslot name=\"java-demo-slot-3\" \x3C/slot \n \x3C/div \n \x3C/div \n \x3C/div \n \x3C/div \n \x3Cdiv class=\"code-example--switch-buttons-container\" \n \x3Cdiv class=\"code-example--switch-button\" id=\"code-example-left-button\" on-click=\"_prev\" disabled \n \x3Ciron-icon icon=\"vc-icons:caret-left\" class=\"icon-arrow-down\" \x3C/iron-icon \n \x3C/div \n \x3Cdiv class=\"code-example--switch-button\" id=\"code-example-right-button\" on-click=\"_next\" \n \x3Ciron-icon icon=\"vc-icons:caret-right\" class=\"icon-arrow-down\" \x3C/iron-icon \n \x3C/div \n \x3C/div \n \x3C/div \n \x3Cstyle cms-keep \n \n .code-examples .code-example-container[selected] {\n opacity: 1;\n transition: opacity .2s ease-in;\n }\n\n .code-examples .code-example-container {\n transition: opacity .0s;\n }\n\n .code-examples .code-example-container:not(:first-child)[selected] {\n position: absolute;\n }\n\x3C/style \n \x3C/div \n \x3Cdiv id=\"hs_cos_wrapper_widget_1572965091830\" class=\"hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module\" style=\"\" data-hs-cos-general-type=\"widget\" data-hs-cos-type=\"module\" \n \x3Cdiv class=\"features-container container-padding--small \" \n \x3Cdiv class=\"features-module\" \n \x3Ciron-icon icon=\"vc-product-icons:components\" class=\"features-icon\" \x3C/iron-icon \n \x3Cdiv class=\"features-text\" \n \x3Ch5 style=\"text-align: left;\" \x3Cspan Best-in-class components\x3C/span \x3C/h5 \n \x3Cp class=\"no-margin\" \x3Cspan Delight your users with a beautiful and consistent experience based on the web component standard. Build your design system on the comprehensive set of components that are tested for mobile and desktop with special attention to accessibility.\x3C/span \x3C/p \n \x3C/div \n \x3C/div \n \x3Cdiv class=\"features-module\" \n \x3Ciron-icon icon=\"vc-icons:java-icon\" class=\"features-icon\" \x3C/iron-icon \n \x3Cdiv class=\"features-text\" \n \x3Ch5 style=\"text-align: left;\" \x3Cspan Uniquely integrated with Java\x3C/span \x3C/h5 \n \x3Cp class=\"no-margin\" Spend your time where it matters most - delivering value to your users. Integrated from web browser to Java server, Vaadin enables you to build the application in Java, speeding up development and empowering your team to own the project end-to-end.\x3C/p \n \x3C/div \n \x3C/div \n \x3Cdiv class=\"features-module\" \n \x3Ciron-icon icon=\"vc-icons:code-icon\" class=\"features-icon\" \x3C/iron-icon \n \x3Cdiv class=\"features-text\" \n \x3Ch5 style=\"text-align: left;\" \x3Cspan Write once, run everywhere\x3C/span \x3C/h5 \n \x3Cp class=\"no-margin\" Deliver your app on all devices from mobile to tablet and desktop with a single code base. Whether used from web browser or installed on your device, your users always get the latest version. By writing and maintaining the app only once, you will deliver value to your users faster.\x3C/p \n \x3C/div \n \x3C/div \n \x3C/div \n \x3Cstyle cms-keep \n .features-container {\n display: flex;\n }\n\n .features-container .features-module {\n margin-top: 1rem;\n margin-left: 1.5rem;\n position: relative;\n overflow: hidden;\n display: flex;\n flex: 1;\n flex-direction: column;\n }\n\n .features-container.centered .features-module {\n align-items: center;\n }\n\n @media (max-width: 768px) {\n .features-container {\n flex-direction: column;\n }\n\n .features-container .features-module {\n overflow: unset;\n margin-left: 0;\n margin-top: 0;\n margin-bottom: 2rem;\n }\n }\n \n .features-icon {\n\t\tmax-height: 47px;\n\t\tmax-width: 65px;\n\t\theight: 100%;\n\t\tmargin-bottom: 1.5rem;\n\t\twidth: 100%;\n\t}\n\n\t.features-text {\n\t\twidth: 90%;\n\t}\n\n\t.features-text h5 {\n\t\tmargin-top: 0;\n\t}\n \n .features-text p {\n margin: 0;\n }\n\x3C/style \n \x3C/div \n \x3Cdiv id=\"hs_cos_wrapper_widget_1572525682209\" class=\"hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module\" style=\"\" data-hs-cos-general-type=\"widget\" data-hs-cos-type=\"module\" \n \x3Cdiv class=\"horizontal-content \" \n \x3Ca href=\"/start\" class=\"button button--filled\" router-link Get started \x3C/a \n \x3Ca href=\"/features\" class=\"button \" router-link Explore all features \x3C/a \n \x3C/div \n \x3Cstyle cms-keep \n .horizontal-content {\n text-align: center;\n display: block;\n }\n \n .horizontal-content * {\n display: inline-block;\n }\n\n .horizontal-content *:not(:first-child) {\n \tmargin-left: 1.5rem;\n }\n \n @media (max-width: 768px) {\n .horizontal-content * {\n display: block;\n }\n .horizontal-content *:not(:first-child) {\n margin-left: 0;\n }\n }\n \x3C/style \n \x3C/div \n \x3Cdiv id=\"hs_cos_wrapper_widget_1572524023099\" class=\"hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module\" style=\"\" data-hs-cos-general-type=\"widget\" data-hs-cos-type=\"module\" \x3C/div \x3C/span \n \x3C/div \n\x3C/section \n\x3Cstyle cms-keep \n .alloy-section {\n background-color: var(--color-alloy);\n }\n\x3C/style \n\x3Csection class=\"dark-section container-padding--medium \" \n \x3Cdiv class=\"container-fluid\" \n \x3Cdiv \n \x3C/div \n \x3Cdiv id=\"hs_cos_wrapper_widget_1572524043850\" class=\"hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_module\" style=\"\" data-hs-cos-general-type=\"widget\" data-hs-cos-type=\"module\" \n \x3Cdiv class=\"container-padding--small container-narrow text-center\" \n \x3Cplastic-image fade preload lazy-load srcset=\"https://cdn2.hubspot.net/hubfs/1840687/Pages/index/sustainable-os-icon.svg\" alt=\"\" style=\"display: inline-block;\" \x3C/plastic-image \n \x3Ch2 Sustainable Open Source\x3C/h2 \n \x3Cp The core of Vaadin is free and open source. You can build anything on it without limitations. Behind the product is a 150 person team that is solely focused on helping you accelerate development with Vaadin. With the commercial components, tools and support, we fund the free Vaadin for everyone.\x3C/p \n \x3C/div \n \x3C/div \n \x3Cdiv id=\"hs_cos_wrapper_widget_1572966002701\" class=\"hs_cos_wrappe...