Skip to main content

UI Editor Documentation

The Intellectible UI Editor is a powerful visual interface builder that allows you to create complex applications and automations using a React and Flexbox-based runtime. This documentation covers the complete functionality of the editor, from basic layout management to advanced element configuration.

Overview​

The UI Editor provides a WYSIWYG (What You See Is What You Get) environment for building user interfaces. Under the hood, it generates React components using Flexbox for layout, exposing CSS-like properties for precise control over appearance and behavior.

Key features include:

  • Visual Drag-and-Drop: Intuitive element arrangement and nesting
  • Responsive Design: Device-specific styling with breakpoint controls
  • Component System: Reusable UI components that function like pages
  • Front-end Actions: Client-side logic without workflow execution
  • Real-time Preview: Device emulation for testing different screen sizes

Editor Layout​

The UI Editor is divided into three main areas:

1. Navigation Panel (Left)​

The left panel contains two sections:

Pages & Components

  • Lists all pages and reusable components in your workflow
  • Pages are marked with a green "Page" chip
  • Components are marked with a blue "Component" chip
  • Supports adding, renaming, duplicating, and deleting pages
  • Components are essentially reusable pages that can be embedded in other pages

Element Hierarchy

  • Tree view of all elements on the current page
  • Visual indentation shows nesting levels
  • Click to select elements
  • Drag to reorder elements within the hierarchy
  • Toggle visibility (eye icon) to hide elements in the editor
  • Collapse/expand containers using the arrow indicator

2. Canvas (Center)​

The main design area where you build your interface:

  • Device Emulation: Switch between device sizes (Small, Medium, Large, Extra Large) to test responsive designs
  • Visual Editing: Click elements to select them, drag to move them
  • Drop Zones: Blue indicators show where elements can be dropped when dragging
  • Root Element: Every page starts with a root container that cannot be deleted

3. Properties Panel (Right)​

Context-sensitive configuration for selected elements:

  • Properties: Element-specific data and configuration
  • Actions: Front-end action configuration (for interactive elements)
  • Styling: Visual appearance settings including layout, colors, and responsive breakpoints

Working with Pages and Components​

Pages​

Pages are top-level screens in your application. Each page has:

  • A unique ID and display name
  • A root container element
  • Independent element hierarchy
  • Page-level settings (accessible via the "Page Settings" button)

Page Settings include:

  • Enable Page Load Event: Trigger a workflow when the page loads

Components​

Components are reusable UI fragments that function identically to pages but are designed to be embedded:

  • Created via the "Add Component" button in the left panel
  • Embedded using the Component element
  • Changes to a component propagate to all instances
  • Components appear in the Component element's dropdown by name

Adding and Manipulating Elements​

Adding Elements​

  1. Click the + button in the bottom toolbar or Element Hierarchy panel
  2. Select an element type from the dropdown menu
  3. The element is added as a child of the currently selected container, or at the end of the root if no container is selected

Selection​

  • Single Click: Select an element
  • Ctrl/Cmd + Click: Multi-select elements (for bulk operations)
  • Click Canvas: Deselect all elements

Drag and Drop​

Elements can be rearranged via drag-and-drop:

  • Drag Handle: Available in the Element Hierarchy panel
  • Drop Regions:
    • Top: Place before the target element
    • Bottom: Place after the target element
    • Middle (containers only): Nest inside the container
  • Valid Containers: Only Container and PopupDialog elements can accept child elements

Nesting​

To nest elements:

  1. Drag an element over a Container or PopupDialog
  2. Wait for the "Middle" drop zone to highlight
  3. Drop to nest inside

Visibility Controls​

  • Hide in Editor: Toggle the eye icon in the hierarchy to hide elements while editing (useful for managing complex layouts)
  • Shrink in Editor: Collapse container elements in the hierarchy tree to save space

Copy and Paste​

The editor supports standard clipboard operations:

  • Copy: Select elements and press Ctrl/Cmd+C
  • Paste: Press Ctrl/Cmd+V to paste with new IDs
  • Pasted elements maintain their properties, styles, and hierarchy

Element Reference​

Layout Elements​

Container​

The primary layout element based on Flexbox.

Runtime Behavior: Renders as a <div> with Flexbox properties. Can contain other elements if they are dragged into it.

