There is much more to Vaadin Copilot than AI, and in this article, we’ll examine one feature that can be particularly useful when editing UIs: drag and drop. Whether you're working with Java or React views, Vaadin Copilot makes UI editing faster and more intuitive.
The “Copilot” moniker has been used to indicate all sorts of AI assistants lately, and Vaadin Copilot is indeed AI empowered – but we think that ideally, Artificial-, Actual-, and No-Intelligence can, and should, coexist seamlessly.
Vaadin Copilot is intended to be a handy tool, ready to assist whenever and however convenient, regardless of whether that assistance is “intelligent” or not.
This article will focus squarely on one simple yet powerful topic: drag and drop with Vaadin Copilot.
NOTE: To enable Vaadin Copliot, click the }> button in the lower right or tap CTRL (CMD on Mac) twice while holding SHIFT.
Rearranging the UI
You can reorder components simply by dragging and dropping straight within the UI. Drop zones indicate where the component can be dropped.
You can also drag to a completely different layout or part of the UI. If things get “tight,” for instance, when dealing with multiple nested layouts or empty layouts, you can use the Outline panel to drag and drop within a hierarchical view of the structure.
A whole layout can be dragged in the same way. Note that you can not drag multiple separate components at once – instead, use cut and paste or first wrap the components in a layout.
Adding to the UI
You can drag in new components and layouts from the Palette. Imports will be added automatically as needed.
The Palette also has “composites,” which, when dropped into the UI, will add a structure of multiple components when dragged into the UI.
Images can be dragged into the UI. This imports (copies) the image into the project resources and adds it to the UI.
You can also drop a Java bean or entity on the UI. This will create input fields that match the bean instance fields. Building a form this way is super fast and less error-prone.
Why drag and drop?
Drag-and-drop is a powerful way to edit UIs visually. It can often be the fastest and most intuitive way to experiment and achieve a good result.
Vaadin Copilot has an assortment of handy tools that you can quickly reach for whenever the situation calls for them. Spending a little bit of time getting to know the new tools in your toolbelt can save you a lot of time later.
For instance, check out how the Figma import can streamline your workflow in our next blog: Figma Design to Java Code with Vaadin Copilot
Give Vaadin Copilot a spin! We think you’ll find it handy.