---
title: "Module Builder Page"
slug: "module-builder-page"
tags: ["module-builder"]
status: "update"
updated: 2026-10-15T14:25:57Z
published: 2026-10-15T14:25:57Z
canonical: "docs.unqork.io/module-builder-page"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Module Builder Page

The Module Builder page is where Creators build and edit modules in the UnqorkAI platform. Each module controls the user interface, business logic, and data behavior for one screen or process in the application.

The page has five panels: the **Build Agent**, the **Component Tray**, the canvas (the primary editing area), the **Component Properties** panel, and the **Explorer**. All panels except the canvas are collapsible and resizable by dragging their dividers.

![[docs-mockup:DocsModuleBuilderMockup] Module Builder panel overview](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261015_142556_3abc637c44a848a5b0a29a395162af07.png?sv=2026-02-06&spr=https&st=2026-11-04T08%3A55%3A03Z&se=2026-11-04T09%3A55%3A03Z&sr=c&sp=r&sig=%2FwhmSNbSkbsDqiaIJwdCXr3t2tqwQFbs0TKYrUblEV0%3D)

## Left Panel

The left panel displays the **Build Agent** panel, where Creators interact with the Build Agent to assign tasks, review plans, and track progress. See [Build Agent](/unqorkai/docs/build-agent-overview) for the full reference.

## Canvas

The center canvas displays the active view of the module and is split into three sub-panels. The tab bar above the canvas tracks open modules and pages. See [Navigating the UnqorkAI Platform](/unqorkai/docs/navigating-the-unqork-platform) for tab management options including pin, close group, and keyboard shortcuts.

### Canvas Toolbar

The canvas toolbar sits above the component list and provides controls for the active view. The following controls are available in Config View:

| Control | Description |
| --- | --- |
| **Search** | Filters the component list by name. |
| **Legacy Canvas** | Toggles a visual preview of component contents inside each row on the canvas. |
| **Sort** ▾ | Orders the component list. Options: **Default** (insertion order), **By Type** (grouped by component type), and **Alphabetical**. |
| **Undo** | Reverts the most recent change to the canvas. |
| **Redo** | Reapplies the most recently undone change. |

In UI View and Logic View, the toolbar also includes a **Direct Select** toggle for lasso selection and zoom controls.

### Component Tray

The left sub-panel of the canvas lists all available components organized by library. Use the **Components** tab to browse and drag components into the canvas. Use the **Outline** tab to see the module's structural hierarchy. In UI View and Logic View, the tray displays view-specific tools instead of the component library. See [UI View](/unqorkai/docs/ui-view) and [Logic View](/unqorkai/docs/logic-view) for details.

The tray includes a search bar for filtering by component name, and a library selector drop-down with the following options:

| Option | Description |
| --- | --- |
| **Default Library** | All available components organized by category. |
| [**Data Models**](/unqorkai/docs/data-models-overview) | Data model field components linked to the workspace. |
| [**Snippets**](/unqorkai/docs/saving-a-snippet-1) | Saved component configurations available for reuse. |

### Canvas

The center sub-panel is the primary editing area. It displays every component in the module as a list of rows. Selecting a row opens that component's settings in the Properties panel. The canvas is the only sub-panel that cannot be collapsed.

### Component Properties

The right sub-panel of the canvas displays the **Properties panel** for the component currently selected. When no component is selected, the panel is empty.

The selected component's name displays in a header row with three icons:

| Action | Description |
| --- | --- |
| **Tags** | Assign labels to the component for categorization and search. |
| **Notes** | Add a comment or description to the component for team reference. |
| (**ellipsis**) | Opens a menu with Copy Settings, Paste Settings, Pin, Collapse All, and Permissions. |

For a full reference of all component settings, see [Component General Settings](/unqorkai/docs/component-general-settings).

### View Toggler

The **View Toggler** is a set of three buttons in the canvas toolbar, to the left of the search bar. Selecting a button switches the active view between **Config View**, **UI View**, and **Logic View**.

| View | What it displays |
| --- | --- |
| [**Config View**](/unqorkai/docs/config-view) | The canvas and component tray for adding and arranging all components. Config View is the default view when opening a module. |
| [**UI View**](/unqorkai/docs/ui-view) | A live preview of the module as it displays to end-users. |
| [**Logic View**](/unqorkai/docs/logic-view) | A canvas for building logic components that process data and actions. |

Switching views does not reload the canvas or lose unsaved changes.

### Module Header

The module header runs across the top of the canvas and remains constant across all views.