Properties:

  • Make Clickable: Enables click event handling
  • Make Hyperlink: Converts container to an <a> tag with URL
  • Make File Download: Allows downloading a selected file from the library
  • Show Conditionally: Show/hide based on variable value
  • Map List Data: Repeats the container for each item in a list variable (templating)
  • Auto Scroll: Automatically scroll to last element when using list mapping

Style Features: Full Flexbox control (direction, gap, justification, alignment, padding, overflow)

Example: Use as the main page wrapper, card layouts, or button groups.

Component​

Embeds a reusable component (sub-page) into the current page.

Runtime Behavior: Loads the component's element tree and renders it inline. Changes to the source component reflect everywhere it's used.

Properties:

  • Component: Dropdown selection of available components

Example: Create a "Navigation Bar" component and reuse it across all pages.

PopupDialog​

A modal dialog container that overlays the page.

Runtime Behavior: Renders as a Material-UI Dialog with a backdrop. Can contain any elements.

Properties:

  • Conditional Variable: Variable name that controls visibility (show when truthy)

Style Features:

  • Backdrop color control
  • Standard container styling
  • Fixed positioning options

Example: Confirmation dialogs, forms, detail views.

Text Elements​

Paragraph​

Simple text block.

Properties:

  • Text: Content string

Style Features: Font size, weight, color, alignment

Example: Body text, descriptions, labels.

Heading​

Larger text for titles and headers.

Properties:

  • Text: Content string

Style Features: Same as Paragraph but typically larger defaults

Example: Page titles, section headers.

Markdown​

Rich text rendering with Markdown syntax support.

Runtime Behavior: Parses Markdown (including tables, code blocks, emojis, sub/superscript) and renders as HTML with syntax highlighting.

Properties:

  • Text: Markdown content

Style Features: Separate styling for H1-H4 and paragraphs (size, weight, color, alignment)

Example: Documentation, formatted content, articles with rich formatting.

Interactive Elements​

Button​

Clickable action trigger.

Runtime Behavior: Renders as a styled button. Triggers front-end actions or workflow events on click.

Properties:

  • Text: Button label
  • Event Name: Workflow event to trigger

Style Features: Background color, border radius, padding, font styling

Example: Submit buttons, navigation triggers.

BackButton​

Specialized button for navigation.

Properties:

  • Text: Button label
  • Event Name: Event to trigger (defaults to back navigation)

Example: Return to previous page, cancel actions.

Checkbox​

Boolean input control.

Runtime Behavior: Toggles a boolean value in form data or a variable.

Properties:

  • Title: Label text

Style Features: Font styling for label, checkbox color

Example: Terms acceptance, feature toggles.

Single-select dropdown input.

Runtime Behavior: Material-UI Select component. Updates variable or element data on change.

Properties:

  • Control Variable: Variable to bind value to
  • Title: Label text
  • Options: Comma-separated values or JSON array of {value, label} objects
  • Placeholder: Empty state text

Style Features: Border color, border radius, font styling for input and title

Example: Country selection, status filters, category pickers.

TextLine​

Single-line text input.

Properties:

  • Control Variable: Variable to bind to
  • Title: Label text
  • Placeholder: Hint text

Style Features: Border styling, font properties for input and title

Example: Name fields, search inputs, short text entries.

TextArea​

Multi-line text input with Markdown support.

Runtime Behavior: Rich text editor with AI assistance option (if enabled).

Properties:

  • Control Variable: Variable to bind to
  • Placeholder: Hint text
  • Title: Label text
  • Enable AI Assistant: Adds AI writing assistance button

Style Features: Title and input font styling

Example: Comments, descriptions, long-form content.

Media Elements​

Image​

Displays images from the library or via URL.

Runtime Behavior: Loads and displays images with object-fit cover. Supports library documents or external URLs.

Properties:

  • Source: File picker for library images

Style Features: Width, height, border radius, overflow control

Example: Product photos, avatars, banners.

Icon​

Material Symbols icon display.

Runtime Behavior: Renders Material Symbols icons using the material-symbols font.

Properties:

  • Icon ID: Symbol name (browseable via icon picker)

Style Features: Color, width, height (icon scales to fit container)

Example: Navigation icons, status indicators, button icons.

IFrame​

Embeds external web content.

Runtime Behavior: Renders an <iframe> with the specified URL. Disabled in editor mode (shows placeholder).

Properties:

  • URL: Source address

Style Features: Width, height, borders

