Pages
Pages are full-screen visual interfaces you can create for your Flow-Like apps. Unlike the chat interface, pages give you complete control over layout and design.
What are Pages?
Section titled “What are Pages?”A page is a custom screen that displays widgets, text, images, charts, and other content. Each page is connected to a board (flow) that provides its data and logic.
┌─────────────────────────────────────────────────────────────┐│ Your App │├─────────────────────────────────────────────────────────────┤│ Routes: / → Dashboard | /reports → Reports │├─────────────────────────────────────────────────────────────┤│ ││ ┌─────────────────────────────────────────────────────┐ ││ │ PAGE: Dashboard │ ││ │ │ ││ │ ┌────────┐ ┌────────┐ ┌────────┐ │ ││ │ │ Sales │ │ Orders │ │ Users │ │ ││ │ │ $124k │ │ 847 │ │ 234 │ │ ││ │ └────────┘ └────────┘ └────────┘ │ ││ │ │ ││ │ ┌────────────────────────────────────┐ │ ││ │ │ Sales Chart │ │ ││ │ │ 📈 Revenue over time │ │ ││ │ └────────────────────────────────────┘ │ ││ │ │ ││ └─────────────────────────────────────────────────────┘ ││ │└─────────────────────────────────────────────────────────────┘Pages vs Chat UI
Section titled “Pages vs Chat UI”| Feature | Pages | Chat UI |
|---|---|---|
| Design control | Full visual customization | Conversational format |
| Layout | Grid, columns, freeform | Sequential messages |
| Best for | Dashboards, reports, forms | Q&A, conversations |
| User input | Forms, buttons, interactions | Text messages |
| Data display | Charts, tables, cards | Markdown responses |
Creating a Page
Section titled “Creating a Page”Pages are created through the Page Builder, which you access from your app’s settings.
From the App Settings
Section titled “From the App Settings”- Open your app in the desktop application
- Click the gear icon (⚙️) to open settings
- Navigate to Pages & Routes
- Click Create Page or open the Page Builder
From a Flow
Section titled “From a Flow”You can also create a page directly connected to a specific flow:
- Open the flow in the Studio
- Click the page icon in the flow settings
- The new page will be automatically linked to that flow’s data
Page Builder Overview
Section titled “Page Builder Overview”The Page Builder is a visual drag-and-drop editor:
┌─────────────────────────────────────────────────────────────────────┐│ Page Builder [Preview] 💾 │├─────────────┬───────────────────────────────────┬───────────────────┤│ │ │ ││ COMPONENTS │ CANVAS │ PROPERTIES ││ │ │ ││ Layout │ ┌─────────────────────────┐ │ Selected: Card ││ ┌───────┐ │ │ Drop widgets here │ │ ││ │ Row │ │ │ │ │ Title: ││ └───────┘ │ │ ┌───────┐ ┌───────┐ │ │ [Revenue ] ││ ┌───────┐ │ │ │ Card │ │ Card │ │ │ ││ │Column │ │ │ └───────┘ └───────┘ │ │ Background: ││ └───────┘ │ │ │ │ [● Default ▾] ││ │ │ ┌───────────────────┐ │ │ ││ Display │ │ │ Chart │ │ │ Data Binding: ││ ┌───────┐ │ │ └───────────────────┘ │ │ [/sales/total ▾] ││ │ Text │ │ └─────────────────────────┘ │ ││ └───────┘ │ │ ││ ┌───────┐ │ │ ││ │ Image │ │ │ ││ └───────┘ │ │ │├─────────────┴───────────────────────────────────┴───────────────────┤│ Layers: [Page] > [Row] > [Card] [Undo] [Redo]│└─────────────────────────────────────────────────────────────────────┘Main Areas
Section titled “Main Areas”| Area | Description |
|---|---|
| Components | Drag these onto your canvas to build the page |
| Canvas | Visual preview of your page layout |
| Properties | Configure the selected component |
| Layers | View and navigate the page structure |
Adding Content
Section titled “Adding Content”Drag and Drop
Section titled “Drag and Drop”- Find a component in the left panel
- Drag it onto the canvas
- Drop it where you want it to appear
- Configure its properties in the right panel
Available Components
Section titled “Available Components”| Category | Components |
|---|---|
| Layout | Row, Column, Grid, Container |
| Display | Text, Image, Icon, Divider |
| Data | Table, Chart, Metric Card |
| Input | Button, Form, Dropdown, Switch |
| Advanced | Code Block, Video, Custom HTML |
Connecting to Data
Section titled “Connecting to Data”Pages become powerful when connected to your flows. Use data bindings to display live information.
Binding to Flow Data
Section titled “Binding to Flow Data”- Select a component (like a Text or Chart)
- In the Properties panel, find Data Binding
- Choose a path from your flow’s data (e.g.,
/sales/total) - The component will display live data when the page runs
Example Bindings
Section titled “Example Bindings”| Component | Binding | Shows |
|---|---|---|
| Text | /user/name | ”John Doe” |
| Metric | /sales/revenue | ”$124,500” |
| Chart | /sales/monthly | Bar chart |
| Table | /orders/recent | List of orders |
Layout Types
Section titled “Layout Types”Pages support different layout systems:
| Layout | Description | Best For |
|---|---|---|
| Freeform | Position elements anywhere | Landing pages |
| Stack | Vertical flow, top to bottom | Articles, forms |
| Grid | Rows and columns | Dashboards |
| Sidebar | Main area with side panel | Apps with navigation |
Page Settings
Section titled “Page Settings”Appearance
Section titled “Appearance”- Background color - Set the page background
- Theme - Light or dark mode
- Max width - Constrain content width
- Padding - Space around content
Metadata
Section titled “Metadata”- Title - Browser tab title
- Description - SEO description
- Open Graph image - Social media preview
Previewing Your Page
Section titled “Previewing Your Page”Click Preview to see how your page will look:
- Desktop - Full-width view
- Tablet - Medium-width view
- Mobile - Narrow mobile view
Responsive components adapt automatically to different screen sizes.