Documentation
Builder Interface
A complete tour of the visual builder UI.
Welcome to the PaperCast visual builder! This tool is designed to give you pixel-perfect control over your document templates while maintaining a strict, developer-friendly JSON schema underneath.
The Three Pillars
The interface is divided into three primary sections:
1. The Left Panel (Widgets & Code)
This section acts as your toolkit. It contains two tabs:
- Widgets: A categorized list of all available elements (Text, Images, Rows, Columns, Tables) that you can drag and drop into your document.
- JSON Editor: For advanced users, this tab exposes the raw JSON AST (Abstract Syntax Tree) powering the document. It features Monaco Editor integration, meaning you get real-time schema validation and autocomplete (Ctrl+Space).
2. The Canvas (Center)
This is the live preview of your paginated document.
- PaperCast automatically calculates where page breaks should occur based on your
PageSetup(A4, Letter, etc.). - When you click on any element in the canvas, it becomes highlighted with a blue border, indicating it is currently selected.
3. The Property Panel (Right)
When an element is selected on the canvas, this panel populates with its properties. It is organized into four tabs:
- Layout: Margins, padding, sizing, and Flexbox controls.
- Style: Typography, colors, and background settings.
- Props: Node-specific settings (e.g., Image URL, Table Columns).
- Bind: Data injection settings for variables.
Top Toolbar
At the top of the interface, you will find global controls to change the zoom level, toggle Headers/Footers visibility, and trigger manual JSON syncs.
4. Section Toolbars (Headers & Footers)
When you choose to view Headers and Footers, they will appear at the top and bottom of your canvas respectively. Each Header and Footer now features a dedicated Section Toolbar. This inline toolbar allows you to:
- Change the display condition (e.g.,
all,first,last,even,odd). - Set a fixed height or leave it as
auto. - Specify explicit page overrides (e.g.,
1, 3) to force the section to only render on those pages. - Delete the section entirely.
Careful!
Deleting a section will permanently remove all widgets nested inside it. This action cannot be undone.
5. MCP Connection Status Badge
At the bottom-left corner of the interface, you'll see a connection badge for the Model Context Protocol (MCP).
- Green / Connected: An MCP server is running, and your session is active. External AI agents can read and manipulate your layout in real-time.
- Gray / Disconnected: The MCP server is offline.
Connecting MCP
If your badge is disconnected, ensure you have started the local MCP server by
running pnpm run mcp:start in a separate terminal.
For more information, see the MCP Introduction page.