Skip to main content
The Live Page Builder is a visual, drag-and-drop editor for building 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, and extend with conditional and web component blocks

​
Key Concepts

TermMeaning
BlockA self-contained component you place on the page (heading, image, footer, accordion, etc.)
SlotA region on the page (or inside a block) where blocks can be dropped or added
Block paletteThe 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

1

Create a builder page

In the Template Builder, open Live Pages and create a new page using the blocks builder type.
2

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
3

Edit content and styling

Select a block to open the property panel, where specialized input forms let you edit its props and styling.
4

Rearrange

Use the drag handle on a block’s wrapper anchor to move or swap blocks.
5

Preview and publish

Switch between Edit and Preview modes, check the responsive breakpoints, then publish the template to make the page live.

​
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.
Add output examples to your function and trigger resources to get the most realistic preview data in the builder.

​
Inspect Mode

Hold Alt (Windows) or Option (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.
Pasting follows the same clipboard schema used for copy, so AI-generated blocks drop in exactly like manually copied ones.

​
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

Grid Layout

Arrange blocks into responsive rows and columns

Conditional Blocks

Show or hide blocks with if/else logic

Web Component Blocks

Bring your own custom blocks

Page Templates

Save and reuse pages across flows

PDFs from Live Pages

Turn a live page into a PDF report