Example: External dashboards, maps, third-party widgets.

HTML​

Raw HTML content.

Runtime Behavior: Sanitizes and renders HTML content in an iframe for isolation.

Properties:

  • HTML: Raw HTML string

Style Features: Layout dimensions

Example: Custom embeds, legacy content, specialized markup.

Data Display Elements​

DataGrid​

High-performance data table using RevoGrid.

Runtime Behavior: Renders a virtualized grid with sorting, resizing, and column auto-sizing. Read-only display.

Properties:

  • Data: JSON array of objects (keys become columns)

Style Features:

  • Theme selection (Default, Material, Compact, Dark variants)
  • Row height, header height
  • Colors for header, cells, borders, and selection
  • Stretch to fill option

Example: Data reports, record lists, spreadsheet views.

ChipList​

Tag/input list component.

Runtime Behavior: Autocomplete input that creates chips/tags. Supports comma-separated entry.

Properties:

  • Title: Label text

Style Features: Title font styling

Example: Tag inputs, category lists, keyword entry.

LongTextList​

Editable list of text items.

Runtime Behavior: Inline editing interface for array of strings.

Properties:

  • Title: Label text

Style Features: Title font styling

Example: Bullet lists, feature lists, simple arrays.

File Elements​

FilePicker​

Select files from the project library.

Runtime Behavior: Opens library file picker dialog. Stores file metadata (ID, name, token).

Properties:

  • Title: Label text

Style Features: Title font styling

Example: Document selection, image galleries, attachment fields.

FileUpload​

Upload files to storage.

Runtime Behavior: Drag-and-drop or click-to-browse upload interface. Shows progress and triggers workflow events per file.

Properties:

  • Title: Label text
  • Multi File: Allow multiple file selection

Events: Triggers workflow events for upload completion

Example: Document uploads, image galleries, attachments.

Chart Elements​

All charts support responsive sizing, tooltips, legends, and grid controls.

BarChart​

Vertical bar chart for categorical data.

Properties:

  • X-Axis Key: Property name for categories
  • Y-Axis Keys: Comma-separated property names for values (multiple = grouped bars)
  • Data: JSON array of objects
  • Show Grid/Tooltip/Legend: Boolean toggles
  • Fill Colors: Comma-separated hex colors

Style Features: Bar gap, border radius, axis styling, margins

Example: Sales by month, survey results, comparisons.

LineChart​

Line chart for trends over time or categories.

Properties:

  • X-Axis Key: Category property
  • Y-Axis Keys: Value properties (multiple = multiple lines)
  • Line Type: Monotone, Linear, Step, Basis, Cardinal, etc.
  • Show Dots/Active Dots: Point visibility

Style Features: Line width, stroke colors, axis styling

Example: Time series data, trends, progress over time.

PieChart​

Circular proportion chart.

Properties:

  • X-Axis Key: Label property (name)
  • Y-Axis Keys: Value property (first key used)
  • Data: JSON array

Style Features: Fill colors, margins

Example: Market share, budget allocation, percentages.

AreaChart​

Filled line chart.

Properties:

  • Y-Axis Keys: Multiple areas supported
  • Stacked: Stack areas on top of each other
  • Area Type: Curve type (monotone, linear, etc.)

Style Features: Fill opacity, stroke width, fill/stroke colors

Example: Cumulative totals, volume over time.

ComposedChart​

Mixed chart types (bars + lines + areas).

Properties:

  • Y-Axis Line Keys: Properties to render as lines
  • Y-Axis Bar Keys: Properties to render as bars
  • Y-Axis Area Keys: Properties to render as areas

Example: Revenue (bars) with trend line (line) and target (area).

ScatterChart​

X-Y coordinate plotting.

Properties:

  • X/Y/Z Axis Keys: Property names for each axis
  • X/Y/Z Axis Units: Unit labels
  • Dataset Names: Labels for multiple data series
  • Dot Shape: Circle, Square, Triangle, Diamond, Star, Cross

Example: Correlation plots, distribution analysis.

RadarChart​

Spider/web chart for multivariate data.

Properties:

  • Outer Axis Key: Category property (subjects)
  • Data Keys: Metrics to compare (multiple = multiple shapes)
  • Domain: Min/max values (e.g., [0, 150])

Example: Skill assessments, feature comparisons, performance metrics.

SankeyChart​

Flow diagram showing relationships and quantities.

