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, select Library 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, "Public") and the component as an open tab.
Area selector	Selects the active area: Definition, Tests, or History. In the Definition area, view tabs — UI and Logic — display to the right of the area selector.
Editing toolbar	Provides the light/dark toggle, theme selector, Direct Select, accessibility check, viewport selector, recenter, 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, recenter, 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 compiled 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/Dark toggle	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.
Accessibility Check	Runs an accessibility audit on the component. If issues are found, a prompt lets the Build Agent create a fix plan.
Viewport	Sets the canvas width to simulate different device sizes.
Zoom	Adjusts the canvas zoom level. Select the percentage to choose a preset or reset the view.

Logic view controls:

Control	Description
Direct Select	Activates direct selection mode on the logic canvas.
Recenter	Resets the canvas view to frame the component.
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, category, description, created by, modified by, and draft status.
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.

Saving and Edit Mode

Smart Components use a two-step publish model to protect all modules that use them.

Save: Writes changes into a private draft buffer, not yet live in any module. Only one Creator can own the draft at a time.
Review Changes: Opens the draft's review, where the draft is published or discarded. Previous revisions are accessible in the History area if a rollback is needed.

Review Changes displays in the SC Editor toolbar when the Creator holds the draft. It opens a review of that one draft, which states where the component is used before either action is taken:

Publish Changes: Publishes the draft as the live definition. The change takes effect immediately in every module using the component. If publishing leaves consuming modules holding settings the new definition no longer supports, the review lists those modules. Creators can then fix them manually.
Discard Changes: Deletes the draft. The published version stays exactly as it is. Where discarding would also remove configuration that modules have set up against the draft, the review lists what goes and asks for confirmation first.

Publishing is withheld when another workspace's component builds 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 stays available in every case, because it is the only way back out of draft mode.

Creators can also reach the same review without opening the editor. Select Publish Draft from the component's row menu in the Smart Components Hub or the Explorer panel.

If another Creator opens the same component for editing while a draft is open, they can take over the draft. The new holder takes over from the current saved state of the draft. When this happens, the original holder receives a notification naming the new holder, their editor stops accepting saves, and Review Changes is withheld. Any unsaved changes stay on screen. To resume, take the draft back from the draft menu in the toolbar.

Review Changes is disabled when there are unsaved changes. Save first, then review.

Component Actions

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

Action	Location	Description
Make Public	Toolbar button	Makes the component visible to the Build Agent across the environment and reusable in any module. Displays only while the component is Private. This change is permanent. See Public and Private.
Accessibility Check	⋮ menu	Opens the accessibility checker for this component. Visible only when UnqorkAI is enabled in the environment.
Add to Agent Context	⋮ menu	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	⋮ menu	Creates a copy of this component in the library. Disabled while the Creator holds an open draft on this component.
Promote	⋮ menu	Opens the Promote dialog. Select a target environment and confirm to promote the component. Optionally include composed Smart Components as dependencies.
Export	⋮ menu	Downloads the component definition as an exportable file.
Settings	⋮ menu	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	⋮ menu	Permanently removes the component. This action cannot be undone.

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 in the environment.

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 Escape 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 ⋮ menu also offers Edit Base, which opens the component in the Smart Components Hub in a new tab.

Public vs. Private Behavior

For Public components, the Focused Component View is read-only. A banner displays: "Public Smart Components cannot be edited inside a module." The Tests and History areas do not allow write actions.

For Private components, 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 ⋮ 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-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.