---
title: "Smart Component Logic View"
slug: "smart-component-logic-view"
status: "update"
updated: 2026-10-22T15:50:00Z
published: 2026-10-22T15:50:00Z
canonical: "docs.unqork.io/smart-component-logic-view"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.unqork.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Component Logic View

A Smart Component is a reusable piece of logic or UI that Creators can embed in any module across the workspace. It reads inputs, performs computations and state changes, and returns outputs every time a module uses it. Smart Component Logic View displays a component's internal logic as ordered chains. Creators can follow exactly what the component does: which values it reads, which steps it runs, and what it returns. Logic View is read-only and is available for all Smart Component types.

![[docs-interactive-image:{"surface":"smart-components/logic-view"}] Smart Component Logic View with the Data and Chains panel, chain canvas, and Details panel](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_cdee705c710b421386984fb279668f2a.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D)

## Opening Logic View

There are two ways to open Logic View.

**From the Smart Components Hub**:

1. Click ![LibraryBig](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_b60a9f8e2f994e928c0f1c0b0fc3fbac.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Libraries** in the global header, then select ![Puzzle](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_1829b6bf5e914312b70085d144f8aa47.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Smart Components Hub**.
2. Select a component to open it in the Smart Component Editor.
3. Select **Logic** in the view tabs.

Logic Smart Components and Query Smart Components open directly in Logic View. UI Smart Components open in UI View by default. Select **Logic** in the view tabs to switch.

**From a module**:

1. In the Module Builder, select a Smart Component on the canvas.
2. In the Properties panel, select the component name at the top of the panel to open the Focused Component View.
3. Select **Logic** in the view tabs.

## Data and Chains Panel

The left panel, titled **Data & Chains**, lists all the values a component works with and the chains that define its behavior. The sections available depend on the component type. Most sections have a search box.

Value rows in the From Inputs, State, and Computed sections each have a ![SquareArrowUpRight](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_570ae128b9174ed493dc5f8f8a84c208.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) button that opens a **value detail panel** showing more information about that value. The tooltip on the button changes based on the type of value.

### From Inputs

The **From Inputs** section lists values the host module passes in when it uses the component. In Query Smart Components, this section is labeled **Parameters**.

Each input row displays the input name and how many chains use it. Select the ![SquareArrowUpRight](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_570ae128b9174ed493dc5f8f8a84c208.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **See rules & source** button on a row to open the value detail panel for that input.

The value detail panel for an input displays the following:

- The input's data type.
- **Used By**: the chains that read this input, with the chain name and how the chain uses the value.

### State

The **State** section lists internal values that stay in memory between renders. In Query Smart Components, this section is labeled **Form Collections**.

Each state row displays the value name and how many chains use it. Select the ![SquareArrowUpRight](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_570ae128b9174ed493dc5f8f8a84c208.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **See rules & source** button on a row to open the value detail panel.

The value detail panel for a state value displays the following:

- The value's data type.
- **Used By**: the chains where this value is listed on the IO shelf.

### Computed

The **Computed** section lists values that are derived from other values in the component. In Query Smart Components, this section is labeled **Result**.

Each computed value row displays the value name, a short description of its source, and how many chains use it. Select the ![SquareArrowUpRight](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_570ae128b9174ed493dc5f8f8a84c208.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **See how it is computed** button on a row to open the value detail panel.

The value detail panel for a computed value displays the following:

- **Result of computation**: the value's data type.
- **How it works**:
  - **Uses**: the inputs and other values this computation reads, with the role each plays.
  - **The rule**: the expression or formula that produces the value.
  - **Used by**: the chains that use this computed value and how they use it.

### Outputs

The **Outputs** section lists values the component sends back to the host module. This section displays only in Logic Smart Components. Output rows do not have a value detail panel button.

### System Logic

The **System Logic** section lists internal platform chains that the component uses but Creators did not author, including validation . These chains are read-only and display for observability only.

### Chains

The **Chains** section lists every chain in the component. Each row displays a numbered **locator tag** (a teal square), the chain name, and the number of values it uses.

Select a chain row to focus that chain on the canvas. All other chains are hidden until the canvas background is selected to return to the full view.

## Chain Canvas

The center of Logic View is the chain canvas. Chains appear as vertical columns. Each column maps to one trigger and has a fixed width. The canvas pans horizontally. Nothing is draggable.

**Numbered locator tags** (teal squares: 1, 2, 3...) appear in chain column headers and in the **Chains** section of the panel. The number on the tag matches the row in the panel to the column on the canvas.

### Chain Anatomy

Each chain column has four parts, from top to bottom.

![[docs-interactive-image:{"surface":"smart-components/chain-anatomy"}] Anatomy of a Smart Component logic chain: IO shelf, narration band, body, and terminal](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154958_1b06285dbe5e4afeb4e827268a274ec0.png?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D)

- **IO shelf**: The values this chain reads at the start. Labeled **Reads** for render chains and **Uses** for all other chain types. Each row displays the value's origin type (, Computed, and so on) and its name.
- **Narration band**: A plain-language sentence between the IO shelf and the body that describes the causal relationship between the values read and the action the chain takes. For example: "Because of these values, this structure renders."
- **Body**: The ordered steps of the chain, including computations, state writes, calls to helper functions, and conditions. Some simple chains have no body steps and go directly from the narration band to the terminal.
- **Terminal**: The chain's final action. A terminal is one of three types: **Renders**, **Notifies**, or **Returns** an outcome. The terminal card displays what value or structure the chain produces.

### Chain Controls

Each chain column header contains five controls to the right of the locator tag.

| Control | Description |
| --- | --- |
| ![UnfoldHorizontal](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_8b3a2c23f9a5473893e3bb7e926fcaca.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **See All Chains** | Returns to the full canvas view when a chain is focused. When no chain is focused, this button displays as **Focus** and isolates the selected chain. |
| ![Code](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_10a3d4b03a064a6b92b275991f37b389.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Inspect** | Opens the Code panel with the focused chain's source lines highlighted. Other lines are dimmed. |
| ![Sparkles](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_997ea9abc73a49929976113aa2e939f2.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Add to Agent Context** | Attaches the focused chain as a context chip in the Build Agent composer. Available when UnqorkAI is enabled. |
| ![Waypoints](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_3b810593ce8b4c068072f1d0976bef09.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Expand Full Execution** | Expands the complete execution of the focused chain on the canvas, showing every downstream chain it calls. |
| ![Layers](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_20c4f0ab6d904372995b3c82ad7da5a3.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Expand Full Composition** | Expands the full composition of the chain, rendering every composed Smart Component inline. |

### Chain Types

The type of a chain depends on when it runs.

| Type | When it runs |
| --- | --- |
| **Render** | Every time the component renders on screen. |
| **Action** | When an end-user interaction or an external trigger fires. |
| **Reaction** | When a value it watches changes. |
| **Invoke** | When another component or the host module calls this component. |

## Right-Side Panels

Three panels can open on the right side of the canvas. Only one panel is open at a time.

| Panel | How to open | Available for |
| --- | --- | --- |
| **Details** | Opens automatically when Logic View loads. Shows **About** info (type, category, description) and **Used In** (which workspaces and modules use this component). | All Smart Component types |
| **Code** | Select ![Code](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_10a3d4b03a064a6b92b275991f37b389.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Inspect** in a chain column header. Shows the component's source code with the focused chain's lines highlighted. Other lines are dimmed. | Logic Smart Components on local development environments; Query Smart Components in all environments |
| **UI** | Select **UI** in the toolbar. Shows a live, interactive preview of the component with bolt badges (a lightning bolt icon) marking elements the focused chain touches. | UI Smart Components |

Select a bolt badge in the **UI** panel to open Logic View with that chain focused and the **UI** panel still open.

## Canvas Interactions

| Action | Result |
| --- | --- |
| Select a chain column header | Focuses that chain and hides all other chains. |
| Select the canvas background | Returns to showing all chains. |
| Select a chain row in the panel | Same as selecting that column header. |
| Select ![MousePointerClick](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_5ba1ce500ea8472586c0b2fcc61630a2.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Direct Select** in the toolbar | Toggles Direct Select mode. In Direct Select mode, selecting cards adds them to the selection and a lasso is available. |
| Select ![LocateFixed](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_36b2f0b538134362aeb1891b0f71a9e8.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Go to First Chain** in the toolbar | Scrolls the canvas to the first chain. |
| Select ![UnfoldHorizontal](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_8b3a2c23f9a5473893e3bb7e926fcaca.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D) **Show All Chains** in the toolbar | Drops any focused chain and returns to the full canvas view. |
| Scroll | Pans the canvas left or right. |
| Select the **100% ![ChevronDown](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/api_upload_20261022_154959_ba5c414f344c4cd0af61d35a12a0915d.svg?sv=2026-02-06&spr=https&st=2026-11-08T18%3A01%3A01Z&se=2026-11-08T19%3A01%3A01Z&sr=c&sp=r&sig=CrCRT8z2pftXvWWJdLdj5h3hbv%2FGs6ZaNLo%2Fm3JE%2FQ0%3D)** zoom control | Opens the zoom preset menu. The slider and field also accept a custom value. Zoom range is 10% to 400%. |
| Select **Fit to View** in the toolbar | Resets zoom and centers all chains in the visible area. |

### Keyboard Navigation

The canvas has one tab stop. After the canvas has focus, use arrow keys to move between cards and chains.

| Key | Action |
| --- | --- |
| `↓` / `↑` | Move between steps within a chain. |
| `→` / `←` | Move between chains. |
| `Home` / `End` | Jump to the first or last card in the chain. |
| `Enter` | Move focus into the focused card's first control. |
| `Space` | Add the focused card to the selection. |
| `Esc` | Return focus from a card control back to the card. |

These three shortcuts are active when the canvas has focus and are customizable in **Settings**.

## Query Smart Components

Query Smart Components use the same Logic View as Logic Smart Components. A Query Smart Component has one chain: an **Invoke** chain that displays the MQL query pipeline as ordered stages.

Each stage card displays the following:

- The stage name (for example, `$match`, `$lookup`, or `$group`).
- The values it reads and the fields it produces.
- For `$lookup`: both collections involved, the join keys, and a sub-pipeline panel connected by a dashed line.

The **Parameters** section in the panel lists query parameters defined with `:name` tokens in the query source.

> [!NOTE]
> `console` is not available in query pipeline code. Calling `console.log()` or any other console method fails validation with the error "Identifier 'console' is not defined." To debug query pipeline behavior, use the [API Debugger](/unqorkai/docs/api-debugger) or review logs in the [Logs Dashboard](/unqorkai/docs/logs-dashboard).

---

**Changelog**

| Date | Change |
| --- | --- |
| 2026-10-08 | Added console restriction note to Query Smart Components section. |
| 2026-09-04 | POV fixes (you/your → Creators/the); "Smart Components" → "Smart Components Hub" in nav path; bold colon placement fixes; "shows/appears" → "displays" throughout; "user interaction" → "end-user interaction"; "IDE" → "platform" in See Also; fixed three broken See Also paths to include /public/. |
| 2026-08-24 | Updated: added Chain Controls table (five header buttons with icons), added toolbar canvas interactions with icons, replaced shortcut table with DocsShortcutTable, replaced keyboard key table with kbd elements, added Sparkles icon to Add to Agent Context heading, removed Reusable Logic (not yet available), fixed EM dashes in prose. |
| 2026-08-24 | Initial publication. Covers the rebuilt chain canvas: two opening paths, Data & Chains panel with per-section value detail panels, chain anatomy, chain types, right-side panels, keyboard navigation, Add to Agent Context, and Query Smart Component display. |

The UI (user interface) is a device's end-user interaction and communication point. It can include display screens, keyboards, and mouse. It is also how a user interacts with your application.

Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform.

Enter inputs components and actions you want the component to perform..

Data types are a classification of data that determines how it is stored and interpreted.

Rendering is the process of loading components and displaying the final result on the front-end screen.

Enter outputs components and actions you want the component to perform.

Focus indicates the element of the graphical user interface which is currently selected to receive input. Elements with focus sometimes have an accesibility border highlighted around them.

Triggers activate another component when certain requirements are met. Trigger types include Concurrent, Post, and Error. Some components do not have the ability to trigger others.

Rendering is the process of loading components and displaying the final result on the front-end screen.

A definition

Rendering is the process of loading components and displaying the final result on the front-end screen.

End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product.

Elements are are what you use to build Unqork applications. Elements include modules, workflows, Data Collections, Data Schema, and Record Collections.

A key-value pair is a fundamental data structure where a unique "key" is associated with a specific "value," used for organizing and retrieving data efficiently, like in dictionaries or databases.

A query lets you retrieve, access, manipulate, and delete data in a database.

Debugging is the process of finding and resolving errors or bugs in an application. To debug an application in Unqork, use UNQENG tools in Express View.