| Control | Description |
| --- | --- |
| [**Definition**](/unqorkai/docs/tools-dropdown) | Opens a drop-down with module-level tools: Tests, Transforms, Translations, and History. |
| **Last saved** | Displays when the module was last saved and by whom (for example, "Last saved 2 minutes ago by Alex"). When another Creator has the module locked, this area displays a lock icon and the name of the lock owner instead. |
| **Editing** | A drop-down that sets the current mode. **Editing Mode**: Enables editing. Module-changing actions in the toolbar require Editing mode. **Viewing Mode**: Prevents accidental edits. Creators can view components and their settings but cannot modify the module. Disabled actions display one of two tooltips: "Switch this module to Editing to change it" when no lock is held, or "Another user has this module locked for editing" when another Creator holds the lock. |
| **View in Express** (**Play**) | Opens the module in [Express View](/unqorkai/docs/express-view) in a new browser tab. On a module that belongs to an application, it opens a menu with **View in App** and **View Module Only**; otherwise it opens the single available destination directly. API modules display **Server-Side Execute** here instead and preview from the ellipsis menu. |
| **Save** | Saves the current state of the module (). The drop-down includes **Update and Save** and **Save as Snippet**. |
| ![EllipsisVertical](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261015_142556_e4de32b0594e4c32be6e820cd2ac8946.svg?sv=2026-02-06&spr=https&st=2026-11-04T08%3A55%3A03Z&se=2026-11-04T09%3A55%3A03Z&sr=c&sp=r&sig=%2FwhmSNbSkbsDqiaIJwdCXr3t2tqwQFbs0TKYrUblEV0%3D) (**ellipsis**) | Opens a menu of module-level actions. See [Module Actions](/unqorkai/docs/module-builder-page#module-actions) below. |

### Module Actions

The (**ellipsis**) menu in the module header contains module-level actions.

| Action | Description |
| --- | --- |
| **View in Express** | API modules only. Opens the module in Express View for testing in a new browser tab. Every other module previews from the **Play** button in the module header instead. |
| **Accessibility Check** | Runs an automated accessibility scan on the Smart Components in the module and reports the results. The scan covers Smart Components only and does not check other components. If the module contains no Smart Components, the check displays the message **Found no Smart Components in the preview** instead of results. Identifies common issues including missing labels and insufficient color contrast, but does not replace manual testing with tools like WAVE, Lighthouse, or a screen reader. See [Accessibility Check Results](/unqorkai/docs/module-builder-page#accessibility-check-results). |
| **Modify Module** | Manage the module definition. Includes the following: Copy Module, Paste at Top, Paste at Bottom, Replace All, Duplicate, Rename, Export, and Import. Copy Module, Duplicate, and Export are available in any mode. Paste at Top, Paste at Bottom, Replace All, Rename, and Import require [Editing mode](/unqorkai/docs/module-builder-page#module-header). |
| [**Module Settings**](/unqorkai/docs/module-settings) | Module name, description, type, and configuration. |
| **Undo** | Reverts the most recent change to the module. |
| **Redo** | Reapplies the most recently undone change. |
| **Add to Agent Context** | Adds the module to the Build Agent's context for the current session. Displays as **Remove from Agent Context** when already in context. Removing it prevents the Agent from using the module's configuration when generating code or answering questions. |
| **Add To Favorites** | Stars the module for quick access from the workspace switcher. |
| [**Comments**](/unqorkai/docs/comments) | Opens the module comments panel. |
| **Share to Library** | Promotes components to Library Elements. |
| **Clear Module** | Removes all components from the module. This action cannot be undone. Requires [Editing mode](/unqorkai/docs/module-builder-page#module-header). |
| **Delete Module** | Permanently deletes the module from the application. This action cannot be undone. Not available for entrypoint modules. Requires [Editing mode](/unqorkai/docs/module-builder-page#module-header). |

#### Accessibility Check Results

While the scan runs, Accessibility Check displays a pill. When the scan finishes, a toast notification reports the outcome. If the scan finds issues, an alert displays in the module toolbar. The pill and the alert display only when UnqorkAI is enabled in the environment.

- **Checking a11y…**: A pulsing pill with a warning triangle icon displays while the scan runs and disappears when the scan finishes.
- **Accessibility check passed**: A toast notification confirms the scan found no critical or serious issues. The full message reads "Accessibility check passed — no critical or serious issues found."
- **Found no Smart Components in the preview**: A toast notification displays when the module has no Smart Components to scan. The message suggests opening the Preview view and trying again.
- **a11y issues**: A non-blocking alert in the module toolbar displays the count of issues found, like **3 a11y issues**. When the count of affected elements differs, the alert adds it in parentheses. Select **Remediate** to send the findings to the Build Agent for a fix plan. Select the close button to dismiss the alert.

### Definition Drop-Down

The **Definition** button in the module header opens a drop-down with module-level tools and configuration panels. The drop-down includes the following tools:

| Tool | Description |
| --- | --- |
| [**Definition**](/unqorkai/docs/definition) | Return to the module canvas and switch between Config View, UI View, and Logic View. |
| [**Tests**](/unqorkai/docs/tests) | Test cases Creators can run against the module. |
| [**Transforms**](/unqorkai/docs/transforms) | Data transformations applied when the module runs. |
| [**Translations**](/unqorkai/docs/translations) | Localization strings for multi-language support. |
| [**History**](/unqorkai/docs/module-history) | View and restore previous versions of the module. |

## Right Panel

The right panel displays the **Explorer**, the workspace file tree for opening modules, workflows, and data collections. See [Explorer](/unqorkai/docs/explorer-overview) for the full reference.

---

**Changelog**

| Date | Change |
| --- | --- |
| 2026-10-14 | See Also: updated Browser Preview link for the article's move to Previewing Applications. |
| 2026-10-14 | Module Actions: Accessibility Check description now states the scan covers Smart Components only. Added Accessibility Check Results section covering the Checking a11y… pill, pass notification, issue alert, and no-Smart-Components message. |
| 2026-08-28 | Module Header: View in Express moved out of the ellipsis onto a Play button left of Save, with a View in App / View Module Only menu; the ellipsis entry now covers API modules only. |
| 2026-08-21 | Module Actions: Preview and Preview with App Context replaced by the View in Express fly-out (In App / Module Only). |
| 2026-10-06 | Module Header: Editing row updated to describe lock-gated actions and tooltip messages. Module Actions: Modify Module, Clear Module, and Delete Module rows updated to note Editing mode requirement. |
| 2026-09-16 | Clarified Accessibility Check description — replaced "scans for issues" with "automated scan" and added caveat that manual testing is needed for full compliance. |
| 2026-07-31 | Added full-layout screenshot; icon columns merged inline; ellipsis menu updated with Add to Agent Context, Favorite, and Accessibility Check. |
| 2026-07-30 | Code sweep: View Toggler order corrected to Config→UI→Logic; Config View icon fixed; View in App removed from header (now Preview/Preview with App Context in ellipsis); Settings removed from Definition Drop-Down (it is in the ellipsis menu); ellipsis menu updated with full action list. |
| 2026-07-30 | Left panel: replaced "Qobi" with "Build Agent"; removed "manage a knowledge base". |
| 2026-07-20 | Updated interactive image to the new five-panel Module Builder layout. Updated documentation to match: Agent Chat in the left panel; Component Tray, Component Tree, and Component Properties as three canvas sub-panels; Explore in the right panel. |
| 2026-07-07 | Added interactive image with clickable hotspots for Left Panel, Canvas, and Right Panel. Promoted Left Panel, Canvas, and Right Panel to top-level sections; moved View Toggler and Module Header under Canvas. |
| 2026-06-30 | New hero screenshot. Renamed Toolbar → Module Header with correct controls (Definition, Show/Hide Toolbar, Editing/Viewing mode, View in App, Save, ⋮). Module header ⋮ corrected: Update and Save + Save as Snippet (was Module History/Snippets/Service Logs). Definition drop-down: Debugger → History. Right Panel corrected to File Explorer. Properties panel: added Collapse All, removed Component Docs; More now shows Permissions only. Left Panel simplified to Agent Chat cross-reference. Canvas updated with view-article cross-references. Definition Drop-Down section renamed from Tools Drop-Down. |
| 2026-06-30 | Config View is the default view when opening a module. |
| 2026-05-28 | Renamed "Definition Dropdown" → "Tools Drop-down" with corrected links; renamed "View Selector" → "View Toggler"; updated Canvas section and toolbar table to reference View Toggler and Tools Drop-down. |
| 2026-05-22 | Added inline icons for all panels; expanded Understand panel with Components, Deep Dive, and Dependencies sections; expanded Properties panel with full tab and action icon reference. |
| 2026-05-22 | Initial publication. |

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

The Unqork front-end application framework that delivers Creator-built applications to end-users. Express is the layer end-users interact with—the published forms, screens, and navigation built in the Module Builder. Express is distinct from Express View, which is a Creator-facing preview tool in the IDE.

APIs (application programming interfaces) are a set of protocols and definitions developers use to build and integrate application software. APIs act as the connective tissue between products and services.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

A screen reader is a browser accessibility tool that plays an audio description of the text and alternate text on a website.

Elements are are what you use to build Unqork applications. Elements include modules, workflows, Data Collections, Data Schema, and Record Collections.

A string is an object that represents a sequence of characters. Strings typically hold data represented in text form.