This is a complete reference for all available page components. Site builders use these components
to design pages. Each component type has specific allowed attributes and can be included in page JSON.
heading
Description: Displays a heading or title
Allowed Attributes:
content (string, required) - The heading textstyleClass (string) - CSS class name for styling (e.g., "main-heading", "h1")
Example:
{
"type": "heading",
"content": "Welcome to My Site",
"styleClass": "main-heading"
}
paragraph
Description: Displays a block of text content
Allowed Attributes:
content (string, required) - The paragraph text (supports newlines with \n)styleClass (string) - CSS class name for styling (e.g., "body-text")
Example:
{
"type": "paragraph",
"content": "This is a paragraph of text.\nIt can span multiple lines.",
"styleClass": "body-text"
}
link
Description: Displays a clickable link that navigates to another page
Allowed Attributes:
content (string, required) - The link text displayedtarget (string, required) - The page path to navigate to (e.g., "/about")styleClass (string) - CSS class name for styling (e.g., "nav-link")
Example:
{
"type": "link",
"content": "Go to About Page",
"target": "/about",
"styleClass": "nav-link"
}
form
Description: Displays a form with input fields and a submit button. Forms can be used for creating new records (POST) or editing existing records (PUT).
Allowed Attributes:
styleClass (string) - CSS class name for styling the form (e.g., "form-standard")action (string) - Server endpoint for form submission. For new records use any path (e.g., "/submit"). For updates use "/{table}/{id}" format (e.g., "/submissions/1")fields (array, required) - Array of field objectsdataSource (object) - Pre-populate form with existing record data for editing:
table (string, required) - Database table containing the recordid (number, required) - ID of the record to edit
Field Types:
text - Single-line text inputtextarea - Multi-line text inputdropdown - Select dropdown with predefined optionssubmit - Submit button
Field Attributes:
type (string, required) - "text", "textarea", "dropdown", or "submit"name (string) - Field name for text/textarea/dropdown (must match database column name for edits)label (string) - Display labelplaceholder (string) - Placeholder text for text/textareavalue (string) - Pre-filled value (set automatically by server when using dataSource)rows (number) - Number of rows for textarea fieldsoptions (array) - Array of options for dropdown fields:
label (string) - Text displayed to uservalue (string) - Value submitted with form
POST vs PUT
When a form has a dataSource, the browser automatically uses PUT method to update the existing record.
Without dataSource, the form uses POST to create a new record.
Example (Create new record - POST):
{
"type": "form",
"styleClass": "form-standard",
"action": "/submit",
"fields": [
{
"type": "text",
"name": "name",
"label": "Your Name",
"placeholder": "John Doe"
},
{
"type": "text",
"name": "email",
"label": "Email Address",
"placeholder": "john@example.com"
},
{
"type": "textarea",
"name": "message",
"label": "Message",
"placeholder": "Your message here...",
"rows": 5
},
{
"type": "submit",
"label": "Send"
}
]
}
Example (Form with dropdown field):
{
"type": "form",
"styleClass": "form-standard",
"action": "/submit",
"fields": [
{
"type": "text",
"name": "name",
"label": "Your Name",
"placeholder": "John Doe"
},
{
"type": "dropdown",
"name": "country",
"label": "Select Country",
"options": [
{"label": "United States", "value": "us"},
{"label": "Canada", "value": "ca"},
{"label": "United Kingdom", "value": "uk"},
{"label": "Other", "value": "other"}
]
},
{
"type": "submit",
"label": "Submit"
}
]
}
Example (Edit existing record - PUT):
{
"type": "form",
"styleClass": "form-standard",
"action": "/submissions/1",
"dataSource": {
"table": "submissions",
"id": 1
},
"fields": [
{
"type": "text",
"name": "name",
"label": "Name"
},
{
"type": "text",
"name": "email",
"label": "Email"
},
{
"type": "textarea",
"name": "message",
"label": "Message"
},
{
"type": "submit",
"label": "Update"
}
]
}
When this form loads, the server queries the submissions table for record ID 1 and pre-fills
each field's value with the corresponding column data. The form then submits via PUT to
/submissions/1, updating the record in the database.
Styling Form Fields:
Forms support custom styling for all input fields and buttons through the form's styleClass. You can customize:
fieldBackgroundColor - Background color of text, textarea, and dropdown fieldsfieldTextColor - Text color inside fields and dropdown optionsfieldBorderColor - Border color of fields and dropdownsfieldArrowColor - Arrow indicator color on dropdown fields (default: white)submitButtonColor - Submit button background color
Example (Custom field colors):
{
"type": "form",
"styleClass": "custom-form",
"action": "/submit",
"fields": [
{
"type": "text",
"name": "username",
"label": "Username",
"placeholder": "Enter username"
},
{
"type": "submit",
"label": "Login"
}
]
}
// Page styles:
"styles": {
"custom-form": {
"fieldBackgroundColor": "#0066ff", // Blue fields
"fieldTextColor": "#ff69b4", // Hot pink text
"fieldBorderColor": "#ff69b4", // Hot pink border
"fieldArrowColor": "#ffff00", // Yellow arrow
"submitButtonColor": "#ffff00" // Yellow button
}
}
container
Description: Displays content in a two-column layout (sidebar + main area)
Allowed Attributes:
layout (string) - Currently only "two-column" is supportedcolumnWidths (array) - [sidebarWidth, mainWidth]. Use null for flexible sizingcolumns (object) - Contains "sidebar" and "main" arrays of components
Example:
{
"type": "container",
"layout": "two-column",
"columnWidths": [200, null],
"columns": {
"sidebar": [
{
"type": "heading",
"content": "Navigation",
"styleClass": "sidebar-heading"
},
{
"type": "link",
"content": "Home",
"target": "/",
"styleClass": "sidebar-link"
}
],
"main": [
{
"type": "heading",
"content": "Main Content",
"styleClass": "main-heading"
}
]
}
}
dropdown
Description: Displays a dropdown/combobox populated with data from the database
Allowed Attributes:
label (string) - Label displayed above the dropdownname (string) - Field name identifierstyleClass (string) - CSS class name for styling (supports custom field colors)dataSource (object, required) - Specifies where to fetch dropdown options:
table (string, required) - Database table to queryvalueField (string) - Column to use as the value (default: "id")labelField (string) - Column to display as label (supports nested JSON like "data.email")
Styling Dropdowns:
Dropdowns support custom colors through the styleClass attribute. You can customize:
fieldBackgroundColor - Background color of the dropdown field and optionsfieldTextColor - Text color in the dropdown and optionsfieldBorderColor - Border color of the dropdown field
Example (Basic dropdown):
{
"type": "dropdown",
"label": "Select a Submission",
"name": "submission_id",
"dataSource": {
"table": "form_submissions",
"valueField": "id",
"labelField": "data.email"
}
}
Example (Custom colors):
{
"type": "dropdown",
"label": "Select an Option",
"name": "option_id",
"styleClass": "custom-dropdown",
"dataSource": {
"table": "options_table",
"valueField": "id",
"labelField": "name"
}
}
// Page styles:
"styles": {
"custom-dropdown": {
"fieldBackgroundColor": "#0066ff", // Blue dropdown
"fieldTextColor": "#ff69b4", // Hot pink text
"fieldBorderColor": "#ff69b4" // Hot pink border
}
}
data-source
Description: Displays records from the database as formatted text
Allowed Attributes:
table (string, required) - Database table to querylimit (number) - Maximum number of records to display (default: 10)title (string) - Heading displayed above the dataformat (string) - "json" (default) or "custom"template (string) - Format string (only used if format="custom")
- Use
{fieldname} to insert column values
- Use
{data.fieldname} to extract nested JSON fields
- Example:
"Submission #{id}: {data.name} ({data.email})"
styleClass (string) - CSS class name for styling each record
Example (JSON format):
{
"type": "data-source",
"table": "form_submissions",
"limit": 5,
"title": "Recent Submissions",
"format": "json",
"styleClass": "body-text"
}
Example (Custom format with template):
{
"type": "data-source",
"table": "form_submissions",
"limit": 10,
"title": "Recent Form Submissions",
"format": "custom",
"template": "Submission #{id}: Name: {data.name} | Email: {data.email} | Submitted: {created_at}",
"styleClass": "body-text"
}
code
Description: Displays a syntax-highlighted code block with optional code type label and copy button
Allowed Attributes:
content (string, required) - The code text to displaycode_type (string) - Label for the code language (e.g., "PHP", "JavaScript", "Python"). Displayed in the code block headercode_copy_icon (boolean, default: true) - Show or hide the copy button. When true, displays a clipboard icon that copies code to the user's clipboardstyleClass (string) - CSS class name for styling the code block (e.g., "code-width"). Use this to control width via the styles object
Example (Basic code block):
{
"type": "code",
"code_type": "PHP",
"code_copy_icon": true,
"content": ""
}
Example (With width styling):
{
"type": "code",
"code_type": "JavaScript",
"code_copy_icon": true,
"content": "function greet(name) {\n console.log(`Hello, ${name}!`);\n}\ngreet('World');",
"styleClass": "code-width"
}
// Page styles:
"styles": {
"code-width": {"width": 400}
}
Example (Without copy button):
{
"type": "code",
"code_type": "SQL",
"code_copy_icon": false,
"content": "SELECT * FROM users\nWHERE active = 1\nORDER BY created_at DESC;"
}
✓ Tip
Combine components to create powerful pages. Use containers for layout, data-source
to display dynamic data, forms for user input, dropdowns for selections, and code blocks
to display syntax-highlighted code examples.
