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.
Editor Layout
The editor layout depends on the component type and active view.
UI Smart Components in UI view include the following areas:
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 in Logic view include the following areas:
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. Displays 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 the following 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. |
History Area
The History area lists the revisions of a Smart Component, grouped by date: Today, This Week, This Month, and then one group for each earlier month. Each revision displays its date and time, its author, and its usage (Public or Private). The current revision displays a Current badge. The area displays the 50 most recent revisions. When more exist, a note reads Showing the 50 most recent of N, where N is the number of revisions that match the current filters.
Use the following filters to find a revision:
Filter | Description |
|---|---|
Search by author | Limits the revisions to those made by a specific Creator. |
Date range | Limits the revisions to a period. Options include: All Time (default), Today, This Week, or This Month. |
Select a revision to preview the component as it was at that time. The preview displays the revision's date, time, and author. Click Restore to return the component to that revision. A confirmation prompt explains that the restore replaces the component's current definition and name with the revision's. The current version stays in the history, and every module that uses the component picks up the change. Restore is unavailable on the current revision.
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
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. The view is read-only. See Smart Component Logic View. |
Editing Toolbar
The editing toolbar sits below the area selector. Controls vary by view.
The UI view includes the following 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. The selection lasts for the current session only and does not apply the theme to an application. See Applying a Theme. |
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. |
The Logic view includes the following 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 includes the following sections.
Section | Description |
|---|---|
About | Displays the component's identity: type, category, usage (Public or Private), draft status, created and modified dates, and description. |
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 displays where the component is used, then offers the following 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 like 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 Smart Components Hub. 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. It is 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 displays 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
The following 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: The component is 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 |
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-10-20 | Corrected the History area: revisions are grouped by date, the Restore confirmation is described, Restore is unavailable on the current revision, and ticket numbers were removed from the changelog. |
2026-10-19 | Added a History Area section covering the revision list, the 50-revision limit, the date range filter, the author search, and the Restore button; corrected the About description to match the Details panel labels; applied editorial and style guide fixes. |
2026-10-15 | Clarified that Change Theme is a session-only preview. |
2026-09-16 | Noted that Edit Component and Edit Base read View Component and View Base without the Smart Component edit permission. |
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. |
2026-09-08 | History area description: "versions" → "revisions". |
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. |
2026-09-03 | Rewrote Editor Layout, Editing Toolbar, and Properties Panel sections: 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. |
2026-08-31 | Updated Make Discoverable description with link to Discoverability concepts. |
2026-08-28 | Removed the Make Private toolbar action. Discoverability is now one-way: a discoverable component cannot be made private again. |
2026-09-16 | Clarified Accessibility Check description — replaced "audit" with "automated scan" and added caveat that manual testing is needed for full compliance. |
2026-08-27 | Renamed the discoverability action from Make Not Discoverable to Make Private, matching the Discoverable and Private nomenclature in the platform. |
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. |
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. |
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); 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. |
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. |
2026-08-24 | Updated Query Smart Components view name — Query Pipeline replaced by Logic View. |
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. |
2026-08-13 | Added Saving and Edit Mode section — two-step Save/Apply model, displacement behavior, Change History as rollback . |
2026-08-13 | Rewrote Component Actions table to match actual ellipsis menu: 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. Documents the rebuilt Smart Component Editor: BuilderViewShell-based layout, view sets by component type, editing toolbar, Properties panel, and component actions. |