Module Builder Overview

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.

Platform Enhancements

Version 9.0.0 introduces the following capabilities in the Module Builder.

• Multi-view canvas: Config View, UI View, and Logic View let Creators switch between component configuration, visual layout, and server-side logic in a single workspace.

• Component Auto Apply: Configuration changes stage as Creators work. Edit across as many components as needed, verify in UI View, and save once when everything is ready. Changed components are marked as the work proceeds, and the full set can be applied or discarded together.

• UnqorkAI integration: The Build Agent generates modules, builds logic, and creates test cases from natural language prompts.

• Smart Components: A rebuilt component model where each definition propagates changes to every module using it on publish. Creators build Smart Components using the Build Agent.

• Explorer panel: A full workspace file tree gives Creators direct access to modules, workflows, and data collections without leaving the builder.

• Module Tests: Auto-generated acceptance tests validate module behavior based on requirements and edge cases.

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 Tools 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.

Browser Preview

Canvas Views

The canvas has three views. Each surfaces a different layer of the 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.

Ellipsis Menu and Dev Overlay

The (ellipsis) menu in the module header provides module-level actions. These include 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, including the API Debugger for sending requests to any Unqork API and inspecting execution results.

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 View 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.

View in Express opens the module in a new browser tab using the Play button in the module header. For modules inside an application, the button opens a menu with View in App and View Module Only. The full browser context is available — Creators have access to DevTools, live interaction testing, and validation in production-matching conditions.