> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wizflow.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Live Page Builder

> Compose live pages visually with a drag-and-drop block editor — no custom HTML required

The **Live Page Builder** is a visual, drag-and-drop editor for building [Live Pages](/features/live-pages) from reusable blocks. Drag blocks from the palette onto the canvas, arrange them into slots, and edit their content and styling from a property panel — all with a live, responsive preview and no custom HTML.

Builder pages are a block-based Live Page type, served at the same URL structure as any other Live Page:

```
/chatflow/[template-key]/pages/[live-page-pathname]
```

***

## Why use the builder

* **No code** — assemble pages from pre-built blocks instead of hand-writing HTML
* **Live preview** — see exactly what users will see while you edit
* **Responsive by design** — build and check desktop, tablet, and mobile in one place
* **Dynamic content** — interpolate entity, trigger, and variable data into blocks
* **Reusable** — copy blocks between pages, save whole pages as [templates](/features/live-page-templates), and extend with [conditional](/features/live-page-conditional-blocks) and [web component](/features/live-page-web-components) blocks

***

## Key Concepts

| Term              | Meaning                                                                                    |
| ----------------- | ------------------------------------------------------------------------------------------ |
| **Block**         | A self-contained component you place on the page (heading, image, footer, accordion, etc.) |
| **Slot**          | A region on the page (or inside a block) where blocks can be dropped or added              |
| **Block palette** | The left-hand pane listing every block available to drag onto the canvas                   |

The builder ships with **22 blocks** at launch, with more complex blocks arriving in subsequent releases.

***

## Building a Page

<Steps>
  <Step title="Create a builder page">
    In the Template Builder, open **Live Pages** and create a new page using the blocks builder type.
  </Step>

  <Step title="Add blocks">
    Add blocks to a slot in any of three ways:

    * **Drag and drop** a card from the block palette onto a slot
    * Click the **paste** icon on a slot to drop in blocks from your clipboard
    * Use the **Block Slot** field in the property panel
  </Step>

  <Step title="Edit content and styling">
    Select a block to open the **property panel**, where specialized input forms let you edit its props and styling.
  </Step>

  <Step title="Rearrange">
    Use the **drag handle** on a block's wrapper anchor to move or swap blocks.
  </Step>

  <Step title="Preview and publish">
    Switch between **Edit** and **Preview** modes, check the responsive breakpoints, then publish the template to make the page live.
  </Step>
</Steps>

***

## Responsive Editing

Build and preview your page at three breakpoints — **Desktop**, **Tablet**, and **Mobile**. The canvas renders inside a preview frame so what you see matches how the page behaves at each screen size, and you can drag and edit blocks directly within every breakpoint.

***

## Live Data Interpolation

Blocks can display dynamic values from your flow — entity responses, trigger outputs, and variables. While editing, the builder previews these with **mock data** drawn from the output examples defined on your resources, so you can see realistic content before any user reaches the page.

<Tip>
  Add [output examples](/features/triggers-automation) to your function and trigger resources to get the most realistic preview data in the builder.
</Tip>

***

## Inspect Mode

Hold <kbd>Alt</kbd> (Windows) or <kbd>Option</kbd> (Mac) to highlight every block on the canvas with a grey border — a quick way to understand a page's structure and find the block you want to edit.

***

## Clipboard Support

Copy and paste blocks — or entire pages — within and across builder pages. Because the clipboard uses a well-defined schema, you can also **ask an LLM to generate page blocks for you** and paste the result straight onto the canvas.

<Info>
  Pasting follows the same clipboard schema used for copy, so AI-generated blocks drop in exactly like manually copied ones.
</Info>

***

## Localization

Builder pages support **English and Danish** labels. Authoring is per-locale — when you switch to a new locale, block labels start empty for that language so you can translate them deliberately.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Grid Layout" icon="grid" href="/features/live-page-grid">
    Arrange blocks into responsive rows and columns
  </Card>

  <Card title="Conditional Blocks" icon="code-branch" href="/features/live-page-conditional-blocks">
    Show or hide blocks with if/else logic
  </Card>

  <Card title="Web Component Blocks" icon="code" href="/features/live-page-web-components">
    Bring your own custom blocks
  </Card>

  <Card title="Page Templates" icon="folder" href="/features/live-page-templates">
    Save and reuse pages across flows
  </Card>

  <Card title="PDFs from Live Pages" icon="file-pdf" href="/features/live-page-pdf">
    Turn a live page into a PDF report
  </Card>
</CardGroup>