Properties:

  • Iterations: Layout optimization iterations
  • Data: Special format with nodes (array of {name}) and links (array of {source, target, value})

Style Features: Node width, padding, colors, link opacity

Example: User flows, budget flows, energy diagrams.

Date/Time Elements​

DatePicker​

Single date selection.

Runtime Behavior: Material-UI DatePicker with dayjs integration. Outputs formatted string.

Properties:

  • Control Variable: Variable to store date string
  • Date Format: YYYY-MM-DD, MM/DD/YYYY, or DD/MM/YYYY

Style Features: Border, background, font styling

Example: Birth date, appointment date, deadlines.

DateRangePicker​

Date range selection (start and end).

Runtime Behavior: Dual date inputs with range validation. Stores array of two dates.

Properties:

  • Control Variable: Variable to store array [startDate, endDate]
  • Date Format: Format string

Example: Booking systems, reports, filters.

Authentication Elements​

Login​

Complete authentication interface.

Runtime Behavior: Renders Google Sign-in and Email Link authentication. Handles redirects and terms display.

Properties:

  • Redirect URL: Page to navigate after successful login

Example: Application login page, protected area entry.

Logout​

Sign-out button.

Runtime Behavior: Triggers logout and clears session.

Example: Navigation bar, settings menu.

Styling and Responsive Design​

Style Architecture​

Every element has two types of styling:

  1. Properties: Data and behavior configuration
  2. Style: Visual appearance (CSS-like properties)

Responsive Breakpoints​

The editor supports device-specific styling via breakpoints:

  • Small: 0-600px
  • Medium: 600-960px
  • Large: 960-1280px
  • Extra Large: 1280px+

To use responsive styling:

  1. Click the device icon next to any style property
  2. Enable breakpoints you want to customize
  3. Enter values for each breakpoint
  4. The runtime automatically applies the correct value based on screen width

Device Conditional Rendering​

Elements can be hidden or shown based on device size:

  • Enable "Render conditionally on device size" in Device Style Settings
  • Set minimum and maximum screen sizes for visibility
  • Useful for mobile-specific menus or desktop-only sidebars

Common Style Categories​

Container Style:

  • Padding (top, bottom, left, right)
  • Flex direction (vertical/horizontal)
  • Gap (spacing between children)
  • Justification and alignment
  • Overflow behavior (visible, scroll, hidden)

Visual Style:

  • Background color
  • Border (style, width, color, radius)
  • Width/Height (auto, pixels, percentages)
  • Min/Max constraints
  • Box shadow (x, y, blur, spread, color)

Layout Style:

  • Margins
  • Position (relative vs absolute)
  • Z-index (layering)
  • Flex grow (space distribution)
  • Align self (individual alignment)

Font Style:

  • Font size and weight
  • Color
  • Text alignment
  • Gutter bottom (spacing after text)

Front-end Actions​

Front-end actions allow client-side logic without workflow execution. They consist of:

Structure​

  • Event: Trigger (currently supports "click")
  • Conditions: Criteria that must be met for actions to run
  • Tasks: Actions to perform

Condition Types​

  • Variable: Compare form variable value (Equal/Not Equal)

Task Types​

  • Set Variable: Update a form variable value
  • Set Element Data: Update another element's data property
  • Load Page: Navigate to a different page

Example Use Case​

A "Submit" button with:

  1. Condition: Variable "agreedToTerms" equals "true"
  2. Task: Set variable "status" to "submitted"
  3. Task: Load page "Confirmation"

Keyboard Shortcuts​

  • Ctrl/Cmd + C: Copy selected elements
  • Ctrl/Cmd + V: Paste elements
  • Ctrl/Cmd + Z: Undo
  • Ctrl/Cmd + Shift + Z: Redo
  • Delete: Remove selected elements

Best Practices​

  1. Use Containers: Wrap related elements in Containers for easier layout management
  2. Component Reuse: Create components for repeated UI patterns (headers, footers, cards)
  3. Responsive First: Design for mobile (Small breakpoint) first, then enhance for larger screens
  4. Naming: Give elements descriptive names in the hierarchy for easier navigation
  5. Variables: Use the Control Variable property to bind form inputs to workflow variables
  6. Conditional Rendering: Use "Show Conditionally" for simple visibility toggles, "Device Conditional" for responsive design
  7. Testing: Use device emulation to test all breakpoints before publishing