> Markdown version of [Designer (deprecated)](https://vaadin.com/docs/next/tools/designer). Section index: [llms.txt](https://vaadin.com/docs/next/tools/llms.txt)

# <a id="designer.overview"></a>Designer (deprecated since V25.0)

<!-- vale Vaadin.Wordiness = NO -->

> **Note: Commercial Feature**
>
> A commercial Vaadin subscription is required to use Designer in your project.
>
> - [Start Free Trial](https://vaadin.com/trial)
>
> - [See Pricing](https://vaadin.com/pricing)

Vaadin Designer has been deprecated since V25.0, in favor of [Vaadin Copilot](https://vaadin.com/docs/next/tools/copilot.md). Going forward, Copilot is where the design-to-code workflow evolves.

Designer still works with V25, but it’s no longer developed and it may be removed in a future version. It also doesn’t support the Aura theme.

Vaadin Designer is a visual tool where you can drag and drop - and configure - web components on a canvas. With Designer, you always have the end result in front of you. Any change you do is instantly reflected in the live preview of the UI you are building.

[Get started using Designer](https://vaadin.com/docs/next/tools/designer/getting-started/setting-up-your-environment.md)

## <a id="features"></a>Features

- WYSIWYG Design Canvas

  Drag and drop web components. Updates when the design properties or styles are changed.

  [Designing](https://vaadin.com/docs/next/tools/designer/using-designer/designing.md)

- Quick Layout Editing

  Control VerticalLayout, HorizontalLayout, and other flex containers quickly with flexbox controls.

  [Laying Out Views](https://vaadin.com/docs/next/tools/designer/using-designer/layout.md)

- Sizing & Spacing Panel

  Set width, height, margin, padding, spacing properties with CSS values, or Lumo presets using a drop-down.

  [Sizing and spacing](https://vaadin.com/docs/next/tools/designer/using-designer/layout.md#designer.sizing.and.spacing)

- Viewport Controls

  Quickly check the responsiveness of the design.

  [Resizing viewport and presets](https://vaadin.com/docs/next/tools/designer/using-designer/previewing.md#designer.previewing.resize)

- Palette Shows Snippets & Components

  Pre-built snippets for Vaadin components. Use any web components from the project.

- Outline to Display Component Hierarchy

  Change component hierarchy using drag and drop. Connect components to the Java companion file.

- Preview in Browser or Device

  View design on a mobile device with one click. Share the preview link to others.

  [Previewing](https://vaadin.com/docs/next/tools/designer/using-designer/previewing.md#designer.previewing.preview)

- Work within your Project

  Work with designs directly in your Java project. Use a Java companion file to connect design to backend data.

  [Connect to Java](https://vaadin.com/docs/next/tools/designer/using-designer/java.md)

`C5F0925C-7BC3-429F-A253-FF5853F0FA06`