Skip to main content
Glama
n8n.txt106 kB
TITLE: Updating Asynchronous Credential Retrieval in n8n (TypeScript) DESCRIPTION: This snippet demonstrates the change in the `getCredentials` method from synchronous to asynchronous in n8n version 0.135.0. Users must now `await` the call to `this.getCredentials` to properly handle the returned Promise, ensuring correct credential retrieval in asynchronous contexts. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_1 LANGUAGE: typescript CODE: ``` // Before 0.135.0: const credentials = this.getCredentials(credentialTypeName); // From 0.135.0: const credentials = await this.getCredentials(myNodeCredentials); ``` ---------------------------------------- TITLE: Starting n8n in Docker DESCRIPTION: This command initializes a Docker volume for persistent data storage and then runs the n8n Docker container. It maps port 5678, mounts the n8n_data volume to store workflow data and credentials, and ensures n8n is accessible locally at http://localhost:5678. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_0 LANGUAGE: bash CODE: ``` docker volume create n8n_data docker run -it --rm \ --name n8n \ -p 5678:5678 \ -v n8n_data:/home/node/.n8n \ docker.n8n.io/n8nio/n8n ``` ---------------------------------------- TITLE: Deploying n8n with Docker DESCRIPTION: These commands demonstrate how to deploy n8n using Docker. The first command creates a named Docker volume to persist n8n data, ensuring data is not lost when the container is removed. The second command runs n8n in a Docker container, mapping port 5678 and mounting the created volume for data persistence. It's a common method for self-hosting n8n. SOURCE: https://github.com/n8n-io/n8n/blob/master/README.md#_snippet_1 LANGUAGE: Shell CODE: ``` docker volume create n8n_data docker run -it --rm --name n8n -p 5678:5678 -v n8n_data:/home/node/.n8n docker.n8n.io/n8nio/n8n ``` ---------------------------------------- TITLE: Starting n8n in Development Mode - pnpm DESCRIPTION: Initiates n8n in development mode, which automatically rebuilds code, restarts the backend, and refreshes the frontend (editor-ui) on every change. This provides an efficient workflow for iterating on n8n modules. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_15 LANGUAGE: Shell CODE: ``` pnpm dev ``` ---------------------------------------- TITLE: Converting JSON Schema to Zod Schema in TypeScript DESCRIPTION: This example shows how to use the `jsonSchemaToZod` function to convert a basic JSON schema object into a Zod schema. It imports the function and defines a simple JSON schema for an object with a 'hello' string property, then converts it. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/json-schema-to-zod/README.md#_snippet_1 LANGUAGE: typescript CODE: ``` import { jsonSchemaToZod } from "json-schema-to-zod"; const jsonSchema = { type: "object", properties: { hello: { type: "string", }, }, }; const zodSchema = jsonSchemaToZod(myObject); ``` ---------------------------------------- TITLE: Quick Starting n8n with npx (Node.js) DESCRIPTION: This command allows users to instantly try n8n using npx, a Node.js package runner. It requires Node.js to be installed on the system. This is a quick way to launch a temporary n8n instance for testing or initial setup. SOURCE: https://github.com/n8n-io/n8n/blob/master/README.md#_snippet_0 LANGUAGE: Shell CODE: ``` npx n8n ``` ---------------------------------------- TITLE: Implementing Resource Cleanup with `finally` Block in TypeScript DESCRIPTION: This TypeScript `try...finally` block illustrates the critical pattern for ensuring proper resource cleanup in vector store operations. The `releaseVectorStoreClient` function is invoked within the `finally` block, guaranteeing that resources, such as database connections, are released regardless of whether the operation logic succeeds or encounters an error. This prevents resource leaks and connection pool exhaustion, especially important for database-backed vector stores. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode/README.md#_snippet_4 LANGUAGE: TypeScript CODE: ``` try { // Operation logic } finally { // Release resources even if an error occurs args.releaseVectorStoreClient?.(vectorStore); } ``` ---------------------------------------- TITLE: Creating a Basic n8n Regular Node in TypeScript DESCRIPTION: This TypeScript code defines a basic n8n regular node named 'My Node'. It implements the `INodeType` interface, setting up display information, inputs, outputs, and a custom string property. The `execute` method iterates through input items, adds the value of 'myString' to each item's JSON data, and returns the modified items. This example demonstrates how to define node properties and process data within a node. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/node-dev/README.md#_snippet_1 LANGUAGE: TypeScript CODE: ``` import { IExecuteFunctions, INodeExecutionData, INodeType, INodeTypeDescription, } from 'n8n-workflow'; export class MyNode implements INodeType { description: INodeTypeDescription = { displayName: 'My Node', name: 'myNode', group: ['transform'], version: 1, description: 'Adds "myString" on all items to defined value.', defaults: { name: 'My Node', color: '#772244', }, inputs: ['main'], outputs: ['main'], properties: [ // Node properties which the user gets displayed and // can change on the node. { displayName: 'My String', name: 'myString', type: 'string', default: '', placeholder: 'Placeholder value', description: 'The description text', } ] }; async execute(this: IExecuteFunctions): Promise<INodeExecutionData[][]> { const items = this.getInputData(); let item: INodeExecutionData; let myString: string; // Itterates over all input items and add the key "myString" with the // value the parameter "myString" resolves to. // (This could be a different value for each item in case it contains an expression) for (let itemIndex = 0; itemIndex < items.length; itemIndex++) { myString = this.getNodeParameter('myString', itemIndex, '') as string; item = items[itemIndex]; item.json['myString'] = myString; } return [items]; } } ``` ---------------------------------------- TITLE: Cloning n8n Repository - Git DESCRIPTION: Clones your forked n8n repository from GitHub to your local machine. Replace `<your_github_username>` with your actual GitHub username to get started with the development setup. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_8 LANGUAGE: Shell CODE: ``` git clone https://github.com/<your_github_username>/n8n.git ``` ---------------------------------------- TITLE: Exporting n8n Workflows and Credentials (CLI) DESCRIPTION: These commands are used to export all n8n workflows and credentials to a specified backup directory using the n8n CLI. This is a crucial step before upgrading n8n, especially when migrating from MongoDB to a different database, to ensure data preservation. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_3 LANGUAGE: bash CODE: ``` n8n export:workflow --backup --output=backups/latest/ n8n export:credentials --backup --output=backups/latest/ ``` ---------------------------------------- TITLE: Pulling Latest Stable n8n Docker Image DESCRIPTION: This command pulls the most recent stable version of the n8n Docker image from the official n8n Docker registry. It is used to update your local n8n image to the latest release. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_3 LANGUAGE: bash CODE: ``` docker pull docker.n8n.io/n8nio/n8n ``` ---------------------------------------- TITLE: Running n8n with PostgreSQL using Docker DESCRIPTION: This command initializes a Docker volume for n8n data and then runs an n8n container configured to use PostgreSQL as its database. It requires placeholders for PostgreSQL connection details (database, host, port, user, schema, password) to be replaced with actual values. The `n8n_data` volume ensures persistence of user data and encryption keys. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_2 LANGUAGE: bash CODE: ``` docker volume create n8n_data docker run -it --rm \ --name n8n \ -p 5678:5678 \ -e DB_TYPE=postgresdb \ -e DB_POSTGRESDB_DATABASE=<POSTGRES_DATABASE> \ -e DB_POSTGRESDB_HOST=<POSTGRES_HOST> \ -e DB_POSTGRESDB_PORT=<POSTGRES_PORT> \ -e DB_POSTGRESDB_USER=<POSTGRES_USER> \ -e DB_POSTGRESDB_SCHEMA=<POSTGRES_SCHEMA> \ -e DB_POSTGRESDB_PASSWORD=<POSTGRES_PASSWORD> \ -v n8n_data:/home/node/.n8n \ docker.n8n.io/n8nio/n8n ``` ---------------------------------------- TITLE: Starting n8n Application - pnpm DESCRIPTION: Starts the n8n application in its default mode. This command is typically used to run n8n for local testing or in a production-like environment after the code has been built. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_13 LANGUAGE: Shell CODE: ``` pnpm start ``` ---------------------------------------- TITLE: Migrating Binary Data Access in n8n (TypeScript) DESCRIPTION: This example illustrates the updated approach for accessing binary data in n8n from version 0.135.0. Direct access to `binaryData.data` is deprecated; instead, the `await this.helpers.getBinaryDataBuffer(itemIndex, binaryPropertyName)` method must be used to retrieve binary data as a Buffer. This change standardizes binary data handling within workflows. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_2 LANGUAGE: typescript CODE: ``` const items = this.getInputData(); for (const i = 0; i < items.length; i++) { const item = items[i].binary as IBinaryKeyData; const binaryPropertyName = this.getNodeParameter('binaryPropertyName', i); const binaryData = item[binaryPropertyName] as IBinaryData; // Before 0.135.0: const binaryDataBuffer = Buffer.from(binaryData.data, BINARY_ENCODING); // From 0.135.0: const binaryDataBuffer = await this.helpers.getBinaryDataBuffer(i, binaryPropertyName); } ``` ---------------------------------------- TITLE: Translating Interpolated Strings in JSON (German) DESCRIPTION: This example shows a translated version of an interpolated string in German. It's crucial to leave the variable placeholder, `{activeExecutionId}`, untranslated within the string to ensure proper dynamic substitution. This maintains the functionality of the interpolation while providing localized content. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_2 LANGUAGE: json CODE: ``` { "stopExecution.message": "Die Ausführung mit der ID {activeExecutionId} wurde gestoppt", "stopExecution.title": "Execution stopped" } ``` ---------------------------------------- TITLE: Updating n8n with Docker Compose DESCRIPTION: These commands collectively update an n8n instance managed by Docker Compose. First, `docker compose pull` fetches the latest images. Then, `docker compose down` stops and removes the old containers. Finally, `docker compose up -d` starts new containers with the updated images in detached mode. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_10 LANGUAGE: bash CODE: ``` # Pull latest version docker compose pull ``` LANGUAGE: bash CODE: ``` # Stop and remove older version docker compose down ``` LANGUAGE: bash CODE: ``` # Start the container docker compose up -d ``` ---------------------------------------- TITLE: Applying Dark Mode Styles with CSS DESCRIPTION: This CSS snippet applies a dark background color to the body element when the user's system prefers a dark color scheme. It ensures a consistent visual experience in dark mode. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/index.html#_snippet_0 LANGUAGE: CSS CODE: ``` @media (prefers-color-scheme: dark) { body { background-color: rgb(45, 46, 46) } } ``` ---------------------------------------- TITLE: Starting n8n with Tunnel for Local Development DESCRIPTION: This command starts n8n in a Docker container with the --tunnel flag, enabling it to be reachable from the internet via a special tunnel service. This setup is intended for local development and testing purposes, allowing webhooks to function correctly without requiring a public IP address. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_1 LANGUAGE: bash CODE: ``` docker volume create n8n_data docker run -it --rm \ --name n8n \ -p 5678:5678 \ -v n8n_data:/home/node/.n8n \ docker.n8n.io/n8nio/n8n \ start --tunnel ``` ---------------------------------------- TITLE: Running n8n with Specific Timezone Settings DESCRIPTION: This command runs an n8n Docker container and sets its timezone using the `GENERIC_TIMEZONE` and `TZ` environment variables. `GENERIC_TIMEZONE` affects n8n's internal scheduling (e.g., Schedule node), while `TZ` sets the system's timezone for commands and scripts within the container. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_11 LANGUAGE: bash CODE: ``` docker run -it --rm \ --name n8n \ -p 5678:5678 \ -e GENERIC_TIMEZONE="Europe/Berlin" \ -e TZ="Europe/Berlin" \ docker.n8n.io/n8nio/n8n ``` ---------------------------------------- TITLE: Scraping Stripe Webhook Event Types with JavaScript DESCRIPTION: This JavaScript snippet is intended to be executed in a browser's developer console to scrape Stripe's documentation for webhook event types. It iterates through a list of HTML elements, extracts the event name and description, formats the name for display (e.g., converting 'charge.succeeded' to 'Charge Succeeded'), and then copies the resulting array of structured objects to the clipboard. This array is designed to be pasted into a file like 'StripeTrigger.node.ts' for application use. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/nodes-base/nodes/Stripe/README.md#_snippet_0 LANGUAGE: JavaScript CODE: ``` types = []; $$('ul#event-types li').forEach((el) => { const value = el.querySelector('.method-list-item-label-name').innerText; types.push({ name: value .replace(/(\.|_)/, ' ') .split(' ') .map((s) => s.charAt(0).toUpperCase() + s.substring(1)) .join(' '), value, description: el.querySelector('.method-list-item-description').innerText, }); }); copy(types); ``` ---------------------------------------- TITLE: Installing Project Dependencies with pnpm DESCRIPTION: This command installs all required project dependencies using the pnpm package manager. It is typically the initial step after cloning the repository to prepare the development environment. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_0 LANGUAGE: Shell CODE: ``` pnpm install ``` ---------------------------------------- TITLE: Starting n8n with Tunnel - Shell DESCRIPTION: Starts the n8n application and exposes it via a public tunnel. This is particularly useful for testing webhooks or integrations that require n8n to be publicly accessible from the internet. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_14 LANGUAGE: Shell CODE: ``` ./packages/cli/bin/n8n start --tunnel ``` ---------------------------------------- TITLE: Defining Pluralization for i18n in JSON DESCRIPTION: This snippet demonstrates how to define singular and plural versions of a string in a JSON translation file for i18n. The `|` character separates the singular and plural forms, allowing the i18n system to select the appropriate version based on the `count` variable. This is used for dynamic text that changes based on quantity. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_0 LANGUAGE: json CODE: ``` { "tagsView.inUse": "{count} workflow | {count} workflows" } ``` ---------------------------------------- TITLE: Navigating to n8n Project Directory - Shell DESCRIPTION: Changes the current working directory to the root of the newly cloned n8n repository. This step is crucial before executing any project-specific commands like installing dependencies or building the code. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_9 LANGUAGE: Shell CODE: ``` cd n8n ``` ---------------------------------------- TITLE: Installing n8n Project Dependencies - pnpm DESCRIPTION: Installs all required dependencies for all modules within the n8n project using pnpm. This command also links the modules together, preparing the environment for development. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_11 LANGUAGE: Shell CODE: ``` pnpm install ``` ---------------------------------------- TITLE: Starting n8n via New Binary Path (Recommended) - Shell DESCRIPTION: This command demonstrates the updated and recommended method for starting n8n after the CLI library upgrade. Users should modify their existing n8n startup commands or scripts to point to this new binary path to ensure proper application launch and security compliance. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_9 LANGUAGE: Shell CODE: ``` /usr/local/bin/node bin/n8n start ``` ---------------------------------------- TITLE: Setting Up Project Dependencies with pnpm DESCRIPTION: This command installs all project dependencies listed in `package.json` using pnpm, which is a fast and efficient package manager. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_1 LANGUAGE: Shell CODE: ``` pnpm install ``` ---------------------------------------- TITLE: Building All n8n Project Code - pnpm DESCRIPTION: Compiles and builds all the code across the n8n project. This step is necessary to ensure all components are ready for execution or further development, especially after installing dependencies. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_12 LANGUAGE: Shell CODE: ``` pnpm build ``` ---------------------------------------- TITLE: Running E2E Tests in Development Mode (pnpm) DESCRIPTION: Starts the n8n application in development mode and executes end-to-end tests interactively. This command is ideal for active development, as it automatically reacts to code changes, allowing for rapid iteration and debugging of features. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_20 LANGUAGE: Shell CODE: ``` pnpm test:e2e:dev ``` ---------------------------------------- TITLE: Defining a Custom n8n Vector Store Node using createVectorStoreNode (TypeScript) DESCRIPTION: This snippet demonstrates how to use the `createVectorStoreNode` factory function to define a new n8n vector store node. It illustrates configuring metadata such as display name, description, and supported operation modes, as well as implementing the essential `getVectorStoreClient` and `populateVectorStore` asynchronous functions for client instantiation and document insertion, respectively. It also shows the optional `releaseVectorStoreClient` for resource cleanup. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode/README.md#_snippet_0 LANGUAGE: TypeScript CODE: ``` import { createVectorStoreNode } from './createVectorStoreNode'; export class MyVectorStoreNode { static description = createVectorStoreNode({ meta: { displayName: 'My Vector Store', name: 'myVectorStore', description: 'Operations for My Vector Store', docsUrl: 'https://docs.example.com/my-vector-store', icon: 'file:myIcon.svg', // Optional: specify which operations this vector store supports operationModes: ['load', 'insert', 'update','retrieve', 'retrieve-as-tool'] }, sharedFields: [ // Fields shown in all operation modes ], loadFields: [ // Fields specific to 'load' operation ], insertFields: [ // Fields specific to 'insert' operation ], retrieveFields: [ // Fields specific to 'retrieve' operation ], // Functions to implement getVectorStoreClient: async (context, filter, embeddings, itemIndex) => { // Create and return vector store instance }, populateVectorStore: async (context, embeddings, documents, itemIndex) => { // Insert documents into vector store }, // Optional: cleanup function - called in finally blocks after operations releaseVectorStoreClient: (vectorStore) => { // Release resources such as database connections or external clients // For example, in PGVector: vectorStore.client?.release(); } }); } ``` ---------------------------------------- TITLE: Defining Resource Options Parameter in n8n (JavaScript) DESCRIPTION: This JavaScript object defines an 'options' type parameter named 'resource' for an n8n node. It specifies a display name, default value, and a list of available options ('File', 'Issue'), each with a name and a value key used for translation. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_14 LANGUAGE: javascript CODE: ``` { displayName: 'Resource', name: 'resource', type: 'options', options: [ { name: 'File', value: 'file', // key to use in translation }, { name: 'Issue', value: 'issue', // key to use in translation }, ], default: 'issue', description: 'Resource to operate on', }, ``` ---------------------------------------- TITLE: Creating a Dynamic Tool for Vector Store Functionality in TypeScript DESCRIPTION: This TypeScript snippet demonstrates how a `DynamicTool` is instantiated for the `retrieve-as-tool` mode, exposing vector store capabilities. The tool is configured with a `name`, `description`, and an asynchronous `func` that encapsulates the logic for searching the vector store based on the provided input. This allows vector store operations to be integrated as callable tools within a larger system. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode/README.md#_snippet_5 LANGUAGE: TypeScript CODE: ``` const vectorStoreTool = new DynamicTool({ name: toolName, description: toolDescription, func: async (input) => { // Search vector store with input // ... }, }); ``` ---------------------------------------- TITLE: Running All Tests with pnpm DESCRIPTION: This command executes all configured tests for the n8n-editor-ui project, including both unit and end-to-end tests, to ensure functionality. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_4 LANGUAGE: Shell CODE: ``` pnpm test ``` ---------------------------------------- TITLE: Running Unit Tests with pnpm DESCRIPTION: This command executes the unit tests defined for the project. It ensures that individual components, functions, and modules behave as expected, verifying their correctness. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_3 LANGUAGE: Shell CODE: ``` pnpm test:unit ``` ---------------------------------------- TITLE: Configuring Default Locale for n8n (Bash) DESCRIPTION: This snippet demonstrates how to set the default locale for the n8n application using the `N8N_DEFAULT_LOCALE` environment variable. When n8n starts, it will display UI strings in the specified locale, falling back to English for untranslated content. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_0 LANGUAGE: Bash CODE: ``` export N8N_DEFAULT_LOCALE=de pnpm start ``` ---------------------------------------- TITLE: Running E2E Tests Headless (pnpm) DESCRIPTION: Starts the n8n application and runs end-to-end tests in headless mode, meaning without a visible browser interface. This command is primarily used for automated testing in continuous integration environments or for batch execution where visual interaction is not required. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_21 LANGUAGE: Shell CODE: ``` pnpm test:e2e:all ``` ---------------------------------------- TITLE: Defining Vector Store Operation Handlers in TypeScript DESCRIPTION: These TypeScript function signatures illustrate the standardized interface for different vector store operation handlers, such as `handleLoadOperation` and `handleInsertOperation`. Each handler is responsible for a specific mode of interaction with the vector store, taking context, constructor arguments, embeddings, and potentially an item index as input, and returning an array of node execution data. The `handleInsertOperation` is specifically noted to support batch processing from version 1.1+. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode/README.md#_snippet_2 LANGUAGE: TypeScript CODE: ``` // Example: loadOperation.ts export async function handleLoadOperation<T extends VectorStore>( context: IExecuteFunctions, args: VectorStoreNodeConstructorArgs<T>, embeddings: Embeddings, itemIndex: number ): Promise<INodeExecutionData[]> // Example: insertOperation.ts (v1.1+) export async function handleInsertOperation<T extends VectorStore>( context: IExecuteFunctions, args: VectorStoreNodeConstructorArgs<T>, embeddings: Embeddings ): Promise<INodeExecutionData[]> ``` ---------------------------------------- TITLE: Initializing Vue.js Application with Theme and Component Data DESCRIPTION: This Vue.js application setup initializes the Vue devtools and defines the root component's data and watchers. The 'data' property holds various UI component states (e.g., radio buttons, inputs, tree data, select options, table data) and theme-related variables. The 'watch' property dynamically updates CSS variables based on changes to a 'global' object or individual color properties, demonstrating a reactive theme system. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_10 LANGUAGE: Vue.js CODE: ``` Vue.config.devtools = true; Vue.createApp({ data() { return { global: {}, colorLine: ['Primary', 'Success', 'Warning', 'Danger', 'Info'], color_primary: '', color_success: '', color_warning: '', color_danger: '', color_info: '', color_white: '', color_black: '', color_text_primary: '', color_text_regular: '', color_text_secondary: '', color_text_placeholder: '', border_color_base: '', border_color_light: '', border_color_lighter: '', border_color_extra_light: '', font_size_extra_large: '', font_size_large: '', font_size_medium: '', font_size_base: '', font_size_small: '', font_size_extra_small: '', font_weight_primary: 0, font_weight_secondary: 0, font_line_height_primary: '', font_line_height_secondary: '', radio: '1', radio1: 'Washington', radio2: '1', checked: true, checked1: ['Shanghai'], checked2: true, input: 'Element', inputNumber: 1, treeData: [ { label: '一级 1', children: [ { label: '二级 1-1', children: [ { label: '三级 1-1-1', } ] } ] }, { label: '一级 2', children: [ { label: '二级 2-1', children: [ { label: '三级 2-1-1', } ] }, { label: '二级 2-2', children: [ { label: '三级 2-2-1', } ] } ] }, { label: '一级 3', children: [ { label: '二级 3-1', children: [ { label: '三级 3-1-1', } ] }, { label: '二级 3-2', children: [ { label: '三级 3-2-1', } ] } ] } ], selectOptions: [ { value: 'Option1', label: 'Option1' }, { value: 'Option2', label: 'Option2' }, { value: 'Option3', label: 'Option3' }, { value: 'Option4', label: 'Option4' }, { value: 'Option5', label: 'Option5' } ], selectValue: '', cascadeOptions: [ { value: 'guide', label: 'Guide', children: [ { value: 'disciplines', label: 'Disciplines', children: [ { value: 'consistency', label: 'Consistency' }, { value: 'feedback', label: 'Feedback' } ] } ] }, { value: 'resource', label: 'Resource', children: [ { value: 'axure', label: 'Axure Components' }, { value: 'sketch', label: 'Sketch Templates' }, { value: 'docs', label: 'Design Documentation' } ] } ], cascaderValue: [], switchValue: true, slider: 28, datePicker: '', rate: null, transferData: (() => { const data = []; for (let i = 1; i <= 15; i++) { data.push({ key: i, label: `Option ${i}`, disabled: i % 4 === 0 }); ``` ---------------------------------------- TITLE: Defining Additional Parameters Fixed Collection in n8n (JavaScript) DESCRIPTION: This JavaScript object defines a 'fixedCollection' type parameter named 'additionalParameters' for an n8n node. It allows adding predefined sets of values, such as 'author' details (name and email), each with its own display name, type, default value, description, and placeholder. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_19 LANGUAGE: javascript CODE: ``` { displayName: 'Additional Parameters', name: 'additionalParameters', placeholder: 'Add Parameter', description: 'Additional fields to add.', type: 'fixedCollection', default: {}, displayOptions: { show: { operation: [ 'create', 'delete', 'edit', ], resource: [ 'file', ], }, }, options: [ { name: 'author', displayName: 'Author', values: [ { displayName: 'Name', name: 'name', type: 'string', default: '', description: 'Name of the author of the commit', placeholder: 'John', }, { displayName: 'Email', name: 'email', type: 'string', default: '', description: 'Email of the author of the commit', placeholder: 'john@email.com', }, ], }, ], } ``` ---------------------------------------- TITLE: Running Flaky E2E Tests by Keyword - Bash DESCRIPTION: This example shows how to run end-to-end tests whose titles or descriptions contain the keyword 'login'. The tests will be executed five times, leveraging the default `burn_count` when it's not explicitly provided. SOURCE: https://github.com/n8n-io/n8n/blob/master/cypress/README.md#_snippet_2 LANGUAGE: bash CODE: ``` pnpm run debug:flaky:e2e login ``` ---------------------------------------- TITLE: Starting a New n8n Docker Container DESCRIPTION: This command starts a new n8n Docker container. It allows specifying a custom `container_name` and additional `options` (e.g., port mappings, environment variables) to configure the container. The `-d` flag runs the container in detached mode. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_9 LANGUAGE: bash CODE: ``` docker run --name=[container_name] [options] -d docker.n8n.io/n8nio/n8n ``` ---------------------------------------- TITLE: Default Configuration Options for createChat DESCRIPTION: This snippet provides a comprehensive list of all default configuration options available for the `createChat` function. It includes settings for webhook URL, request configuration, target element, display mode, session management, welcome screen, and internationalization. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_5 LANGUAGE: ts CODE: ``` createChat({ webhookUrl: '', webhookConfig: { method: 'POST', headers: {} }, target: '#n8n-chat', mode: 'window', chatInputKey: 'chatInput', chatSessionKey: 'sessionId', loadPreviousSession: true, metadata: {}, showWelcomeScreen: false, defaultLanguage: 'en', initialMessages: [ 'Hi there! 👋', 'My name is Nathan. How can I assist you today?' ], i18n: { en: { title: 'Hi there! 👋', subtitle: "Start a chat. We're here to help you 24/7.", footer: '', getStarted: 'New Conversation', inputPlaceholder: 'Type your question..', }, }, }); ``` ---------------------------------------- TITLE: Integrating n8n Chat in React DESCRIPTION: This React snippet illustrates how to integrate the n8n Chat widget into a React functional component. The `createChat` function is invoked within a `useEffect` hook with an empty dependency array to ensure it runs only once after the initial render. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_4 LANGUAGE: tsx CODE: ``` // App.tsx import { useEffect } from 'react'; import '@n8n/chat/style.css'; import { createChat } from '@n8n/chat'; export const App = () => { useEffect(() => { createChat({ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL' }); }, []); return (<div></div>); }; ``` ---------------------------------------- TITLE: Embedding n8n Chat via CDN DESCRIPTION: This snippet demonstrates how to embed the n8n Chat widget directly into an HTML page using CDN links. It includes linking the necessary CSS stylesheet and initializing the chat functionality with a specified webhook URL using a JavaScript module import. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_0 LANGUAGE: html CODE: ``` <link href="https://cdn.jsdelivr.net/npm/@n8n/chat/dist/style.css" rel="stylesheet" /> <script type="module"> import { createChat } from 'https://cdn.jsdelivr.net/npm/@n8n/chat/dist/chat.bundle.es.js'; createChat({ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL' }); </script> ``` ---------------------------------------- TITLE: Defining Node Header for Translation - TypeScript DESCRIPTION: Shows how the `displayName` and `description` properties within a node's `description` object in TypeScript are used as keys for the `header` section of the node translation file. These properties define the primary display name and a brief overview of the node's functionality. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_8 LANGUAGE: typescript CODE: ``` export class Github implements INodeType { description: INodeTypeDescription = { displayName: 'GitHub', // key to use in translation description: 'Consume GitHub API', // key to use in translation name: 'github', icon: 'file:github.svg', group: ['input'], version: 1, ``` ---------------------------------------- TITLE: Removing a Docker Container by ID DESCRIPTION: This command removes a Docker container using its `container_id`. This action deletes the container instance but does not affect associated volumes, preserving user data. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_8 LANGUAGE: bash CODE: ``` docker rm [container_id] ``` ---------------------------------------- TITLE: Running Storybook for Development with pnpm DESCRIPTION: This command compiles and hot-reloads the Storybook environment, enabling developers to preview and work on UI components in isolation. It provides a live development server for component development. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_1 LANGUAGE: Shell CODE: ``` pnpm storybook ``` ---------------------------------------- TITLE: Setting CSS Custom Properties from HSL in JavaScript DESCRIPTION: This method converts a given color (hex) to HSL using `hexToHSL` and then sets individual H, S, and L CSS custom properties on the document's root element. It allows dynamic styling based on HSL values. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_6 LANGUAGE: JavaScript CODE: ``` setCssVariable(key, color) { const hslColor = this.hexToHSL(color); document.documentElement.style.setProperty(`--${key}-h`, hslColor.h); document.documentElement.style.setProperty(`--${key}-s`, hslColor.s); document.documentElement.style.setProperty(`--${key}-l`, hslColor.l); } ``` ---------------------------------------- TITLE: Integrating n8n Chat in Vue.js DESCRIPTION: This Vue.js snippet demonstrates how to integrate the n8n Chat widget within a Vue component using the Composition API. The `createChat` function is called within `onMounted` to ensure the DOM is ready before initialization. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_3 LANGUAGE: html CODE: ``` <script lang="ts" setup> // App.vue import { onMounted } from 'vue'; import '@n8n/chat/style.css'; import { createChat } from '@n8n/chat'; onMounted(() => { createChat({ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL' }); }); </script> <template> <div></div> </template> ``` ---------------------------------------- TITLE: Adjusting Slack Node Data Access Expression (n8n Expression) DESCRIPTION: This snippet demonstrates the required change in n8n expressions for accessing data from the Slack Node's 'Channel -> Create' operation. Previously, the channel ID was nested under a 'channel' property; now, it is directly available at the main level of the node's output data, requiring updates to existing references. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_5 LANGUAGE: n8n Expression CODE: ``` {{ $node["Slack"].data["channel"]["id"] }} ``` LANGUAGE: n8n Expression CODE: ``` {{ $node["Slack"].data["id"] }} ``` ---------------------------------------- TITLE: Installing n8n Chat via npm DESCRIPTION: This command installs the n8n Chat package as a production dependency in your project using npm, allowing for local bundling and integration. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_1 LANGUAGE: sh CODE: ``` npm install @n8n/chat ``` ---------------------------------------- TITLE: Tinting Hexadecimal Colors in JavaScript DESCRIPTION: This function takes a hexadecimal color string and a tint value, then calculates a new RGB color by applying the tint. It returns the tinted color as an RGB string or a new hexadecimal string. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_4 LANGUAGE: JavaScript CODE: ``` tintColor(c, tint) { const color = c.replace('#', ''); let red = parseInt(color.slice(0, 2), 16); let green = parseInt(color.slice(2, 4), 16); let blue = parseInt(color.slice(4, 6), 16); if (tint === 0) { // when primary color is in its rgb space return [red, green, blue].join(','); } else { red += Math.round(tint * (255 - red)); green += Math.round(tint * (255 - green)); blue += Math.round(tint * (255 - blue)); red = red.toString(16); green = green.toString(16); blue = blue.toString(16); return `#${red}${green}${blue}`; } } ``` ---------------------------------------- TITLE: Initializing n8n Chat with TypeScript Import DESCRIPTION: This TypeScript snippet shows how to import the n8n Chat stylesheet and the `createChat` function, then initialize the chat widget with your n8n webhook URL. This method is suitable for projects using module bundlers. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_2 LANGUAGE: ts CODE: ``` import '@n8n/chat/style.css'; import { createChat } from '@n8n/chat'; createChat({ webhookUrl: 'YOUR_PRODUCTION_WEBHOOK_URL' }); ``` ---------------------------------------- TITLE: Stopping a Docker Container by ID DESCRIPTION: This command stops a running Docker container using its unique `container_id`. It gracefully shuts down the container, allowing it to save its state if configured to do so. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_7 LANGUAGE: bash CODE: ``` docker stop [container_id] ``` ---------------------------------------- TITLE: Pulling Specific n8n Docker Image Version DESCRIPTION: This command allows pulling a specific version of the n8n Docker image, identified by its tag (e.g., `0.220.1`). This is useful for maintaining compatibility or rolling back to a previous working version. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_4 LANGUAGE: bash CODE: ``` docker pull docker.n8n.io/n8nio/n8n:0.220.1 ``` ---------------------------------------- TITLE: Enabling and Activating pnpm on Windows (Admin) DESCRIPTION: These commands enable corepack and then prepare and activate pnpm on Windows. It is crucial to run these commands in a terminal with administrator privileges for them to execute successfully. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_7 LANGUAGE: shell CODE: ``` corepack enable corepack prepare pnpm --activate ``` ---------------------------------------- TITLE: Customizing n8n Chat Window Styles with CSS Variables DESCRIPTION: This CSS snippet defines a comprehensive set of CSS variables (`--chat--*`) that allow for extensive customization of the n8n Chat window's appearance. These variables control colors, spacing, border-radius, transition durations, window dimensions, header styles, textarea height, message styling (font size, padding, colors for bot/user messages), and toggle button styles. Developers can override these variables to match their application's design system. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_6 LANGUAGE: CSS CODE: ``` :root { --chat--color-primary: #e74266; --chat--color-primary-shade-50: #db4061; --chat--color-primary-shade-100: #cf3c5c; --chat--color-secondary: #20b69e; --chat--color-secondary-shade-50: #1ca08a; --chat--color-white: #ffffff; --chat--color-light: #f2f4f8; --chat--color-light-shade-50: #e6e9f1; --chat--color-light-shade-100: #c2c5cc; --chat--color-medium: #d2d4d9; --chat--color-dark: #101330; --chat--color-disabled: #777980; --chat--color-typing: #404040; --chat--spacing: 1rem; --chat--border-radius: 0.25rem; --chat--transition-duration: 0.15s; --chat--window--width: 400px; --chat--window--height: 600px; --chat--header-height: auto; --chat--header--padding: var(--chat--spacing); --chat--header--background: var(--chat--color-dark); --chat--header--color: var(--chat--color-light); --chat--header--border-top: none; --chat--header--border-bottom: none; --chat--header--border-bottom: none; --chat--header--border-bottom: none; --chat--heading--font-size: 2em; --chat--header--color: var(--chat--color-light); --chat--subtitle--font-size: inherit; --chat--subtitle--line-height: 1.8; --chat--textarea--height: 50px; --chat--message--font-size: 1rem; --chat--message--padding: var(--chat--spacing); --chat--message--border-radius: var(--chat--border-radius); --chat--message-line-height: 1.8; --chat--message--bot--background: var(--chat--color-white); --chat--message--bot--color: var(--chat--color-dark); --chat--message--bot--border: none; --chat--message--user--background: var(--chat--color-secondary); --chat--message--user--color: var(--chat--color-white); --chat--message--user--border: none; --chat--message--pre--background: rgba(0, 0, 0, 0.05); --chat--toggle--background: var(--chat--color-primary); --chat--toggle--hover--background: var(--chat--color-primary-shade-50); --chat--toggle--active--background: var(--chat--color-primary-shade-100); --chat--toggle--color: var(--chat--color-white); --chat--toggle--size: 64px; } ``` ---------------------------------------- TITLE: Verifying n8n in Production Mode - pnpm DESCRIPTION: Builds the n8n project and then starts it, allowing developers to verify that their changes function correctly in a production-like environment. This is a crucial step before creating a pull request. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_16 LANGUAGE: Shell CODE: ``` pnpm build pnpm start ``` ---------------------------------------- TITLE: Linting and Fixing Files with pnpm DESCRIPTION: This command lints the project files to enforce code style and quality standards, and automatically fixes any fixable issues. It helps maintain code consistency and identify potential errors. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_4 LANGUAGE: Shell CODE: ``` pnpm lint ``` ---------------------------------------- TITLE: Linting and Fixing Code with pnpm DESCRIPTION: This command lints the project files to identify and fix code style issues and potential errors, ensuring code quality and consistency. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_5 LANGUAGE: Shell CODE: ``` pnpm lint ``` ---------------------------------------- TITLE: Installing n8n-workflow Package DESCRIPTION: This command installs the `n8n-workflow` package from the npm registry. It is a fundamental step to set up the necessary dependencies for developing or utilizing n8n workflows in your project. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/workflow/README.md#_snippet_0 LANGUAGE: Shell CODE: ``` npm install n8n-workflow ``` ---------------------------------------- TITLE: Node Operational Parameter Translation Example - JSON DESCRIPTION: Provides an example of translating a node's operational parameter within the `nodeView` section of a node translation file in JSON. It shows how the `displayName` for the 'resource' parameter is structured using dot notation. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_11 LANGUAGE: json CODE: ``` { "nodeView.resource.displayName": "🇩🇪 Resource" } ``` ---------------------------------------- TITLE: Installing n8n-core using npm DESCRIPTION: This command installs the n8n-core package, which provides the core components for n8n, using the Node.js package manager (npm). This is a necessary step to set up the n8n environment. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/core/README.md#_snippet_0 LANGUAGE: shell CODE: ``` npm install n8n-core ``` ---------------------------------------- TITLE: Mounting Vue.js Application to DOM DESCRIPTION: This line mounts the configured Vue.js application instance to the DOM element with the ID 'app'. This is the final step to render the Vue component on the webpage. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_8 LANGUAGE: JavaScript CODE: ``` }).mount('#app'); ``` ---------------------------------------- TITLE: Defining Vector Store Node Constructor Arguments in TypeScript DESCRIPTION: This TypeScript interface defines the essential configuration and callback functions required for any vector store implementation within the n8n platform. It includes metadata, optional methods, various field configurations for different operation modes, and core functions like `populateVectorStore` for document storage and `getVectorStoreClient` for client instance retrieval. The `populateVectorStore` function is noted to support batch processing from version 1.1+. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode/README.md#_snippet_1 LANGUAGE: TypeScript CODE: ``` interface VectorStoreNodeConstructorArgs<T extends VectorStore> { meta: NodeMeta; // Node metadata (name, description, etc.) methods?: { ... }; // Optional methods for list searches sharedFields: INodeProperties[]; // Fields shown in all modes insertFields?: INodeProperties[]; // Fields specific to insert mode loadFields?: INodeProperties[]; // Fields specific to load mode retrieveFields?: INodeProperties[]; // Fields specific to retrieve mode updateFields?: INodeProperties[]; // Fields specific to update mode // Core implementation functions populateVectorStore: Function; // Store documents in vector store (accepts batches in v1.1+) getVectorStoreClient: Function; // Get vector store instance releaseVectorStoreClient?: Function; // Clean up resources } ``` ---------------------------------------- TITLE: Directory Structure for Grouped Node Translations DESCRIPTION: This snippet outlines the directory structure for translation files within grouped node directories, such as those for Google services. The `/translations` directory, containing language-specific JSON files (e.g., `de/googleDrive.json`), should be placed alongside the main `*.node.ts` file within the specific node's directory. This organization facilitates the management of translations for related nodes. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_5 LANGUAGE: text CODE: ``` Google ├── Books ├── Calendar └── Drive ├── GoogleDrive.node.ts └── translations └── de ├── googleDrive.json └── googleDriveTrigger.json ``` ---------------------------------------- TITLE: Defining Labels Collection Parameter in n8n (JavaScript) DESCRIPTION: This JavaScript object defines a 'collection' type parameter named 'labels' for an n8n node. It allows multiple values, specifies a button text for adding new labels, and defines the structure of each label as a string type with a display name and description. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_17 LANGUAGE: javascript CODE: ``` { displayName: 'Labels', name: 'labels', // key to use in translation type: 'collection', typeOptions: { multipleValues: true, multipleValueButtonText: 'Add Label', }, displayOptions: { show: { operation: [ 'create', ], resource: [ 'issue', ], }, }, default: { 'label': '' }, options: [ { displayName: 'Label', name: 'label', // key to use in translation type: 'string', default: '', description: 'Label to add to issue', }, ], }, ``` ---------------------------------------- TITLE: Setting CSS Color Variables in Vue.js DESCRIPTION: These properties act as setters for various base colors (warning, danger, info, text, border), updating corresponding CSS variables via the `setCssVariable` method. They allow dynamic theme adjustments. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_0 LANGUAGE: JavaScript CODE: ``` color_warning(v) { this.setCssVariable('color-warning-base', v); }, color_danger(v) { this.setCssVariable('color-danger-base', v); }, color_info(v) { this.setCssVariable('color-info-base', v); }, color_text_primary(v) { this.setCssVariable('color-text-dark', v); }, color_text_regular(v) { this.setCssVariable('color-text-base', v); }, color_text_secondary(v) { this.setCssVariable('color-text-light', v); }, color_text_placeholder(v) { this.setCssVariable('color-text-lighter', v); }, border_color_base(v) { this.setCssVariable('border-color-base', v); }, border_color_light(v) { this.setCssVariable('border-color-light', v); }, border_color_lighter(v) { this.setCssVariable('border-color-lighter', v); }, border_color_extra_light(v) { this.setCssVariable('border-color-xlight', v); } ``` ---------------------------------------- TITLE: Directory Structure for Versioned Node Translations DESCRIPTION: This snippet illustrates the recommended directory structure for placing translation files for nodes located in versioned directories. The `/translations` directory, containing language-specific JSON files (e.g., `de/mattermost.json`), should be placed alongside the versioned `*.node.ts` file. This ensures that translations are correctly associated with their respective node versions. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_4 LANGUAGE: text CODE: ``` Mattermost └── Mattermost.node.ts └── v1 ├── MattermostV1.node.ts ├── actions ├── methods ├── transport └── translations └── de └── mattermost.json ``` ---------------------------------------- TITLE: Locating Node Translation Files - Directory Structure DESCRIPTION: Illustrates the expected directory structure for node translation files within an n8n project, showing where `github.json` and `githubTrigger.json` for the German locale (`de`) are placed relative to their corresponding node files. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_4 LANGUAGE: text CODE: ``` GitHub ├── GitHub.node.ts ├── GitHubTrigger.node.ts └── translations └── de ├── github.json └── githubTrigger.json ``` ---------------------------------------- TITLE: Updating Asynchronous Binary Stream Handling in n8n Nodes (TypeScript) DESCRIPTION: This snippet demonstrates the change in `this.helpers.getBinaryStream()` from synchronous to asynchronous in n8n nodes. Users must now prepend `await` when calling this helper to ensure proper handling of the returned Promise, preventing potential issues with binary data streams. This change affects custom nodes interacting with binary data. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_0 LANGUAGE: TypeScript CODE: ``` const binaryStream = this.helpers.getBinaryStream(id); // until 1.9.0 const binaryStream = await this.helpers.getBinaryStream(id); // since 1.9.0 ``` ---------------------------------------- TITLE: Installing Build Tools on Windows DESCRIPTION: This command uses npm to globally install 'windows-build-tools', providing the necessary compilation environment for n8n development on Windows. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_2 LANGUAGE: npm CODE: ``` npm add -g windows-build-tools ``` ---------------------------------------- TITLE: Adding Upstream Remote to n8n Repository - Git DESCRIPTION: Adds the original n8n repository as an 'upstream' remote to your forked repository. This configuration allows you to easily synchronize your fork with the latest changes from the main n8n project. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_10 LANGUAGE: Shell CODE: ``` git remote add upstream https://github.com/n8n-io/n8n.git ``` ---------------------------------------- TITLE: Defining Node Operational Parameters for Translation - TypeScript DESCRIPTION: Demonstrates how operational parameters for a node are defined in TypeScript, specifically highlighting the `name` property (e.g., 'resource') which serves as the key for translating `displayName`, `description`, and `placeholder` values within the `nodeView` section of the node translation file. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_10 LANGUAGE: typescript CODE: ``` export class Github implements INodeType { description: INodeTypeDescription = { displayName: 'GitHub', name: 'github', properties: [ { displayName: 'Resource', name: 'resource', // key to use in translation type: 'options', options: [], default: 'issue', description: 'The resource to operate on.', }, ``` ---------------------------------------- TITLE: Defining Node Name for Translation File - TypeScript DESCRIPTION: Shows how the `name` property within a node's `description` object in TypeScript is used to determine the name of its corresponding translation file. This `name` property, 'github' in this example, directly maps to `github.json`. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_5 LANGUAGE: typescript CODE: ``` export class Github implements INodeType { description: INodeTypeDescription = { displayName: 'GitHub', name: 'github', // to use for node translation file name icon: 'file:github.svg', group: ['input'], ``` ---------------------------------------- TITLE: Listing All Docker Containers DESCRIPTION: This command lists all Docker containers, including those that are stopped (`-a` flag). It is used to find the `container_id` of a running or stopped n8n container for subsequent management operations like stopping or removing. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_6 LANGUAGE: bash CODE: ``` docker ps -a ``` ---------------------------------------- TITLE: Installing Build Tools on Debian/Ubuntu DESCRIPTION: This command installs essential build tools like 'build-essential' and 'python' on Debian/Ubuntu systems, which are required for compiling certain n8n package dependencies. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_0 LANGUAGE: shell CODE: ``` apt-get install -y build-essential python ``` ---------------------------------------- TITLE: Compiling Project for Production with pnpm DESCRIPTION: This command compiles and minifies the n8n-editor-ui project for production deployment, optimizing it for performance and size. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_3 LANGUAGE: Shell CODE: ``` pnpm build ``` ---------------------------------------- TITLE: Running Development Server with pnpm DESCRIPTION: This command starts a development server for the n8n-editor-ui, enabling hot-reloading and live preview during development. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_2 LANGUAGE: Shell CODE: ``` pnpm serve ``` ---------------------------------------- TITLE: Configuring Fullscreen Mode for n8n Chat Window in CSS DESCRIPTION: This CSS snippet demonstrates how to configure the `html`, `body`, and `#n8n-chat` elements to enable fullscreen mode for the n8n Chat window. By setting `width: 100%` and `height: 100%`, the chat window will occupy the entire available space of its parent container, which is crucial for proper display in fullscreen scenarios. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/chat/README.md#_snippet_7 LANGUAGE: CSS CODE: ``` html, body, #n8n-chat { width: 100%; https://github.com/n8n-io/n8n/blob/master/README.md#license } ``` ---------------------------------------- TITLE: Renaming `evaluateExpression` to `$evaluateExpression` in n8n Functions DESCRIPTION: This snippet illustrates the required change for n8n Function and FunctionItem Nodes where the internal utility function `evaluateExpression(...)` has been renamed to `$evaluateExpression()` for better code normalization and simplification. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_7 LANGUAGE: JavaScript CODE: ``` // Old usage: evaluateExpression(...) // New usage: $evaluateExpression(...) ``` ---------------------------------------- TITLE: Manually Upgrading n8n Workflow Node Types via JSON DESCRIPTION: This advanced upgrade method involves directly editing the workflow's JSON to replace old node types with their new counterparts. It's useful for bulk updates after an n8n version upgrade where node names have changed. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_6 LANGUAGE: JSON CODE: ``` "n8n-nodes-base.amqpSender" -> "n8n-nodes-base.amqp" "n8n-nodes-base.bitbucket" -> "n8n-nodes-base.bitbucketTrigger" "n8n-nodes-base.Coda" -> "n8n-nodes-base.coda" "n8n-nodes-base.eventbrite" -> "n8n-nodes-base.eventbriteTrigger" "n8n-nodes-base.Flow" -> "n8n-nodes-base.flow" "n8n-nodes-base.flow" -> "n8n-nodes-base.flowTrigger" "n8n-nodes-base.gumroad" -> "n8n-nodes-base.gumroadTrigger" "n8n-nodes-base.Jira Software Cloud" -> "n8n-nodes-base.jira" "n8n-nodes-base.Mailchimp" -> "n8n-nodes-base.mailchimpTrigger" "n8n-nodes-base.PayPal" -> "n8n-nodes-base.payPalTrigger" "n8n-nodes-base.Read PDF" -> "n8n-nodes-base.readPDF" "n8n-nodes-base.Rocketchat" -> "n8n-nodes-base.rocketchat" "n8n-nodes-base.shopify" -> "n8n-nodes-base.shopifyTrigger" "n8n-nodes-base.shopifyNode" -> "n8n-nodes-base.shopify" "n8n-nodes-base.stripe" -> "n8n-nodes-base.stripeTrigger" "n8n-nodes-base.toggl" -> "n8n-nodes-base.togglTrigger" ``` ---------------------------------------- TITLE: Defining Interpolated Strings in JSON for i18n DESCRIPTION: This JSON snippet illustrates the use of interpolation in i18n strings. Variables enclosed in curly braces, such as `{activeExecutionId}`, act as placeholders that will be dynamically replaced with actual values at runtime. This allows for flexible message construction while maintaining translatability. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_1 LANGUAGE: json CODE: ``` { "stopExecution.message": "The execution with the ID {activeExecutionId} got stopped!", "stopExecution.title": "Execution stopped" } ``` ---------------------------------------- TITLE: Implementing Dependency Injection with @n8n/di in TypeScript DESCRIPTION: This TypeScript example demonstrates how to use the `@Service()` decorator to register classes for dependency injection and how to retrieve instances using `Container.get()`. It shows automatic injection of `ExampleInjectedService` into `ExampleService`'s constructor, enabling modular and testable code. This pattern is derived from `typedi`'s usage. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/di/README.md#_snippet_0 LANGUAGE: TypeScript CODE: ``` // from https://github.com/typestack/typedi/blob/develop/README.md import { Container, Service } from 'typedi'; @Service() class ExampleInjectedService { printMessage() { console.log('I am alive!'); } } @Service() class ExampleService { constructor( // because we annotated ExampleInjectedService with the @Service() // decorator TypeDI will automatically inject an instance of // ExampleInjectedService here when the ExampleService class is requested // from TypeDI. public injectedService: ExampleInjectedService ) {} } const serviceInstance = Container.get(ExampleService); // we request an instance of ExampleService from TypeDI serviceInstance.injectedService.printMessage(); // logs "I am alive!" to the console ``` ---------------------------------------- TITLE: Running All n8n Tests - pnpm DESCRIPTION: Executes all unit tests across all n8n packages. If run within a specific package folder, it will only run the tests for that particular package, otherwise, it runs all tests from the n8n-root folder. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_17 LANGUAGE: Shell CODE: ``` pnpm test ``` ---------------------------------------- TITLE: Running Unit Tests with pnpm DESCRIPTION: This command specifically runs the unit tests for the n8n-editor-ui, testing individual components or functions in isolation. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_7 LANGUAGE: Shell CODE: ``` pnpm test:unit ``` ---------------------------------------- TITLE: Building CSS Theme Files with pnpm DESCRIPTION: This command compiles and builds the CSS theme files for the design system. It generates the necessary stylesheets that define the visual appearance and styling of the application. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_5 LANGUAGE: Shell CODE: ``` pnpm build:theme ``` ---------------------------------------- TITLE: Implementing Reusable Base Text in i18n JSON DESCRIPTION: This snippet demonstrates how to define and reuse common text strings within a JSON translation file using the `_reusableBaseText` key. By referencing a reusable string with `@:_reusableBaseText.key`, translators can avoid redundant translations and ensure consistency across different parts of the application. This mechanism is similar to Vue i18n's linked locale messages. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_3 LANGUAGE: json CODE: ``` { "_reusableBaseText.save": "🇩🇪 Save", "duplicateWorkflowDialog.enterWorkflowName": "🇩🇪 Enter workflow name", "duplicateWorkflowDialog.save": "@:_reusableBaseText.save", "saveButton.save": "@:_reusableBaseText.save", "saveButton.saving": "🇩🇪 Saving", "saveButton.saved": "🇩🇪 Saved" } ``` ---------------------------------------- TITLE: Running n8n Benchmark CLI Docker Container DESCRIPTION: This snippet shows how to run the `n8n-benchmark` Docker image, passing n8n user credentials and the base URL as environment variables. The `N8N_BASE_URL` is specifically configured for macOS when n8n runs outside Docker, enabling the benchmark tool to connect to the n8n instance. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_7 LANGUAGE: sh CODE: ``` docker run \ -e N8N_USER_EMAIL=user@n8n.io \ -e N8N_USER_PASSWORD=password \ # For macos, n8n running outside docker -e N8N_BASE_URL=http://host.docker.internal:5678 \ n8n-benchmark ``` ---------------------------------------- TITLE: Running E2E Tests with Built UI (pnpm) DESCRIPTION: Starts the n8n application and runs end-to-end tests interactively using the pre-built UI code. This command is suitable for testing a stable build as it does not automatically react to subsequent code changes, providing a consistent testing environment. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_19 LANGUAGE: Shell CODE: ``` pnpm test:e2e:ui ``` ---------------------------------------- TITLE: Standardizing Document Processing for Vector Stores in TypeScript DESCRIPTION: This TypeScript snippet demonstrates the usage of the `processDocument` function, which standardizes the handling of input documents before they are used with a vector store. It takes `documentInput`, `itemData`, and `itemIndex` as arguments and returns an object containing `processedDocuments` and `serializedDocuments`, ensuring consistent document preparation across operations. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/nodes-langchain/nodes/vector_store/shared/createVectorStoreNode/README.md#_snippet_3 LANGUAGE: TypeScript CODE: ``` const { processedDocuments, serializedDocuments } = await processDocument( documentInput, itemData, itemIndex ); ``` ---------------------------------------- TITLE: Installing n8n-nodes-base globally via npm DESCRIPTION: This command installs the `n8n-nodes-base` package globally using npm, making the default n8n nodes available for use across your system. This is a prerequisite for developing or extending n8n functionalities. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/nodes-base/README.md#_snippet_0 LANGUAGE: Shell CODE: ``` npm install n8n-nodes-base -g ``` ---------------------------------------- TITLE: Installing Corepack via Homebrew on macOS DESCRIPTION: This command is specifically for macOS users who installed Node.js via Homebrew, as Homebrew explicitly removes corepack. It ensures corepack is available for managing package managers. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_6 LANGUAGE: brew CODE: ``` brew install corepack ``` ---------------------------------------- TITLE: Defining Reusable Dynamic Text for Node Parameters DESCRIPTION: This JSON snippet shows how to define reusable dynamic text for node parameters using the `_reusableDynamicText` key. This allows common parameter labels, like 'Client ID' or 'Client Secret', to be translated once and reused across all relevant node credential parameters, promoting consistency and reducing translation effort. Currently, this feature is supported for `oauth.clientId` and `oauth.clientSecret`. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_6 LANGUAGE: json CODE: ``` { "_reusableDynamicText.oauth2.clientId": "🇩🇪 Client ID", "_reusableDynamicText.oauth2.clientSecret": "🇩🇪 Client Secret" } ``` ---------------------------------------- TITLE: Installing n8n-node-dev CLI DESCRIPTION: This command installs the n8n-node-dev command-line interface globally using npm, making it available for use from any directory on the system. It is the first step to set up the development environment for n8n custom nodes and credentials. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/node-dev/README.md#_snippet_0 LANGUAGE: Shell CODE: ``` npm install n8n-node-dev -g ``` ---------------------------------------- TITLE: Enabling Node.js Corepack DESCRIPTION: This command enables Node.js corepack, a feature that allows managing package managers like pnpm, ensuring the correct version is used across the project. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_3 LANGUAGE: shell CODE: ``` corepack enable ``` ---------------------------------------- TITLE: Example Base Text Translation File (JSON) DESCRIPTION: This JSON snippet illustrates the structure of a base text translation file for n8n's UI. Keys represent specific UI elements (e.g., category names), and their values are the translated strings for a given locale, such as German (🇩🇪). SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_1 LANGUAGE: JSON CODE: ``` { "nodeCreator.categoryNames.analytics": "🇩🇪 Analytics", "nodeCreator.categoryNames.communication": "🇩🇪 Communication", "nodeCreator.categoryNames.coreNodes": "🇩🇪 Core Nodes" } ``` ---------------------------------------- TITLE: Creating New Locale Base Text File (Bash) DESCRIPTION: This command demonstrates the initial step for translating base text: copying the existing English base text file (`en.json`) to a new file named after the target locale (`de.json`). This new file will then be populated with translations. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_2 LANGUAGE: Bash CODE: ``` cp ./packages/frontend/editor-ui/src/plugins/i18n/locales/en.json ./packages/frontend/editor-ui/src/plugins/i18n/locales/de.json ``` ---------------------------------------- TITLE: Importing n8n Workflows and Credentials (CLI) DESCRIPTION: These commands are used to import previously exported n8n workflows and credentials from a specified backup directory using the n8n CLI. This step is performed after upgrading n8n and changing the database, to restore the application's data. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_4 LANGUAGE: bash CODE: ``` n8n import:workflow --separate --input=backups/latest/ n8n import:credentials --separate --input=backups/latest/ ``` ---------------------------------------- TITLE: Running End-to-End Tests with pnpm DESCRIPTION: This command specifically runs the end-to-end tests for the n8n-editor-ui, verifying the complete application flow from a user's perspective. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_6 LANGUAGE: Shell CODE: ``` pnpm test:e2e ``` ---------------------------------------- TITLE: String/Number/Boolean Parameter Translation Example - JSON DESCRIPTION: Shows how `displayName`, `placeholder`, and `description` for string, number, or boolean node parameters are translated within the `nodeView` section of a node translation file in JSON. It uses dot notation to link translations to the parameter's `name` property. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_13 LANGUAGE: json CODE: ``` { "nodeView.owner.displayName": "🇩🇪 Repository Owner", "nodeView.owner.placeholder": "🇩🇪 n8n-io", "nodeView.owner.description": "🇩🇪 Owner of the repository" } ``` ---------------------------------------- TITLE: Starting n8n with German Locale for Translation Testing DESCRIPTION: This snippet sets the default locale for n8n to German and then starts the n8n application. This is the first step in setting up a development environment to test dynamic text translations. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_22 LANGUAGE: sh CODE: ``` export N8N_DEFAULT_LOCALE=de pnpm start ``` ---------------------------------------- TITLE: Initializing PostHog Analytics in JavaScript DESCRIPTION: This self-executing JavaScript function initializes the PostHog analytics library. It sets up the `posthog` object on the window, defines methods for tracking events, identifying users, and managing feature flags, and inserts the PostHog script into the DOM. It's used for collecting usage data and enabling A/B testing. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/index.html#_snippet_2 LANGUAGE: JavaScript CODE: ``` !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled getFeatureFlag onFeatureFlags reloadFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]) ``` ---------------------------------------- TITLE: Installing Cypress for E2E Tests (pnpm) DESCRIPTION: Installs Cypress dependencies required for running end-to-end tests. This command should be executed once before the first test run and whenever Cypress needs to be updated, ensuring all necessary testing tools are in place. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_18 LANGUAGE: Shell CODE: ``` pnpm cypress:install ``` ---------------------------------------- TITLE: Generating and Watching n8n Dynamic Text Translations DESCRIPTION: This snippet sets the default locale to German, navigates into the `packages/nodes-base` directory, generates translation files, and then watches for subsequent changes. This process is crucial for updating and testing dynamic text translations in real-time. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_23 LANGUAGE: sh CODE: ``` export N8N_DEFAULT_LOCALE=de cd packages/nodes-base pnpm n8n-generate-translations pnpm watch ``` ---------------------------------------- TITLE: Defining String/Number/Boolean Parameters for Translation - TypeScript DESCRIPTION: Illustrates the definition of a string parameter in TypeScript, showing how `displayName`, `name`, `placeholder`, and `description` properties are used. The `name` property ('owner') is crucial for mapping to translation keys in the node translation file. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_12 LANGUAGE: typescript CODE: ``` { displayName: 'Repository Owner', name: 'owner', // key to use in translation type: 'string', required: true, placeholder: 'n8n-io', description: 'Owner of the repository.', }, ``` ---------------------------------------- TITLE: Node Header Translation File Example - JSON DESCRIPTION: Illustrates the structure of the `header` section within a node translation file in JSON, showing how `displayName` and `description` are translated. This section provides the localized name and summary for the node. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_9 LANGUAGE: json CODE: ``` { "header": { "displayName": "🇩🇪 GitHub", "description": "🇩🇪 Consume GitHub API" } } ``` ---------------------------------------- TITLE: Building and Running n8n Benchmark CLI Locally DESCRIPTION: This snippet outlines the steps to build the `n8n-benchmark` CLI and then run it locally without Docker. It first builds the project using `pnpm build` and then executes the benchmark with specified user credentials against a local n8n instance, requiring k6 and Node.js v20+. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_8 LANGUAGE: sh CODE: ``` pnpm build # Run tests against http://localhost:5678 with specified email and password N8N_USER_EMAIL=user@n8n.io N8N_USER_PASSWORD=password ./bin/n8n-benchmark run ``` ---------------------------------------- TITLE: Defining Initial CSS Variable Values (JavaScript) DESCRIPTION: This JavaScript object, 'original', defines a comprehensive set of initial color, text, border, and font-related CSS variable values. These values serve as the default theme settings for the application, providing a baseline for styling. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_9 LANGUAGE: JavaScript CODE: ``` const original = { color_primary: '#409EFF', color_success: '#67C23A', color_warning: '#E6A23C', color_danger: '#F56C6C', color_info: '#909399', color_white: '#FFFFFF', color_black: '#000000', color_text_primary: '#303133', color_text_regular: '#606266', color_text_secondary: '#909399', color_text_placeholder: '#C0C4CC', border_color_base: '#DCDFE6', border_color_light: '#E4E7ED', border_color_lighter: '#EBEEF5', border_color_extra_light: '#F2F6FC', font_size_extra_large: '20px', font_size_large: '18px', font_size_medium: '16px', font_size_base: '14px', font_size_small: '13px', font_size_extra_small: '12px', font_weight_primary: 500, font_weight_secondary: 100, font_line_height_primary: '24px', font_line_height_secondary: '16px', }; ``` ---------------------------------------- TITLE: Monitoring and Building Theme Changes with pnpm DESCRIPTION: This command monitors the theme files for any modifications and automatically rebuilds them upon detection. It is particularly useful during development for real-time updates to the theme's styling. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_6 LANGUAGE: Shell CODE: ``` pnpm watch:theme ``` ---------------------------------------- TITLE: Defining Credential Name for Translation (TypeScript) DESCRIPTION: This TypeScript snippet shows how the `name` property within an `ICredentialType` class is crucial for internationalization. The value of this property directly determines the filename of the corresponding credential translation file, enabling dynamic text localization. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_3 LANGUAGE: TypeScript CODE: ``` export class GithubApi implements ICredentialType { name = 'githubApi'; // to use for credential translation file displayName = 'Github API'; documentationUrl = 'github'; properties: INodeProperties[] = [ ``` ---------------------------------------- TITLE: Configuring tsconfig.json for Decorator Support (JSON) DESCRIPTION: This JSON snippet illustrates the essential `compilerOptions` required in `tsconfig.json` to enable decorator functionality in TypeScript projects using `@n8n/di`. Setting `experimentalDecorators` to `true` allows the use of decorators, while `emitDecoratorMetadata` to `true` ensures metadata is emitted for reflection-based dependency injection. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/di/README.md#_snippet_1 LANGUAGE: JSON CODE: ``` { "compilerOptions": { "experimentalDecorators": true, "emitDecoratorMetadata": true } } ``` ---------------------------------------- TITLE: Building n8n Docker Image with Buildx DESCRIPTION: This command builds a multi-platform n8n Docker image using `docker buildx`. It allows specifying the `N8N_VERSION` as a build argument and tags the resulting image with the specified version. This is used for custom builds of n8n Docker images. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_12 LANGUAGE: bash CODE: ``` docker buildx build --platform linux/amd64,linux/arm64 --build-arg N8N_VERSION=<VERSION> -t n8n:<VERSION> . ``` LANGUAGE: bash CODE: ``` # For example: docker buildx build --platform linux/amd64,linux/arm64 --build-arg N8N_VERSION=1.30.1 -t n8n:1.30.1 . ``` ---------------------------------------- TITLE: Setting up n8n for Base Text Translation (Shell) DESCRIPTION: These shell commands demonstrate how to set up the n8n development environment to work with base text translations. The first command sets the default locale to German and starts the n8n application, while the second command navigates to the frontend editor UI package and starts its development server, enabling live rebuilds upon base text file changes. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_21 LANGUAGE: shell CODE: ``` export N8N_DEFAULT_LOCALE=de pnpm start ``` LANGUAGE: shell CODE: ``` export N8N_DEFAULT_LOCALE=de cd packages/frontend/editor-ui pnpm dev ``` ---------------------------------------- TITLE: Defining Credential Parameters for Translation - TypeScript DESCRIPTION: Illustrates how credential parameters are defined in TypeScript, specifically highlighting the `name` property (e.g., 'server', 'user', 'accessToken') which serves as the key for translating `displayName`, `description`, and `placeholder` values in the credential translation file. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_6 LANGUAGE: typescript CODE: ``` export class GithubApi implements ICredentialType { name = 'githubApi'; displayName = 'Github API'; documentationUrl = 'github'; properties: INodeProperties[] = [ { displayName: 'Github Server', name: 'server', // key to use in translation type: 'string', default: 'https://api.github.com', description: 'The server to connect to. Only has to be set if Github Enterprise is used.', }, { displayName: 'User', name: 'user', // key to use in translation type: 'string', default: '', }, { displayName: 'Access Token', name: 'accessToken', // key to use in translation type: 'string', default: '', }, ]; } ``` ---------------------------------------- TITLE: Pulling Unstable (Next) n8n Docker Image DESCRIPTION: This command pulls the `next` tag of the n8n Docker image, which represents the latest unstable or development version. It is typically used for testing upcoming features or bug fixes before they are released as stable. SOURCE: https://github.com/n8n-io/n8n/blob/master/docker/images/n8n/README.md#_snippet_5 LANGUAGE: bash CODE: ``` docker pull docker.n8n.io/n8nio/n8n:next ``` ---------------------------------------- TITLE: Installing n8n Globally via npm DESCRIPTION: This command installs the n8n workflow automation platform globally on your system using npm, making the `n8n` command available from any directory. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/README.md#_snippet_0 LANGUAGE: Shell CODE: ``` npm install n8n -g ``` ---------------------------------------- TITLE: Translating Additional Parameters Fixed Collection in n8n (JSON) DESCRIPTION: This JSON snippet provides German translations for the 'additionalParameters' fixed collection. It includes translations for the collection's display name and placeholder, as well as for the nested 'author' values (name and email), covering their display names, descriptions, and placeholders. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_20 LANGUAGE: json CODE: ``` { "nodeView.additionalParameters.displayName": "🇩🇪 Additional Parameters", "nodeView.additionalParameters.placeholder": "🇩🇪 Add Field", "nodeView.additionalParameters.options.author.displayName": "🇩🇪 Author", "nodeView.additionalParameters.options.author.values.name.displayName": "🇩🇪 Name", "nodeView.additionalParameters.options.author.values.name.description": "🇩🇪 Name of the author of the commit", "nodeView.additionalParameters.options.author.values.name.placeholder": "🇩🇪 Jan", "nodeView.additionalParameters.options.author.values.email.displayName": "🇩🇪 Email", "nodeView.additionalParameters.options.author.values.email.description": "🇩🇪 Email of the author of the commit", "nodeView.additionalParameters.options.author.values.email.placeholder": "🇩🇪 jan@n8n.io" } ``` ---------------------------------------- TITLE: Credential Translation File Example - JSON DESCRIPTION: Provides an example of a credential translation file in JSON format, demonstrating how `displayName`, `description`, and `placeholder` keys are structured using dot notation (e.g., `server.displayName`) to translate specific credential parameters. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_7 LANGUAGE: json CODE: ``` { "server.displayName": "🇩🇪 Github Server", "server.description": "🇩🇪 The server to connect to. Only has to be set if Github Enterprise is used.", "user.placeholder": "🇩🇪 Hans", "accessToken.placeholder": "🇩🇪 123" } ``` ---------------------------------------- TITLE: Activating Latest pnpm via Corepack DESCRIPTION: This command prepares and activates the latest version of pnpm using corepack, recommended for Node.js v16.17 or newer to ensure compatibility and access to the latest features. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_4 LANGUAGE: shell CODE: ``` corepack prepare pnpm@latest --activate ``` ---------------------------------------- TITLE: Building n8n Benchmark CLI Docker Image DESCRIPTION: This command builds the Docker image for the `n8n-benchmark` CLI. It specifies `linux/amd64` as the platform due to k6's architecture limitations and tags the image as `n8n-benchmark`. This is a prerequisite for running the CLI within a Docker container. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_6 LANGUAGE: sh CODE: ``` docker build --platform linux/amd64 -t n8n-benchmark -f packages/@n8n/benchmark/Dockerfile . ``` ---------------------------------------- TITLE: Translating Resource Options Parameter in n8n (JSON) DESCRIPTION: This JSON snippet provides German translations for the 'resource' options parameter. It includes translations for the display name, description, and the names of individual options ('File', 'Issue') using specific keys like `nodeView.resource.displayName`. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_15 LANGUAGE: json CODE: ``` { "nodeView.resource.displayName": "🇩🇪 Resource", "nodeView.resource.description": "🇩🇪 Resource to operate on", "nodeView.resource.options.file.name": "🇩🇪 File", "nodeView.resource.options.issue.name": "🇩🇪 Issue" } ``` ---------------------------------------- TITLE: Copying Dynamic CSS Variables in Vue.js DESCRIPTION: This method retrieves the inline `style` attribute from the `<html>` element, which contains dynamically set CSS variables. It stores these variables in the component's `cssVariables` property and sets `visible` to true, providing feedback if no changes were made. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_7 LANGUAGE: JavaScript CODE: ``` copyCssVariables() { const cssVariables = document.querySelector('html').getAttribute('style'); this.cssVariables = cssVariables ? cssVariables : '没有进行颜色修改,请先修改颜色!'; this.visible = true; } ``` ---------------------------------------- TITLE: Running All n8n Benchmark Scenarios with Docker DESCRIPTION: This command executes all available benchmark scenarios against an n8n instance using the Docker image. It configures the n8n base URL, user credentials, sets 5 concurrent virtual users (VUs), a duration of 1 minute, and filters for the 'single-webhook' scenario. This is used for performance testing an existing n8n instance. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_2 LANGUAGE: sh CODE: ``` docker run ghcr.io/n8n-io/n8n-benchmark:latest run \ --n8nBaseUrl=https://instance.url \ --n8nUserEmail=InstanceOwner@email.com \ --n8nUserPassword=InstanceOwnerPassword \ --vus=5 \ --duration=1m \ --scenarioFilter=single-webhook ``` ---------------------------------------- TITLE: Activating Specific pnpm Version via Corepack DESCRIPTION: This command prepares and activates a specific older version of pnpm (9.15.5) using corepack, useful for environments with older Node.js versions that might not support the latest pnpm. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_5 LANGUAGE: shell CODE: ``` corepack prepare pnpm@9.15.5 --activate ``` ---------------------------------------- TITLE: Setting n8n Editor-UI Base Paths in JavaScript DESCRIPTION: This JavaScript snippet initializes global window variables for `BASE_PATH` and `REST_ENDPOINT`. These variables are crucial for the n8n Editor-UI to correctly resolve its assets and API calls. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/index.html#_snippet_1 LANGUAGE: JavaScript CODE: ``` window.BASE_PATH = '/{{BASE_PATH}}/'; window.REST_ENDPOINT = '{{REST_ENDPOINT}}'; ``` ---------------------------------------- TITLE: Pulling and Getting Help for n8n Benchmark Docker Image DESCRIPTION: This snippet demonstrates how to pull the latest n8n benchmark Docker image and how to display the help message to list all available command-line flags. This is the initial step for using the pre-built benchmark tool. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_1 LANGUAGE: sh CODE: ``` docker pull ghcr.io/n8n-io/n8n-benchmark:latest docker run ghcr.io/n8n-io/n8n-benchmark:latest run --help ``` ---------------------------------------- TITLE: Accessing Color Data Proxy in Vue.js DESCRIPTION: This method dynamically accesses a color property based on a provided string value, converting the input to lowercase. It serves as a proxy to retrieve specific color configurations. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_2 LANGUAGE: JavaScript CODE: ``` dataProxy(value) { return this[`color_${value.toLowerCase()}`]; } ``` ---------------------------------------- TITLE: Translating Webhook Node Event Trigger Description DESCRIPTION: This snippet demonstrates how to translate the `eventTriggerDescription` property for a Webhook node. Since `eventTriggerDescription` is a dynamic node property not part of standard node parameters, its translation key is set at the root level of the `nodeView` property within the node's translation file. This ensures the description is localized correctly. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_7 LANGUAGE: json CODE: ``` { "nodeView.eventTriggerDescription": "🇩🇪 Waiting for you to call the Test URL" } ``` ---------------------------------------- TITLE: n8n Benchmark Tool Directory Structure DESCRIPTION: This snippet illustrates the directory structure of the `@n8n/benchmark` package, outlining the location of benchmark scenarios, source code for the CLI, Dockerfile, and orchestration scripts. It provides an overview of the project's organization. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_0 LANGUAGE: text CODE: ``` packages/@n8n/benchmark ├── scenarios Benchmark scenarios ├── src Source code for the n8n-benchmark cli ├── Dockerfile Dockerfile for the n8n-benchmark cli ├── scripts Orchestration scripts ``` ---------------------------------------- TITLE: Running Custom n8n Benchmark Scenarios with Docker DESCRIPTION: This snippet shows how to run custom benchmark scenarios by mounting a local 'scenarios' directory into the Docker container. It uses the `--testScenariosPath` flag to specify the location of the custom scenarios, allowing for flexible and tailored benchmarking. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_3 LANGUAGE: sh CODE: ``` docker run -v ./scenarios:/scenarios ghcr.io/n8n-io/n8n-benchmark:latest run \ --n8nBaseUrl=https://instance.url \ --n8nUserEmail=InstanceOwner@email.com \ --n8nUserPassword=InstanceOwnerPassword \ --vus=5 \ --duration=1m \ --testScenariosPath=/scenarios ``` ---------------------------------------- TITLE: Installing json-schema-to-zod package DESCRIPTION: This snippet demonstrates how to install the `@n8n/json-schema-to-zod` package using npm, which is required to use its functionalities for converting JSON schemas to Zod schemas. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/json-schema-to-zod/README.md#_snippet_0 LANGUAGE: sh CODE: ``` npm install @n8n/json-schema-to-zod ``` ---------------------------------------- TITLE: Setting Global Theme Configuration in Vue.js DESCRIPTION: This method initializes the component's global theme configuration from `window.userThemeConfig.global` if it exists. It ensures the component uses predefined user theme settings. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_3 LANGUAGE: JavaScript CODE: ``` setGlobal() { if (window.userThemeConfig) { this.global = window.userThemeConfig.global; } } ``` ---------------------------------------- TITLE: Configuring n8n Expression Language with JavaScript Support DESCRIPTION: This snippet demonstrates how to configure the n8n expression language parser to support mixed JavaScript content using CodeMirror. It imports necessary modules, defines a mixed parser that overlays JavaScript parsing on 'Resolvable' nodes, and exports a LanguageSupport instance for CodeMirror. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/codemirror-lang/src/expressions/README.md#_snippet_0 LANGUAGE: JavaScript CODE: ``` import { parserWithMetaData as n8nParser } from '@n8n/codemirror-lang'; import { LanguageSupport, LRLanguage } from '@codemirror/language'; import { parseMixed } from '@lezer/common'; import { parser as jsParser } from '@lezer/javascript'; const n8nPlusJsParser = n8nParser.configure({ wrap: parseMixed((node) => { if (node.type.isTop) return null; return node.name === 'Resolvable' ? { parser: jsParser, overlay: (node) => node.type.name === 'Resolvable' } : null; }), }); const n8nLanguage = LRLanguage.define({ parser: n8nPlusJsParser }); export function n8nExpressionLanguageSupport() { return new LanguageSupport(n8nLanguage); } ``` ---------------------------------------- TITLE: Translating Cron Node Activation Message DESCRIPTION: This JSON snippet shows how to translate the `activationMessage` property for a Cron node. Similar to `eventTriggerDescription`, `activationMessage` is a dynamic node property that requires its translation key to be placed at the root level of the `nodeView` property in the node's translation file. This ensures the activation message is properly localized. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/ADDENDUM.md#_snippet_8 LANGUAGE: json CODE: ``` { "nodeView.activationMessage": "🇩🇪 'Your cron trigger will now trigger executions on the schedule you have defined." } ``` ---------------------------------------- TITLE: Debugging Flaky End-to-End Tests - Bash DESCRIPTION: This command initiates the debugging process for flaky end-to-end tests. It allows specifying a filter for test titles or tags and the number of times to repeat the tests. The `grep_filter` is optional for narrowing down tests, and `burn_count` determines the repetition count, defaulting to 5 if not provided. SOURCE: https://github.com/n8n-io/n8n/blob/master/cypress/README.md#_snippet_0 LANGUAGE: bash CODE: ``` pnpm run debug:flaky:e2e -- <grep_filter> <burn_count> ``` ---------------------------------------- TITLE: Translating Labels Collection Parameter in n8n (JSON) DESCRIPTION: This JSON snippet provides German translations for the 'labels' collection parameter. It includes translations for the display name, the multiple value button text, and the display name, description, and placeholder for the individual 'label' option within the collection. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_18 LANGUAGE: json CODE: ``` { "nodeView.labels.displayName": "🇩🇪 Labels", "nodeView.labels.multipleValueButtonText": "🇩🇪 Add Label", "nodeView.labels.options.label.displayName": "🇩🇪 Label", "nodeView.labels.options.label.description": "🇩🇪 Label to add to issue", "nodeView.labels.options.label.placeholder": "🇩🇪 Some placeholder" } ``` ---------------------------------------- TITLE: Running n8n Benchmark Suite in the Cloud DESCRIPTION: This command triggers the execution of the full n8n benchmark suite in a cloud environment. It's designed for comprehensive performance testing and analysis in a scalable and production-like setting. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_5 LANGUAGE: sh CODE: ``` pnpm benchmark-in-cloud ``` ---------------------------------------- TITLE: Running n8n Benchmark Suite Locally DESCRIPTION: This command initiates the entire n8n benchmark suite for local execution. It's a convenient way to run all defined benchmark scenarios and n8n setups on the local machine, typically for development or quick testing. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/@n8n/benchmark/README.md#_snippet_4 LANGUAGE: sh CODE: ``` pnpm benchmark-locally ``` ---------------------------------------- TITLE: Running Flaky E2E Tests by Tag - Bash DESCRIPTION: This example demonstrates how to run end-to-end tests specifically tagged with `CAT-726` ten times. It uses the `grep_filter` parameter to target tests by their tag and the `burn_count` parameter to specify the number of repetitions. SOURCE: https://github.com/n8n-io/n8n/blob/master/cypress/README.md#_snippet_1 LANGUAGE: bash CODE: ``` pnpm run debug:flaky:e2e CAT-726 10 ``` ---------------------------------------- TITLE: Running All Flaky E2E Tests - Bash DESCRIPTION: This example illustrates how to run all end-to-end tests without any specific filtering. The tests will be executed five times, utilizing both the default `grep_filter` (no filter) and the default `burn_count`. SOURCE: https://github.com/n8n-io/n8n/blob/master/cypress/README.md#_snippet_3 LANGUAGE: bash CODE: ``` pnpm run debug:flaky:e2e ``` ---------------------------------------- TITLE: Translating Custom API Call Option for n8n Resource (JSON) DESCRIPTION: This JSON snippet demonstrates how to translate the special `__CUSTOM_API_CALL__` option that is injected into `Resource` and `Operation` parameters for nodes whose credentials can be used in the HTTP Request node. It provides the German translation for this additional option. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/editor-ui/src/plugins/i18n/docs/README.md#_snippet_16 LANGUAGE: json CODE: ``` { "nodeView.resource.options.file.name": "🇩🇪 File", "nodeView.resource.options.issue.name": "🇩🇪 Issue", "nodeView.resource.options.__CUSTOM_API_CALL__.name": "🇩🇪 Custom API Call" } ``` ---------------------------------------- TITLE: Installing Build Tools on CentOS DESCRIPTION: This command installs core build tools including 'gcc', 'gcc-c++', and 'make' on CentOS systems, necessary for compiling n8n's dependencies. SOURCE: https://github.com/n8n-io/n8n/blob/master/CONTRIBUTING.md#_snippet_1 LANGUAGE: shell CODE: ``` yum install gcc gcc-c++ make ``` ---------------------------------------- TITLE: Converting Hexadecimal to HSL Color in JavaScript DESCRIPTION: This function converts a hexadecimal color string into its HSL (Hue, Saturation, Lightness) representation. It parses the hex values, normalizes them, and calculates H, S, and L components, returning an object with these values. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_5 LANGUAGE: JavaScript CODE: ``` hexToHSL(hex) { var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); var r = parseInt(result[1], 16); var g = parseInt(result[2], 16); var b = parseInt(result[3], 16); (r /= 255), (g /= 255), (b /= 255); var max = Math.max(r, g, b), min = Math.min(r, g, b); var h, s, l = (max + min) / 2; if (max == min) { h = s = 0; // achromatic } else { var d = max - min; s = l > 0.5 ? d / (2 - max - min) : d / (max + min); switch (max) { case r: h = (g - b) / d + (g < b ? 6 : 0); break; case g: h = (b - r) / d + 2; break; case b: h = (r - g) / d + 4; break; } h /= 6; } s = s * 100; s = Math.round(s); l = l * 100; l = Math.round(l); h = Math.round(360 * h); return { h: h, s: s + '%', l: l + '%', }; } ``` ---------------------------------------- TITLE: Calling Tint Color Helper in Vue.js DESCRIPTION: This method simply calls an external `tintColor` helper function, passing through the provided arguments. It acts as a wrapper for color tinting functionality. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/theme/preview/index.html#_snippet_1 LANGUAGE: JavaScript CODE: ``` tintColor(a, b) { return tintColor(a, b); } ``` ---------------------------------------- TITLE: Starting n8n via JavaScript File (Deprecated) - Shell DESCRIPTION: This command illustrates the previous method for starting n8n directly from its JavaScript distribution file. It is provided for context to identify setups that require an update. This approach is no longer recommended due to changes in the underlying CLI library and security concerns. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/cli/BREAKING-CHANGES.md#_snippet_8 LANGUAGE: Shell CODE: ``` /usr/local/bin/node ./dist/index.js start ``` ---------------------------------------- TITLE: Building Static Storybook Pages with pnpm DESCRIPTION: This command generates static pages for the Storybook component system. The resulting output can be deployed as a standalone static site, useful for documentation or showcasing components. SOURCE: https://github.com/n8n-io/n8n/blob/master/packages/frontend/@n8n/design-system/README.md#_snippet_2 LANGUAGE: Shell CODE: ``` pnpm build:storybook ```

Latest Blog Posts

MCP directory API

We provide all the information about MCP servers via our MCP API.

curl -X GET 'https://glama.ai/api/mcp/v1/servers/LeadBroaf/mcp-agent-server'

If you have feedback or need assistance with the MCP directory API, please join our Discord server