# Page Flow

Page Flow in Zingy offers a user-friendly interface where you can design the flow of your app's pages and forms. It provides a collection of pre-designed blocks that can be easily arranged and connected through a drag-and-drop interface. Each block represents a specific programming concept or logic, allowing you to build sophisticated programs by stacking and nesting these blocks together.

You can open the Page Flow editor by using the 'Page Flow' button on the [Page Editor's main toolbar](/app-editor/page-editor/page-editor-tour.md#main-toolbar).

***

## Page Flow Editor Tour

The page flow editor consists of the main toolbar, the toolbox and the workspace sections and they are discussed below:

###  Main Toolbar

<div align="left"><figure><img src="/files/dXbnc1CCg95zNymN8uZt" alt="" width="563"><figcaption><p>Page Flow Editor: Main Toolbar</p></figcaption></figure></div>

The page flow editor's main toolbar sits near the top and provides the following buttons:

* Save: Saves your work.
* Close: Takes you back to the page editor.

***

### Toolbox

<div align="left"><figure><img src="/files/WINz1UMm1vBKgXe0dpoz" alt="" width="563"><figcaption><p>Page Flow Editor: Toolbox</p></figcaption></figure></div>

The page flow editor's toolbox serves as a palette or menu from which you can select blocks to build your page's flow. The toolbox appears as a vertical panel, providing a categorized collection of blocks that you can drag and drop onto the page flow editor's workspace.&#x20;

The blocks in the toolbox represent different programming concepts, commands, and functions that can be combined to create customized logic for your page.

***

### Workspace

<div align="left"><figure><img src="/files/po3XSj5wW170BIAS8pZR" alt="" width="563"><figcaption><p>Page Flow Editor: Workspace</p></figcaption></figure></div>

The workspace is the main area where you build and arrange your flow using blocks. It appears as a grid-like interface where you can visually assemble the blocks to create the desired logic or sequence of instructions.

To add a block to your program, you click and hold on the desired block in the toolbox, then drag it into the workspace. Once the block is in the workspace, you can release the mouse button to drop it into the desired position.

The blocks can be connected together by attaching them to one another, forming a chain of blocks that represent the desired flow. The connection points on the blocks allow you to snap them together, creating a visual representation of the logical structure.

By dragging blocks from the toolbox into the workspace and arranging them accordingly, you can construct the page's flow, define variables, implement conditional statements, perform calculations, and execute other programming tasks.

***

## See also

<table data-view="cards"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><mark style="color:blue;">Understanding Page Flow blocks</mark></td><td><a href="/pages/6xvdrfNLnqdaKhHO7UMX">/pages/6xvdrfNLnqdaKhHO7UMX</a></td></tr><tr><td><mark style="color:blue;">Directory of all Page Flow blocks</mark></td><td><a href="/pages/l2AgJtjCjOK9IvNSePun">/pages/l2AgJtjCjOK9IvNSePun</a></td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.zingy.ai/app-editor/page-flow.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.