> For the complete documentation index, see [llms.txt](https://docs.in8sync.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.in8sync.com/client-admin-guide/getting-started.md).

# Page Builder

The drag-and-drop editor for designing portal pages — what it is, how to open it, and the layout of the editor interface.

The Page Builder is the drag-and-drop editor for designing portal pages. You assemble pages from pre-built components — no coding. Each module in a workflow has its own page, and the Page Builder is where you lay it out.

## Opening the Page Builder

The Page Builder is reached from inside a workflow:

{% stepper %}
{% step %}

### Open the workflow

Workflow Builder in the sidebar → pick the workflow.
{% endstep %}

{% step %}

### Open the module

Click the module you want to edit.
{% endstep %}

{% step %}

### Open the editor

Use the option that opens the module's page in the Page Builder.
{% endstep %}
{% endstepper %}

## The editor interface

Three main panels plus a top bar.

### Left — Component palette

Lists every component available for the current module type, organised by category. Components are filtered by module type (Catalog blocks only appear in Catalog modules; Header Nav only in Header Navigation modules; etc.). Drag a component from the palette onto the canvas to add it.

### Centre — Canvas

A live preview of your page. Click a component to select it; drag to reorder; delete via the component's context menu.

### Right — Settings

When a component is selected, its settings appear here. Some components have a **Configure** button that opens a fuller settings window for advanced options.

### Top — Toolbar

The header has the **Publish** button. Publishing is an explicit action — your edits aren't visible to end users until you publish.

## A 5-minute first page

A simple dashboard:

{% stepper %}
{% step %}

### Layout

Drag a **Row** onto the canvas. This is the horizontal container.
{% endstep %}

{% step %}

### Heading

Drag a **Heading** into the Row. Type *Welcome to your dashboard*.
{% endstep %}

{% step %}

### A grid of cards

Below the Row, drag a **Grid** with 2 columns. Drop a **Card** into each column. Click each Card and set the title and content.
{% endstep %}

{% step %}

### A KPI strip

Below the Grid, drag a **Stats** block. Configure a few label/value pairs.
{% endstep %}

{% step %}

### An action

Drop an **Action Button** at the bottom. Set its label to *View Reports* and configure its action.
{% endstep %}

{% step %}

### Publish

Click **Publish** in the top bar. The page is now live.
{% endstep %}
{% endstepper %}

## Core concepts

### Nesting components

Layout blocks (Row, Column, Grid, Flex) act as containers — drop other blocks inside. You can nest them for richer layouts: a Grid with two Columns, each containing a Heading + Text + Action Button.

### Selecting components

Single click selects a component and shows its settings. Click the canvas background to deselect. For nested components that are hard to click, use the outline tree (when available).

### Configuration windows

Some components have complex options that open a separate window when you click **Configure**. Action Button, Order Lines, Catalog Display, and several others use this pattern. The window holds the depth; the panel stays clean.

### Publishing

Publishing is an explicit save. You can edit, preview the canvas, undo locally, and only publish when ready. After publishing the changes are immediately live for end users.

{% hint style="info" %}
There's no automatic version history — changes you publish replace the previous version. For risky edits, copy the workflow first and edit the copy, so you have a known-good copy to return to.
{% endhint %}

## Tips for new admins

* **Start with layout.** Place a Row, Column, or Grid first; drop content inside.
* **Check the module type.** Components are filtered by module type. If a component you expect isn't in the palette, the module type is probably wrong.
* **Browse by category.** The category hubs in the sidebar (Layout, Content, Action, Entity, Catalog, Product, Transaction, Report, Advanced) are the fastest way to find a block.
* **Test on mobile.** The end-user portal is responsive; verify your layout works at narrow widths before publishing.

## Related

<table data-view="cards"><thead><tr><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Common Patterns</strong></td><td>Recipes for the most common page types.</td><td><a href="/client-admin-guide/getting-started/common-patterns.md">Common Page Patterns</a></td></tr><tr><td><strong>Layout &#x26; Responsive</strong></td><td>How layouts collapse on smaller screens.</td><td><a href="/client-admin-guide/getting-started/layout-and-responsive.md">Layout &amp; Responsive Design</a></td></tr><tr><td><strong>Best Practices</strong></td><td>Production checklist before publishing.</td><td><a href="/client-admin-guide/getting-started/best-practices.md">Best Practices</a></td></tr></tbody></table>