# Pyzed Design

> The manual of Pyzed Design, the visual GUI designer for Python: draw windows and components, design shaders, wire events to Python, run them and ship them.

Source: https://albakore.github.io/pyzed/editor/

**Pyzed Design** is the visual editor of Pyzed, built with Pyzed itself. You draw a window with the mouse, set its
properties in a grid, double-click a control to write the Python code of its event, and press <kbd>F5</kbd> to run it
with all its logic. The same editor builds reusable **components**, GPU **shaders** made of nodes, and edits the
Python of your whole project.

It stands on the shoulders of tools many people already know: the form designer of **Visual Basic** and **Qt
Designer** (draw, set properties, wire events), the scenes and visual shaders of **Godot** and the details panel and
material editor of **Unreal Engine**, and a clean, keyboard-friendly interface inspired by the **Zed** code editor.
The goal is a frontend framework for desktop apps that you can use without writing code, and extend with code when
you want.

## Open it

Download the [standalone app](https://albakore.github.io/pyzed/download/) (it brings its own Python and uv), or start it from a Python
environment:

**uv:**

```bash
uv add "pyzed-ui[designer]"      # in your project: Pyzed plus the ty and ruff language servers
uv run pyzed design
```

**pip:**

```bash
pip install "pyzed-ui[designer]"
pyzed design
```

**python:**

```bash title="macOS / Linux"
python3 -m pip install "pyzed-ui[designer]"
python3 -m pyzed design
```
```powershell title="Windows (PowerShell)"
py -m pip install "pyzed-ui[designer]"
py -m pyzed design
```

| Command | What it opens |
| --- | --- |
| `pyzed design` | Inside a project: its main form (`[tool.pyzed] main`). Elsewhere: the welcome window, or an empty form. |
| `pyzed design login.pzform` | That form, or a new one with that name that is created on the first save. |
| `pyzed design ui/rating.pzcomp` | A [component](https://albakore.github.io/pyzed/editor/component-designer/) (created on the first save if missing). |
| `pyzed design fx/fire.pzshad` | A [shader made of nodes](https://albakore.github.io/pyzed/editor/shader-view/) (created on the first save if missing). |
| `python -m pyzed.designer [file]` | The same, without the `pyzed` command on `PATH`. |

## The workflow in one picture

```mermaid
flowchart LR
    TB[Toolbox] -->|drag or click| CV[Canvas]
    CV -->|select| PR[Properties]
    CV -->|double-click| EV[Events]
    EV --> CE[Code editor]
    CV -- Ctrl+S --> F[(login.pzform)]
    CE -- Ctrl+S --> P[(login.py)]
    F --> RUN["F5 · pyzed run"]
    P --> RUN
    RUN --> W[Native window]
    RUN -. prints, events, errors .-> CO[Console]
```

1. **Place** controls from the toolbox: drag them onto the form, or click one and then click (or drag a rectangle)
   on the form.
2. **Arrange** them with the mouse, the keyboard, the smart guides, the alignment tools or a
   [layout container](https://albakore.github.io/pyzed/editor/layouts/).
3. **Configure** them in [Properties](https://albakore.github.io/pyzed/editor/properties/): text, data, style, anchors.
4. **Write the logic**: double-click a control to open the handler of its main event in the
   [code editor](https://albakore.github.io/pyzed/editor/code-editor/).
5. **Run** with <kbd>F5</kbd>. The [console](https://albakore.github.io/pyzed/editor/console-and-running/) shows prints, events and errors;
   saving updates the running window.
6. **Reuse and ship**: turn repeated pieces into [components](https://albakore.github.io/pyzed/editor/component-designer/), and package the app
   with `pyzed build` (see [Distribute](https://albakore.github.io/pyzed/packaging/)).

## Start here

## The views

## Designing forms

## Run, files, AI and reference

**About the captures:**

Every panel and view has its page, written against the current version. The captures and short recordings were made
on Linux with the One Dark theme (and One Light where the site is light), so your title bar buttons and fonts may
look a little different on Windows or macOS.