TypeScript Intellisense Support for Code Node using JSDoc - n8n Workflow

Advanced n8n Users: Developers frequently using the Code n8n node for custom logic.
Automation Specialists: Those building complex n8n workflow systems requiring robust debugging tools.
Technical Content Creators: Individuals documenting or sharing best practices for efficient n8n development.
Anyone: Looking to improve code quality and reduce errors within their n8n templates.

When working with the JavaScript Code n8n node, debugging and accessing complex input objects (like those returned from the n8n node or API operations) can be challenging without proper auto-completion. This specific n8n workflow solves this by leveraging JSDoc annotations, a method widely used in the JavaScript ecosystem.

By defining the expected structure of objects—such as the Workflow object retrieved via the n8n API n8n node—you can provide the n8n editor's built-in code functionality with strong type hints. This results in TypeScript-level Intellisense, making writing, maintaining, and debugging complex custom scripts within your n8n workflow far more efficient and reliable. This technique is invaluable for improving the development speed of any robust n8n templates.

This demonstrative n8n workflow utilizes four key steps to illustrate the Intellisense technique:

1. Trigger (On form submission): The process starts using a basic Form n8n trigger, which allows for manual initiation of the n8n workflow for testing.


2. Fetch Workflow Data (Get This Workflow): The n8n n8n node is configured to use the get operation to retrieve the entire metadata structure of the currently running n8n workflow. This complex JSON object is passed to the next n8n node.


3. Apply Intellisense (Code With Intellisense): This Code n8n node is the core demonstration. It defines two JSDoc type definitions (@typedef {Object} Node and / @typedef {Object} Workflow /). The incoming JSON is then cast using an inline JSDoc comment (/ @type {Workflow} /) onto the variable wf. This action provides perfect Intellisense for accessing properties like wf.id, wf.name, and iterating through wf.nodes within the Code n8n node.


4. Display Results (Display Results): A final Form n8n node displays the parsed output (extracted using the newly enabled Intellisense) in an organized HTML format, proving the functionality of the preceding n8n node.

To install and use this powerful development technique within your own n8n templates:

1. Import: Copy the provided n8n workflow JSON and paste it into your n8n instance via the 'Import from JSON' option.


2. n8n API Credentials: The 'Get This Workflow' n8n node requires valid n8n API credentials configured under the name n8n unio API v1. Ensure you have an active API key set up in n8n.


3. Run: Execute the 'On form submission' n8n trigger or manually test the n8n workflow. Observe the 'Code With Intellisense' n8n node while editing: hovering over or typing object properties (like wf.) will now display helpful code suggestions.

On form submission (n8n trigger): Acts as the starting point for testing this n8n workflow. It is a standard HTTP n8n trigger mechanism.
Get This Workflow (n8n node): Uses the internal n8n API to retrieve the complete JSON representation of the currently executing n8n workflow. This provides the complex object structure needed for the JSDoc example.
Code With Intellisense (Code n8n node): The central component. It defines complex types using JSDoc, specifically Workflow and Node types. Key configuration involves the inline casting: const wf = / @type {Workflow} / ($input.first().json);, which is essential for activating the powerful Intellisense feature when coding within n8n templates.

• Display Results (Form n8n node): Outputs the result of the Code n8n node's execution into a neatly formatted HTML page, providing immediate visual feedback on the success of the n8n workflow logic.