<h2>1. What Is a Step Output?</h2>A step output is the structured data returned by a node earlier in the workflow. Common examples:<ul class="accent-bullets"><li>A trigger (e.g. “Record Created in Supabase”)</li><li>A lookup or query step (e.g. “Find Contact by Email”)</li><li>A custom script or API request</li></ul>Each output contains objects and fields that can be referenced by components inside the Build Any UI node.<hr><h2>2. How Components Receive Data</h2>Each component in the UI editor supports default values and runtime bindings. These values are set using step outputs.Examples:<ul class="accent-bullets"><li>Pre-filling a Text Input with <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Step 2 &gt; user &gt; name</code></li><li>Showing a company logo in an Image component using <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Step 1 &gt; organization &gt; logo_url</code></li><li>Displaying a list of options in a Select or Checkbox from <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Step 3 &gt; planOptions</code></li></ul>These bindings can be applied to:<ul class="accent-bullets"><li>Default values</li><li>Labels and descriptions</li><li>Visibility rules</li><li>Placeholders or tooltips</li></ul><hr><h2>3. Anatomy of a Data Reference</h2>When you apply data to a component, the reference appears as a step output pill, containing:<ul class="accent-bullets"><li>The step number where the data came from</li><li>The type of object (e.g. Contact, Row, JSON, Email)</li><li>The field name being referenced (e.g. <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">email</code>, <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">company.name</code>)</li><li>Nested fields via dot notation (e.g. <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">customer.account.region</code>)</li></ul>You can always trace the origin of the value by inspecting the label on the reference.<hr><h2>4. Linked and Nested Data Support</h2>All MergePoint step outputs support linked object traversal, meaning you don’t need additional steps to access nested fields.For example:<ul class="accent-bullets"><li><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Invoice &gt; line_items[0] &gt; product.name</code></li><li><code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Contact &gt; company &gt; owner &gt; email</code></li></ul>If the structure exists in the upstream step’s output, it’s directly accessible.<hr><h2>5. Live Evaluation at Runtime</h2>All referenced values are evaluated live during the workflow run. This means:<ul class="accent-bullets"><li>You don’t need to refresh or re-fetch data later in the flow</li><li>Even if the workflow pauses (e.g. after a wait or manual review), the data stays current</li><li>Components always render the latest available value from the originating step</li></ul><hr><h2>6. Type Awareness in Components</h2>Components enforce value compatibility:<ul class="accent-bullets"><li>Date pickers only accept values typed as <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">Date</code></li><li>Select components require arrays or strings depending on the mode</li><li>Files or Images must come from a <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">File</code>-type field or URL</li></ul>If the data type mismatches the component, the UI will alert you or fallback to static input.<hr><h2>7. How to Apply Data in the UI Editor</h2>When configuring any component inside the Build Any UI node:To bind a value:<ul class="accent-bullets"><li>Click the “Default Value” or relevant field</li><li>Choose “Insert from Step”</li><li>Select the value from the dynamic picker (or press <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">@</code> to open inline during text editing)</li></ul>Supported Fields for Binding:<ul class="accent-bullets"><li>Default values (input, number, select, etc.)</li><li>Static text (labels, help descriptions)</li><li>Visibility conditions</li><li>Conditional display logic (e.g. show section if <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">status = 'Pending'</code>)</li></ul><hr><h2>8. Inspecting Available Outputs</h2>To see which data you can bind:<ol class="steps-list"><li>Open the step settings of any previous node</li><li>Navigate to the “Output” tab</li><li>Expand fields to see all objects and nested values</li><li>Hover to view data types and sample values</li></ol>This allows you to bind with confidence and avoid type mismatches.<hr><h2>Summary</h2><table style="min-width: 50px"><colgroup><col style="min-width: 25px"><col style="min-width: 25px"></colgroup><tbody><tr><th colspan="1" rowspan="1">Topic</th><th colspan="1" rowspan="1">Description</th></tr><tr><td colspan="1" rowspan="1">Step Output</td><td colspan="1" rowspan="1">Any object or field returned from a prior node</td></tr><tr><td colspan="1" rowspan="1">Component Binding</td><td colspan="1" rowspan="1">Used to pre-fill fields, control visibility, or populate options</td></tr><tr><td colspan="1" rowspan="1">Nested Field Access</td><td colspan="1" rowspan="1">All linked objects and fields are accessible (e.g. <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">customer.owner.email</code>)</td></tr><tr><td colspan="1" rowspan="1">Live Evaluation</td><td colspan="1" rowspan="1">Data is always up-to-date at runtime</td></tr><tr><td colspan="1" rowspan="1">Type Compatibility</td><td colspan="1" rowspan="1">Components only accept values of the right type</td></tr><tr><td colspan="1" rowspan="1">Data Insertion Methods</td><td colspan="1" rowspan="1">Use “Insert from Step” UI or <code class="inline-code-shadow bg-gray-100 border border-gray-200/60 dark:border-gray-800 font-medium dark:bg-gray-700/60 text-gray-700 dark:text-gray-200 font-mono text-md px-1 py-0.5 rounded-[0.2rem] [&amp;::before]:content-none [&amp;::after]:content-none">@</code> inline shortcut</td></tr></tbody></table>

Data

In MergePoint, the Build Any UI node lets you create interactive forms as part of a larger workflow. Components inside this UI can display or accept data ,whether that data comes from a previous step 