Module Builder Page

The Module Builder page is where Creators build and edit modules in the Unqork 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 arranged from left to right: 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.

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 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 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 and 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:

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.

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.

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	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. Select Editing to enable editing, or select Viewing to disable editing and interact with the module as end-users would.
Save	Saves the current state of the module (). The drop-down includes Update and Save and Save as Snippet.
(ellipsis)	Opens a menu of module-level actions. See Module Actions below.

Module Actions

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

Action	Description
Preview in Express	Opens the module in Express View for testing in a new browser tab.
Accessibility Check	Scans the module for accessibility issues like missing labels, insufficient color contrast, and keyboard navigation gaps. Results display inline.
Modify Module	Manage the module definition. Includes the following: Copy Module, Paste at Top, Paste at Bottom, Replace All, Duplicate, Rename, Export, and Import.
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	Opens the module comments panel.
Share to Library	Promotes components to the Smart Component Library.
Clear Module	Removes all components from the module. This action cannot be undone.
Delete Module	Permanently deletes the module from the application. This action cannot be undone. Not available for entrypoint modules.

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:

Right Panel

The right panel displays the Explorer, the workspace file tree for opening modules, workflows, and data collections. See Explorer for the full reference.