Smart Component Editor

The Smart Component Editor is where Creators write, preview, configure, and test Smart Components. The editor uses the same shell as the Module Builder and Workflow Builder: a toolbar, area tabs, and a content area. The areas and views available depend on the component type.

To open the Smart Component Editor, click Libraries in the global header, then select Smart Components Hub. Select a component from the Explorer panel or the Dashboard to open it in the editor.

Smart Component Editor open on the DatePicker Smart Component in UI view — canvas shows the component preview, editing toolbar above with light/dark toggle and viewport controls, and Details panel on the right showing About, Mock Configuration, and Used In sections.

Editor Layout

The editor layout depends on the component type and active view.

UI Smart Components (UI view):

Area	Description
Tab bar	Displays the parent location (for example, "Smart Components Hub") and the component as an open tab.
Area selector	Selects the active area: Definition, Tests, or History. In the Definition area, the UI and Logic view tabs display to the right of the area selector.
Editing toolbar	Provides the light/dark mode toggle, theme selector, Direct Select, viewport size selector, and zoom controls.
Canvas	Renders the component live in a preview canvas.
Details panel	The right panel. Displays About, Mock Configuration, and Used In sections.

Logic and Query Smart Components (Logic view):

Area	Description
Area selector	Selects the active area: Definition, Tests, or History. Only the Logic view is available in the Definition area.
Editing toolbar	Provides Direct Select and zoom controls.
Data & Chains panel	The left panel. Shows the component's Chains, From Inputs, State, Computed, and Outputs.
Canvas	Displays the component's logic as a navigable chain graph.
Details panel	The right panel. Displays About, Mock Configuration, and Used In sections.

Editor Areas

The editor organizes content into three areas. Select an area in the area tabs to switch between them.

Area	Description
Definition	The main editing surface. Displays the component's UI preview or logic tree for editing. The views available in this area depend on the component type.
Tests	Runs the component's automated test suite. Tests verify that the component behaves as expected across defined input and output combinations.
History	Lists previous revisions of the component. Select a revision to preview it or restore the component to that state. Available for all component types.

Views by Component Type

In the Definition area, the views available depend on the component type.

UI Smart Components

View	Description
UI	Renders the component live in a preview canvas. Use the editing toolbar to activate Direct Select, adjust the viewport width, and zoom the canvas.
Logic	Displays the component's logic as an editable visual tree.

Logic Smart Components

Smart Component Editor in Logic view showing AddTwoNumbers — Data & Chains left panel with Chains, From Inputs, State, and Computed sections, logic chain canvas in the center, and Details panel on the right

View	Description
Logic	Displays the component's logic as an editable chain graph. The Data & Chains panel provides access to chains, inputs, state, computed values, and outputs.

Query Smart Components

View	Description
Logic	Displays the component's query pipeline as an ordered chain canvas. Read-only. See Smart Component Logic View.

The editing toolbar sits below the area selector. Controls vary by view.

UI view controls:

Control	Description
Light Mode / Dark Mode	Switches the canvas between light and dark mode to preview the component in both themes.
Change Theme	Selects a theme to apply to the canvas preview.
Direct Select	Activates direct selection mode for interacting with elements on the canvas.
Viewport Size	Sets the canvas width to simulate different device sizes.
Zoom	Adjusts the canvas zoom level. Select the percentage to choose a preset or fit the content.

Logic view controls:

Control	Description
Direct Select	Activates direct selection mode on the logic canvas.
Zoom	Adjusts the canvas zoom level.

Details Panel

The Details panel on the right side of the editor has three sections.

Section	Description
About	Displays the component's identity: type, visibility (Public or Private), category, description, draft status, and created and modified dates.
Mock Configuration	Displays input fields matching what a Creator configures when using this component in the Module Builder. Enter values here to test how the component renders in real time.
Used In	Lists every module that references this component, organized by Workspace and application.

Drafts and Publishing

