# Visual designer

> Build Python desktop windows by drag and drop, wire their events to Python and run them: a visual GUI designer like Visual Basic or Qt Designer.

Source: https://albakore.github.io/pyzed/guides/designer/

Pyzed Design is a form editor in the spirit of Visual Basic, the WinForms designer in Visual Studio and
Qt Designer, built with Pyzed itself. You draw a window with the mouse, set properties in a grid, double-click a
control to write the code of its event, and press **F5** to run it with all its logic.

(Image: The designer with the login example open)

Everything about it now lives in its own manual, **[Pyzed Design](https://albakore.github.io/pyzed/editor/)**:

| Topic | Page |
| --- | --- |
| The window and its areas | [Overview](https://albakore.github.io/pyzed/editor/) |
| Placing, moving, aligning, snapping, the outline | [Toolbox and canvas](https://albakore.github.io/pyzed/editor/toolbox-and-canvas/) |
| The property grid, lists and tables | [Properties](https://albakore.github.io/pyzed/editor/properties/) |
| Panels, flex rows and columns, grids, anchors | [Layouts and containers](https://albakore.github.io/pyzed/editor/layouts/) |
| The Style section, the color picker, themes | [Styles and themes](https://albakore.github.io/pyzed/editor/styles-and-themes/) |
| Events and writing handlers | [Events and handlers](https://albakore.github.io/pyzed/editor/events/) |
| Completion, diagnostics, language servers | [Code editor](https://albakore.github.io/pyzed/editor/code-editor/) |
| F5, the debug console, hot reload | [Running and the console](https://albakore.github.io/pyzed/editor/console-and-running/) |
| uv projects, dependencies, ruff, ty, git | [Projects](https://albakore.github.io/pyzed/editor/projects/) |
| Reusable components | [Component designer](https://albakore.github.io/pyzed/editor/component-designer/) |
| New forms, templates, `.pzform` files, scripting | [Files, templates and scripting](https://albakore.github.io/pyzed/editor/files-and-scripting/) |
| Menus, the command palette, docks | [Menus and commands](https://albakore.github.io/pyzed/editor/menus-and-commands/) |
| Every shortcut | [Keyboard shortcuts](https://albakore.github.io/pyzed/editor/keyboard-shortcuts/) |
| Preferences | [Settings](https://albakore.github.io/pyzed/editor/settings/) |

## Debug console

See [Running and the console](https://albakore.github.io/pyzed/editor/console-and-running/#the-console).

## Panels

See [Panels and docks](https://albakore.github.io/pyzed/editor/menus-and-commands/#panels-and-docks).

## Code editor

See [Code editor](https://albakore.github.io/pyzed/editor/code-editor/): completion, diagnostics, code lens, folding and the ty and ruff
language servers.

## Telemetry

See [Settings → Telemetry](https://albakore.github.io/pyzed/editor/settings/#telemetry).

## Components

**Common**: Label, Heading, Button, Text box, Text area, Check box, Switch, Radio group, Drop-down, Slider, Number box,
List box, Link and Search box. **Containers**: Panel, Group box, Card. **Layout**: Flex row, Flex column, Grid,
Spacer. **Navigation**: Tab bar, Segmented. **Display**: Progress bar, Badge, Chip, Callout, Avatar, Key binding,
Stat, Chart, Table, Image, Icon, Markdown, Spinner, Divider and Timer.

(Image: Every built-in component)

To add your own, see [Files, templates and scripting](https://albakore.github.io/pyzed/editor/files-and-scripting/#adding-your-own-components)
and the [component designer](https://albakore.github.io/pyzed/editor/component-designer/).

## How it is built

See [Files, templates and scripting → How it is built](https://albakore.github.io/pyzed/editor/files-and-scripting/#how-it-is-built).