Drag and drop components, rearrange layouts, and update labels—directly in the application you're building. You can edit custom and composite components, and adjust layout parameters like alignment, padding, spacing, and visibility by selecting elements and updating their properties.
Use the Outline to get a clear overview of the UI structure, without extra cruft—no need to do manual code-to-UI mapping. Select any element to highlight it in the UI and jump directly to its source in your IDE.
Use plain language to generate views, add mock data, or scaffold backend services. Copilot can turn screenshots or Figma designs into UI code, create JPA entities with repositories and services, and connect components like Grid or ComboBox to backend data.
Use Copilot in enterprise-scale projects with multiple modules. Navigate and edit across modules without extra setup or limitations. Copilot understands your project structure and how Vaadin applications are built, so it works seamlessly even in complex setups.
Change the look of components, globally or individually, by adjusting properties using this visual tool. Minimize guesswork and the need to hop back and forth between CSS and browser – no need to awkwardly copy and paste from the browser inspector.
Configure components visually by updating text content, layout settings, and custom attributes. The Properties Editor makes adjustments straightforward—even for settings that aren’t editable on the canvas.
Quickly reuse UI components by copying and pasting them directly in the editor. Speeds up layout building and reduces repetitive work.
View all Hilla services in your app along with their security configurations. Ensure proper access control and gain confidence that your UI is secure.
Identify and update outdated Vaadin dependencies directly in your project. Stay current with minimal overhead and no guesswork.
Simplify global app development with automated translations that get you started and built-in support for professional localization workflows. Effortlessly manage and apply translations across your app.
Switch between user accounts to test role-based behavior without logging in and out. Useful for quickly verifying access control and permissions.
Automatically generate test cases to catch regressions before they happen.
Quickly access documentation for any selected component directly from Copilot – no need to hunt through external resources.
Vaadin Copilot is engineered to blend into your development process. When the application is running in development mode, Copilot is ready to spring into action whenever you view the live application. Just a shortcut away whenever you need it, and just as quick to hide when not needed.
At the heart of Vaadin Copilot lies its AI capabilities. Ask our generative AI to modify the UI, explore new design possibilities, and streamline your workflow. Although in its early stages, this feature is set to redefine the boundaries of UI development.
Run your app in development mode and click the dev mode menu button in the bottom right corner. From there, enable Vaadin Copilot to start using it directly in your running app.
Copilot will guide you through setting up your development environment for the best experience, including Java hotswap and IDE integration. It stays out of the way when not in use, and you can toggle it with a keyboard shortcut if needed.
For detailed instructions, visit the Copilot documentation.
.png?width=1170&height=1001&name=Frame%204%20(3).png)