Node Details View (NDV)
Relevant source files
The following files were used as context for generating this wiki page:
- packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsView.vue
- packages/frontend/editor-ui/src/features/ndv/settings/components/NodeSettings.vue
- packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue
- packages/frontend/editor-ui/src/features/ndv/shared/ndv.store.ts
- packages/testing/playwright/tests/ui/5-ndv.spec.ts
- packages/frontend/editor-ui/src/features/ndv/runData/components/VirtualSchema.test.ts
The Node Details View (NDV) is the primary user interface within the n8n editor for configuring individual nodes, viewing their execution data, and managing their settings. When a user double-clicks a node on the canvas, the NDV opens, providing a focused environment for all node-specific interactions. It is a fundamental component for building and debugging workflows, allowing users to define node parameters, test execution, and inspect the data flowing through the node.
The NDV is composed of several key panels: Parameters, Input Data, Output Data, and Settings. Its state, including the currently active node and its run data, is managed by a dedicated Pinia store.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:13-19
Architecture and State Management
The NDV's architecture centers around the main NodeDetailsView.vue component, which orchestrates the various panels and user interactions. State management is handled by a Pinia store defined in ndv.store.ts, which serves as the single source of truth for the NDV's state.
Sources: packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsView.vue, packages/frontend/editor-ui/src/features/ndv/shared/ndv.store.ts
Component and Store Interaction
The diagram below illustrates the relationship between the main NDV component, its child components, and the Pinia store.
This diagram shows how NodeDetailsView.vue contains the UI panels, all ofwhich interact with the central ndv.store.ts for state.
State Management (ndv.store.ts)
The ndv.store is a Pinia store responsible for managing the state of the Node Details View. It tracks the active node, its parameters, and its input/output data from workflow executions.
Key state properties and actions include:
| Property/Action | Description |
|---|---|
activeNodeName | The name of the node currently open in the NDV. |
activeNodeInputData | Holds the input data for the active node from the last execution. |
activeNodeOutputData | Holds the output data for the active node from the last execution. |
setActiveNodeName() | Action to set the active node when the NDV is opened. |
reset() | Action to clear the store's state when the NDV is closed. |
isLinkingEnabled | A boolean state that determines if the input and output run selectors are synchronized. |
Sources: packages/frontend/editor-ui/src/features/ndv/shared/ndv.store.ts
Key Components
The NDV is divided into several distinct components, each handling a specific aspect of node configuration and inspection.
Main View (NodeDetailsView.vue)
This is the top-level component for the NDV. It is responsible for:
- Rendering the header, which includes the "Back to canvas" button and node execution controls.
- Displaying the main tabbed interface for "Parameters", "Input", "Output", and "Settings".
- Orchestrating the display of floating nodes for navigating between connected nodes.
- Handling keyboard shortcuts, such as
Ctrl/Meta+Sto save the workflow from within the NDV.
Sources: packages/frontend/editor-ui/src/features/ndv/shared/views/NodeDetailsView.vue, packages/testing/playwright/tests/ui/5-ndv.spec.ts:133-139
Parameters Panel
This panel displays the configurable properties of a node. It uses the ParameterInput.vue component to render the appropriate UI control for each parameter type (e.g., text input, dropdown, resource locator).
Parameter Input (ParameterInput.vue)
This component is responsible for rendering a single parameter field. Key features include:
- Displaying parameter hints and expression preview values.
- Handling validation and showing error states. Validation errors are typically shown after a field is blurred or when the NDV is re-opened.
- Supporting inline expression editing when a value starts with
=.
Sources: packages/frontend/editor-ui/src/features/ndv/parameters/components/ParameterInput.vue, packages/testing/playwright/tests/ui/5-ndv.spec.ts:90-104, packages/testing/playwright/tests/ui/5-ndv.spec.ts:218-237
Input/Output Data Panels
These panels are used to inspect the data that flows into and out of a node during a workflow execution. They provide multiple ways to visualize the data.
The data visualization flow is as follows:
This diagram shows the different views available for inspecting execution data and the search functionality within them.
The panels offer three distinct views for data inspection:
| View | Description |
|---|---|
| Table | Displays data in a tabular format, which is useful for structured, homogenous items. |
| JSON | Shows the raw JSON representation of the data. |
| Schema | Provides a tree-like view of the data structure, showing field names, types, and example values. It does not display pagination and is useful for understanding the data model. When searching in this view, it only searches field keys, not values. |
A search bar is available to filter data in Table and JSON views, or to filter keys in the Schema view. The search state is preserved even after re-executing the node.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:170-216, packages/testing/playwright/tests/ui/5-ndv.spec.ts:313-324, packages/frontend/editor-ui/src/features/ndv/runData/components/VirtualSchema.test.ts
Settings Panel (NodeSettings.vue)
This panel provides metadata and advanced options for the node. Key information displayed includes:
- The node's internal name and version (e.g., "Set node version 2").
- The latest available version of the node.
- A "Deprecated" status for older, outdated nodes.
Sources: packages/frontend/editor-ui/src/features/ndv/settings/components/NodeSettings.vue, packages/testing/playwright/tests/ui/5-ndv.spec.ts:245-265
Core Functionalities
Opening and Closing
The NDV is displayed when a user double-clicks a node on the canvas. It is hidden when the user clicks the "Back to canvas" button.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:13-19
Node Execution and Webhook Testing
The NDV provides controls to execute a single node or test a trigger node.
- For regular nodes, clicking "Execute Node" runs the node's logic. A success or error indicator is displayed in the NDV header post-execution.
- For webhook nodes, the NDV displays the webhook URL. After executing, it enters a "listening" state. A request can be made to the URL to test the trigger, and the resulting data will be displayed in the output panel.
The following diagram illustrates the webhook test flow:
This sequence diagram shows the process of testing a webhook node from within the NDV.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:26-37, packages/testing/playwright/tests/ui/5-ndv.spec.ts:239-244
Validation Logic
Parameter validation is designed to be non-intrusive. Errors are generally not shown as the user types. Instead, they appear under specific conditions:
- On Blur: When the user focuses on a required field and then moves focus away without providing a value.
- On Re-open: When a node with validation issues is closed and then re-opened, the errors are displayed immediately.
- On Paste: When a node is pasted, any existing validation errors are shown upon opening it.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:90-112
Floating Nodes Navigation
The NDV allows for quick navigation between connected nodes without returning to the main canvas. "Floating nodes" appear on the sides of the NDV, representing the direct inputs and outputs of the active node.
- Users can click these floating nodes or use keyboard shortcuts (
Tab/Shift+Tab) to traverse to the next or previous node in the workflow. - For nodes with sub-nodes (like the AI Agent), the NDV provides an interface to connect these "sub-nodes" directly.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:405-472
Run Data Selectors
When a workflow has been executed multiple times or contains loops, the input and output panels include run selectors (dropdowns) to inspect data from different runs or iterations.
- By default, the input and output run selectors are linked. Changing the selection in one will update the other.
- This linking can be toggled on or off, allowing for independent inspection of input and output data from different runs.
Sources: packages/testing/playwright/tests/ui/5-ndv.spec.ts:342-383
Conclusion
The Node Details View is a comprehensive and highly interactive feature that serves as the control center for node management within n8n. It effectively encapsulates parameter configuration, data inspection, and execution testing into a single, cohesive interface. Its architecture, relying on a central Pinia store and modular Vue components, allows for a rich user experience with complex functionalities like floating node navigation, multiple data views, and synchronized run data inspection. The thoughtful design of features like deferred validation and keyboard shortcuts enhances developer productivity when building and debugging workflows.