Editing a Smart Component creates a draft. Only one Creator can hold the draft at a time. Saved changes go into the draft and are not live in any module until published. Previous revisions are available in the History area if a rollback is needed.

Review Changes displays in the toolbar when the Creator holds the draft. It is unavailable while there are unsaved changes. Selecting it opens a review that shows where the component is used, then offers two actions:

Publish Changes: Makes the draft the live definition immediately in every module using the component. If the new definition drops settings that consuming modules have configured, the review lists those modules for manual follow-up.
Discard Changes: Deletes the draft and restores the published version. If discarding would remove configuration that modules set against the draft, the review lists the affected settings and asks for confirmation.

Publishing is blocked when another workspace's component depends on the draft, or when the component is used in modules outside the Creator's access. The review states the reason and offers the Smart Components Hub, where the draft can be duplicated instead. Discard remains available in all cases.

Publish Draft is also available from the component's row menu in the Smart Components Hub and Explorer panel.

If another Creator takes over the draft, the original holder receives a notification, their editor stops accepting saves, and Review Changes is withheld. Any unsaved changes remain on screen. To resume, take the draft back from the draft menu in the toolbar.

Component Actions

Select the (ellipsis) in the toolbar to access the following actions.

Action	Description
Make Public	Toolbar button. Makes the component reusable across the environment and visible to the Build Agent. Displays only while the component is Private. This change is permanent. See Public and Private.
Accessibility Check	Runs an automated accessibility scan on the component and displays results in the editor toolbar. Identifies common issues such as missing labels and insufficient color contrast, but does not replace manual testing with tools like WAVE, Lighthouse, or a screen reader. If issues are found, the Build Agent can generate a fix plan. Visible only when UnqorkAI is enabled in the environment.
Add to Agent Context	Sends this component's logic and data to the Build Agent as context for the current session. Toggles to Remove from Agent Context when the component is already in context. Visible only when UnqorkAI is enabled in the environment.
Duplicate	Creates a copy of this component in the library. Disabled while the Creator holds an open draft on this component.
Promote	Opens the Promote dialog. Select a target environment and confirm to promote the component. Dependent Smart Components are included by default and can be unchecked before confirming.
Export	Downloads the component definition as an exportable file.
Settings	Opens the component settings dialog. Rename the component, update its description, and set its category. For Query Smart Components, also configure execution behavior and role-based access controls. See Smart Component Settings.
Delete Component	Permanently removes the component. This action cannot be undone. Components referenced by any module cannot be deleted.

Focused Component View

The Focused Component View is a Module Builder surface that opens over the canvas when a Creator selects a Smart Component. It displays the component's preview, logic, tests, and revision history in context, without leaving the module. Available when UnqorkAI is enabled and the Creator has Smart Component view permission.

The header is color-coded by state: teal for Public, slate for Private. A breadcrumb trail shows the module name, the component's instance (Property ID), and the component name. Select the module or instance crumb to return to the Module Builder canvas. Select × or press Esc to close.

Opening Focused Component View

Three entry points are available from Module Builder:

Select the component name link in the canvas node header.
Select the component name link in the Properties panel header.
Select the ⋮ (ellipsis) on a canvas node and select View.

For Public components, the canvas node (ellipsis) menu also offers Edit Base, which opens the component in the Smart Components Hub in a new tab.

Public vs. Private Behavior

The Focused Component View behaves differently depending on whether the component is Public or Private.

Public: Read-only. A banner displays: "Public Smart Components cannot be edited inside a module." Write actions are unavailable in the Tests and History areas.
Private: Full editing is available using the same surfaces as the Smart Component Editor. When the Creator holds a draft, Review Changes and Discard Draft display in the toolbar.

Actions

