The Module Builder is the workspace where Creators design, configure, and test modules. A module is the main building block of any Unqork application. It controls the user interface, business logic, and data behavior for a single screen or process. Creators use the Module Builder to add and configure components, build logic flows, and connect data. The canvas has three views: Config View, UI View, and Logic View.
Module Builder vs. Classic Designer
Creators who have built in the legacy Unqork Designer (Classic Designer or UDesigner) will find the Module Builder replaces that interface. It uses a multi-view canvas with a built-in AI agent. The table below summarizes the key differences.
| Classic Designer / UDesigner | IDE Module Builder | |
|---|---|---|
| Interface | Three-panel layout: Component Tray, Canvas, Module Outline | Canvas with three views: Config View, UI View, and Logic View |
| Component palette | Fixed side panel with drag-and-drop onto canvas | Config View component tray with drag-and-drop onto canvas |
| Module metadata | Module Outline / Module Details panel | Definition drop-down (Settings, Tests, Transforms, Translations, History) |
| History and snippets | Ellipsis (…) menu options | Ellipsis (…) menu. Module History and Snippets open as dedicated pages. |
| Workspace navigation | File browser in sidebar | Explorer panel with full workspace tree |
How the Module Builder Works
Creators open a module from the workspace and land on the Module Builder page. The View Toggler in the header controls which canvas is active. Config View displays the full component tree and palette for adding and configuring components. UI View displays the end-user interface. Logic View displays the server-side state flow. The Definition drop-down gives access to module-level settings, test cases, data transforms, and translations. Selecting a component opens its settings panel on the right.
Layout and Navigation
The following articles cover the main panels and layout of the Module Builder.
| Page | Description |
|---|---|
| Module Builder Page | The full Module Builder layout — component tray, canvas views, and module header. |
| Explorer Tab | The workspace file tree for opening and managing modules, workflows, and data collections. |
| Comments | Add and manage in-module comments for collaboration. |
| Creating a Module | How to create a new module from the Explorer panel or application page. |
| Component General Settings | Settings and actions shared by every component in the Module Builder. |
| Module Builder Component Reference | An index of all components available in the Module Builder, organized by category. |
Browser Preview
| Page | Description |
|---|---|
| Browser Preview | Renders the module in its full application context with annotation tools and Send to Agent. For versioned applications, also shows version and branch controls. |
Canvas Views
The canvas has three views, each offering a different way to work with a module.
| Page | Description |
|---|---|
| Config View | The component-level configuration canvas for adding and editing components. |
| UI View | The visual layout canvas for building the end-user interface of a module. |
| Logic View | The canvas for building and managing the logic layer of a module. |
Tools Drop-Down
The Tools drop-down in the toolbar gives access to module-level tools and configuration panels. See Tools for the full reference.
| Page | Description |
|---|---|
| Definition | View module details and navigate to the canvas. |
| Tests | Run, manage, and review module test cases. Requires AI capabilities. |
| Transforms | Build and manage data transforms for the module. |
| Translations | Manage localization strings and translations. |
| Module History | View and restore previous versions of the module. |
Ellipsis Menu and Dev Overlay
The 
(ellipsis) menu in the module header provides module-level actions. These include Preview in Express, Accessibility Check, Modify Module, Comments, Add to Agent Context, Share to Library, and Clear Module. The Dev Overlay Toolbar at the bottom of the Module Builder provides runtime debugging and inspection tools.
See Module Builder Page for the full reference, including all controls, icons, and descriptions.
Key Concepts
Module
A module is a collection of components configured with settings and logic. End-users interact with modules through the production application. Creators build and modify them in the Module Builder.
Component
A component is an individual element that makes up a module, like a text field, a button, a data connector, or a piece of logic. Each component has a Property ID and a set of configurable settings. See the Component Reference for the full list.
Property ID
Every component has a Property ID, a unique identifier used to reference the component in logic, formulas, and data mappings across the module. Property IDs must be unique in a module. See Property ID Naming Conventions for naming standards and constraints.
UI View and Preview in Express
UI View renders the module inside the canvas with the application's full styles applied, exactly as end-users see it. Use it to verify layout and visual design without leaving the Module Builder.
Preview in Express opens the module in a new browser tab. The output looks the same as UI View. The full browser context is available, giving Creators access to DevTools, live interaction testing, and validation in production-matching conditions.
Changelog
| Date | Change |
|---|---|
| 2026-06-01 | Rewrote How the Module Builder Works; added section intros throughout; expanded Express View, Property ID, and the Build Agent sections; corrected links to include /public/ segment; updated comparison table. |
| 2026-05-22 | Initial publication. |