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

# <a id="designer.overview"></a>Designer

<!-- 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 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/v23/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/v23/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/v23/tools/designer/using-designer/layout.md)

- Sizing and 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/v23/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/v23/tools/designer/using-designer/previewing.md#designer.previewing.resize)

- Palette shows snippets and 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 on your device

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

  [Previewing](https://vaadin.com/docs/v23/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 back-end data.

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

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