Web Elements

> Build HTML responses visually by composing web element nodes -- no raw HTML required.

Web element nodes let you construct full HTML pages, forms, and email templates inside the flow builder. Each node represents an HTML element. Connect them together to build a page, then convert the result to HTML and return it from your route.

Overview

The web elements system has three parts:

1. Element nodes -- Create individual HTML elements (text, inputs, buttons, images, containers). 2. Layout nodes -- Arrange elements vertically or horizontally. 3. Conversion nodes -- Turn the element tree into an HTML string you can return or send via email.

Returning a web page from a route

Use the Return Website node to send an HTML response directly from your route:

1. Build your page using web element and layout nodes. 2. Connect the root element to a Return Website node. 3. The route responds with Content-Type: text/html and renders the page in the browser.

This is the simplest way to serve a web page from Brickr -- no external hosting needed.

Layout nodes

Layout nodes act as containers that hold child elements and control their arrangement.

Vertical Box

The web-vertical-box node stacks child elements top to bottom.

| Input | Type | Description | |-------|------|-------------| | children | Web Element (array) | Elements to stack vertically | | gap | String | Spacing between children (CSS value, e.g., 1rem) | | alignItems | Enum | Horizontal alignment: start, center, end, stretch | | style | Style | Custom CSS overrides | | useBrickrStyle | Boolean | Apply Brickr's default styling (default: true) |

Horizontal Box

The web-horizontal-box node places child elements side by side.

| Input | Type | Description | |-------|------|-------------| | children | Web Element (array) | Elements to arrange horizontally | | gap | String | Spacing between children | | alignItems | Enum | Vertical alignment: start, center, end, stretch | | justifyContent | Enum | Horizontal distribution: start, center, end, space-between, space-around | | style | Style | Custom CSS overrides | | useBrickrStyle | Boolean | Apply default styling |

Text and display nodes

Text

The web-text node renders a text element.

| Input | Type | Description | |-------|------|-------------| | content | String | The text to display | | tag | Enum | HTML tag: p, h1, h2, h3, h4, h5, h6, span, label | | style | Style | Custom CSS | | useBrickrStyle | Boolean | Apply default styling |

Image

The web-image node renders an image.

| Input | Type | Description | |-------|------|-------------| | src | String | Image URL | | alt | String | Alt text for accessibility | | width | String | CSS width | | height | String | CSS height | | style | Style | Custom CSS |

Table

The web-table node renders a table from data.

| Input | Type | Description | |-------|------|-------------| | data | Array | Array of objects to display as rows | | columns | String | Comma-separated column headers | | style | Style | Custom CSS | | useBrickrStyle | Boolean | Apply default styling |

Form input nodes

Web element nodes include a full set of form inputs. All input nodes share these common properties:

| Input | Type | Description | |-------|------|-------------| | name | String | Field name (used in form submission data) | | label | String | Visible label text | | placeholder | String | Placeholder text | | defaultValue | Varies | Initial value | | required | Boolean | Whether the field is required | | style | Style | Custom CSS | | useBrickrStyle | Boolean | Apply default styling |

Text inputs

| Node | HTML type | Notes | |------|-----------|-------| | web-input-text | text | Single-line text | | web-input-email | email | Email with browser validation | | web-input-tel | tel | Phone number | | web-input-url | url | URL with validation | | web-input-password | password | Masked input | | web-input-search | search | Search field with clear button | | web-input-hidden | hidden | Hidden field (no label/placeholder) |

Number and range inputs

| Node | HTML type | Extra inputs | |------|-----------|-------------| | web-input-number | number | min, max, step | | web-input-range | range | min, max, step |

Date and time inputs

| Node | HTML type | Notes | |------|-----------|-------| | web-input-date | date | Standard date picker | | web-input-date-select | Custom | Single date selector | | web-input-date-range | Custom | From/to date range picker | | web-input-time | time | Time picker |

Special inputs

| Node | HTML type | Extra inputs | |------|-----------|-------------| | web-input-color | color | Color picker | | web-input-file | file | accept (file types), multiple | | web-input-image | file | accept (image types), multiple |

Multi-line text

| Node | Description | Extra inputs | |------|-------------|-------------| | web-textbox | Multi-line text input | rows | | web-textarea | Text area | rows, cols |

Selection inputs

| Node | Description | Extra inputs | |------|-------------|-------------| | web-select | Dropdown menu | options (comma-separated) | | web-checkbox | Single checkbox | checked (default state) | | web-radio | Radio button group | options (comma-separated) |

Interactive elements

Button

The web-button node renders a clickable button.

| Input | Type | Description | |-------|------|-------------| | label | String | Button text | | type | Enum | button, submit, reset | | style | Style | Custom CSS |

The button node has an onclick sequence output. Connect it to nodes that should execute when the button is clicked (client-side behavior via form submission).

Styling

Brickr Style

Every web element node has a useBrickrStyle toggle (default: true). When enabled, Brickr applies a clean, responsive default stylesheet to the element. Disable it if you want full control over styling.

Web Style node

The web-style node lets you inject a Brickr Style preset into your page. Connect it as a child of your root layout to apply consistent base styling across all elements.

Custom CSS

Every element accepts a style input where you can write custom CSS properties. These are applied as inline styles and override both Brickr styles and browser defaults.

Converting to HTML

Convert Web to HTML

The convert-web-to-html node takes a web element tree and produces a raw HTML string.

| Input | Type | Description | |-------|------|-------------| | element | Web Element | The root element to convert |

| Output | Type | Description | |--------|------|-------------| | html | String | Complete HTML string |

Use this when you need the HTML as a string -- for example, to store it in a database, pass it to another service, or use it in an email body.

Using web elements in emails

The Send Email (Web) node (send-email-web) accepts a web element directly as the email body. Brickr converts the element tree to HTML and sends it as a rich HTML email.

This lets you build email templates visually using the same web element nodes you use for pages.

When building emails, keep layouts simple. Stick to vertical boxes and basic text/image nodes. Complex CSS and interactive elements may not render consistently across email clients.

What's next?

| Topic | Description | |-------|-------------| | HTTP Nodes | Return web pages from API routes | | Forms | Build standalone forms | | Email Integration | Send HTML emails | | Utility Nodes | Helper nodes for data transformation |