Action	Description
Duplicate	Creates a Private copy of this component and updates the module to reference the copy. The Focused Component View reopens on the new Private component. Available for Public components when the Creator has permission to create Private Smart Components.
Edit Component	Opens the component in the Smart Components Hub in a new tab. Available for Public components only. Equivalent to Edit Base in the canvas node (ellipsis) menu.
Make Public	Makes the component Public and publishes it. Available for Private components when the Creator has publish permission. See Public and Private.

Changelog

Date	Change
2026-09-08	Added Focused Component View section — Module Builder overlay for viewing and editing Smart Components in context; covers entry points, Public/Private behavior, and actions (EN-8038, UQE-17801).
2026-09-08	History area description: "versions" → "revisions" (EN-8038).
2026-09-04	Renamed Make Discoverable to Make Public; fixed anchor link to #public-and-private; added Add to Agent Context / Remove from Agent Context to Component Actions table (EN-8038).
2026-09-03	Rewrote Editor Layout, Editing Toolbar, and Properties Panel sections based on qa22 browser verification: corrected area/view structure; renamed Properties panel → Details panel with accurate About/Mock Configuration/Used In sections; corrected editing toolbar controls; removed Open in Editor (nonexistent label); 13 editorial fixes (EN-8038).
2026-08-31	Updated Make Discoverable description with link to Discoverability concepts (EN-8062).
2026-08-28	Removed the Make Private toolbar action. Discoverability is now one-way: a discoverable component cannot be made private again (UQE-17757).
2026-09-16	Clarified Accessibility Check description — replaced "audit" with "automated scan" and added caveat that manual testing is needed for full compliance (EN-8119).
2026-08-27	Renamed the discoverability action from Make Not Discoverable to Make Private, matching the Discoverable and Private nomenclature in the platform (UQE-17572).
2026-08-25	Updated Saving and Edit Mode — the toolbar's Publish Changes is now Review Changes, opening a single-draft review with Publish Changes and Discard Changes; documented the refusal reasons and the orphaned-settings report (UQE-17572).
2026-08-25	Updated Saving and Edit Mode — removed the Smart Component Changes entry point from the module toolbar; drafts are published or discarded from the SC Editor toolbar or the Smart Components Hub row menu (UQE-17572).
2026-08-25	Added inline icons to Component Actions table. Added Editor Areas section documenting Definition, Tests, and History areas. Added Area tabs row to Editor Layout table. Updated Views by Component Type: corrected view names to UI and Logic; removed Config View and Query Pipeline (outdated); removed Tests from Definition views (Tests is now an area). Updated Component Actions: removed Where It's Used and Change History (deleted in UQE-17395); added Make Discoverable/Make Not Discoverable as a dedicated toolbar button; added Location column to clarify toolbar vs ellipsis menu. Updated Saving and Edit Mode to reference the History area instead of Change History in the ellipsis menu. Removed Tests as a standalone section (absorbed into Editor Areas). Removed HR dividers between sections (EN-8029).
2026-08-24	Updated Saving and Edit Mode — the displaced holder now gets a notification and the toolbar's draft menu rather than an in-editor displacement banner (UQE-17572).
2026-08-24	Updated Query Smart Components view name — Query Pipeline replaced by Logic View (EN-8033, UQE-16969).
2026-08-14	Updated Saving and Edit Mode — "Apply Edit" renamed to "Publish Changes"; Smart Component Changes dialog in module toolbar documents Publish/Discard/Take Over (EN-8032, UQE-17176).
2026-08-13	Added Saving and Edit Mode section — two-step Save/Apply model, displacement behavior, Change History as rollback (EN-8006).
2026-08-13	Rewrote Component Actions table to match actual ellipsis menu (EN-8006): added Where It's Used, Change History, Duplicate Component, Promote, Export…; corrected labels; removed incorrect Share, Copy ID, and Permissions entries.
2026-08-10	Initial publication (EN-8006). Documents the rebuilt Smart Component Editor: BuilderViewShell-based layout, view sets by component type, editing toolbar, Properties panel, and component actions.