Vaadin speeds up prototyping and styling for Java applications

Vaadin speeds up prototyping and styling for Java applications Vaadin is the company behind the open-source Vaadin Flow framework for full-stack Java applications and the Hilla framework for hybrid TypeScript/Java applications. Trusted by 40% of Fortune 500 companies and 100.000+ developers worldwide, Vaadin has been helping organizations accelerate the development of web front ends for enterprise Java applications for over 20 years.


Vaadin, a provider of Java web application platforms, today announced the launch of two new low-code solutions for users of the Vaadin Flow framework: Visual View Builder and Visual Theme Editor. These low-code tools bridge the gap between application design and development by making it easy for developers and non-developers to visually prototype and style their applications while generating well-structured code as a basis for further development using the open-source Vaadin Flow framework.   

“The introduction of Vaadin’s new low-code to pro-code tools signifies a significant milestone in empowering cross-functional teams to create compelling business applications more quickly without the lock-in of low-code platforms,” said Kim Weins, head of product at Vaadin.

“These new intuitive visual tools facilitate seamless collaboration between developers, designers, and domain experts—including product managers, product owners, consultants, and business analysts. As you iterate on your application design with your team, Vaadin instantly generates well-structured code at the push of a button allowing developers to enhance the application further.”

The Challenge: Bridging the Design-Development Gap

There is a gap between the design and development phases of creating software applications today. User interfaces are typically designed by domain experts—product owners, product managers, and business analysts—working with UX and UI designers. Designers frequently utilize siloed prototyping and design tools disconnected from the code.

Once designs are handed off to developers, they need to be re-created in code, requiring significant time and effort. In addition, each time the designs are changed, the inefficiencies are multiplied.

The Fusion of Low-Code and Pro-Code: The Best of Both Worlds

While low-code platforms enable non-developers to participate in application creation, the resulting code is often opaque and locked into the low-code vendor’s cloud environment, limiting customization, deployment, and cost optimization options. When building robust, data-heavy business applications,  many organizations require full control over the code and the ability for developers to fine-tune applications to meet specific functional, performance, and operational requirements.

Introducing low-code to pro-code tools provides an optimal solution, enabling the entire application team, including developers and non-developers, to collaboratively design applications while generating high-quality code for further development. This integration reduces the gap between design and development, resulting in enhanced efficiency and productivity.

Introducing Vaadin Visual View Builder

Vaadin Visual View Builder is a Software-as-a-Service (SaaS) low-code prototyping tool that facilitates collaborative application design and instant code generation. The Visual View Builder empowers developers, designers, and product owners to rapidly prototype application views using Vaadin’s robust set of UI components designed specifically for business applications. 

By seamlessly sharing these prototypes with stakeholders and end users, developers can get valuable feedback to ensure engaging user experiences. Well-structured code is automatically generated with a simple click of a button, eliminating the need to manually code the designs. The Visual View Builder, available as a free preview at start.vaadin.com, effectively closes the gap between design and development, streamlining the development journey and simplifying view creation.

Benefits include:

  • Close the gap between design and development: Empower developers and non-developers alike to quickly prototype your application’s views and generate well-structured code with just a button.
  • Seamless collaboration:  Share your prototypes with users and stakeholders to get the feedback you need to create an engaging user experience. 
  • Simplify view creation: Build new views effortlessly by utilizing pre-defined UI patterns and Vaadin components, eliminating the need for manual design and coding. 
  • Customize easily; Save and revisit customized views, allowing for convenient editing and refinement without starting from scratch. 

Visual View Builder documentation

Introducing Vaadin Visual Theme Editor

Vaadin Visual Theme Editor is a low-code solution that empowers developers with in-app UI styling capabilities. With an intuitive user interface, developers can simply click on any user interface component and easily modify colours, fonts, spacing, and other properties of UI elements, getting real-time feedback within their Vaadin Flow applications. 

Benefits include:

  • Speed up styling: Make styling faster and easier for Java developers without the need for tedious and time-consuming CSS editing. Any styling changes made in the Theme editor are reflected in real-time, both in the live preview and code.
  • Gain granular control: Perfect the look and feel of your Vaadin Flow applications by fine-tuning individual UI elements. The Visual Theme Editor will automatically create the necessary CSS selectorsJava classes to ensure well-structured code. 
  • Ensure consistency: Ensure a smooth user experience by quickly modifying a particular component type across your application. Your style sheets will be updated automatically.
  • Get real-time feedback: Instantly see the results of your styling changes in-app and code so you can quickly adjust without lengthy refresh cycles.

Visual Theme Editor documentation

For more information:

Tags: , , , , , , ,

View Comments
Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *