---
title: "Diff Operator"
slug: "diff-operator"
updated: 2025-12-23T15:27:41Z
published: 2025-12-23T15:27:41Z
canonical: "docs.unqork.io/diff-operator"
---

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

# Diff Operator

UDesignerClassic Designer

![A static image displaying the Diff operator and its Info Window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Diff%20Operator_Info.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)

The **Diff operator** lets you determine the differences between two sets of data. The operator uses the [deep-diff npm package](https://www.npmjs.com/package/deep-diff) to determine the structural differences between objects. You'll input each of your data sets or JSON objects into the operator, where it examines each data source and outputs a list of the differences. Each difference is identified by a single letter that represents a type of difference.

Below are the letters and what they represent:

- **N**: A key or value was added.
- **D**: A key or value was deleted.
- **E**: A key or value was edited.
- **A**: A change occurred in an array index. Maining, an entire row was added or deleted.

The operator includes an upper and lower input port, an argument port, and an output port. You'll see the upper input port referred to as the **lhs** (left-hand side) port. The data input into this port serves as the starting point for your Diff operator. The lower input port is referred to as the **rhs** (right-hand side) port. So, if you see an **N** in the operator's output, that means there is a new value in the data connected to the **rhs**. It's a new value because it was not included in the data connected to the **lhs**.

## About the Info Window

And here's a breakdown of each setting in the Info window:

| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |

## Adding a Diff Operator

In this example, you'll configure two [Data Table](https://docs.unqork.io/docs/data-table-component) components that store customer order information. Then, you’ll use a [Data Workflow](https://docs.unqork.io/docs/data-workflow-component) component with a Diff operator to identify the differences.

> [!NOTE]
> These instructions assume you have a new module open, saved, and with a title.

### Configure the First Data Table Component

You'll use a Data Table component to create a set of data as your starting point.

1. In the Module Builder, drag and drop a **Data Table** component onto your canvas.
2. In the **Property ID** field, enter `dtOriginalData`.
3. In the data table, enter the following:

| name | order status |
| --- | --- |
| Mark | confirmed |
| Anna | processed |
| Harry | declined |

![A static image displaying the configuration of the dtOriginalData Data Table component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Diff%20operator_Data%20Table___dtOriginalData.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
4. Click **Save Component**.

### Configure the Second Data Table Component

Add an updated version of your original data. This data set is similar to your first one, with only slight changes. Later, you’ll use a Data Workflow with a Diff operator to identify the differences.

1. Drag and drop another **Data Table** component onto your canvas, placing it below the `dtOriginalData` **Data Table** component.
2. In the **Property ID** field, enter `dtUpdatedData`.
3. In the data table, enter the following:

| name | order status | date |
| --- | --- | --- |
| Mark | delivered | 10/11/21 |
| Anna | shipped | 10/10/21 |
| Harry | returned | 10/09/21 |

![A static image displaying the configuration of the dtUpdatedData Data Table component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Diff%20operator_Data%20Table__dtUpdatedData.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
4. Click **Save Component**.

### Configure the Data Workflow Component

Add a [Data Workflow](/v1/docs/data-workflow-component) that uses two [Input](/v1/docs/input-operator) operators to bring in your data sets. Connect them to a Diff operator to compare the sets and find differences. Add three [Console](/v1/docs/console-operator) operators to view the data at each step.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `dtUpdatedData` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dwfDiff`.

#### Configure the First Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtOriginalData |
| Required | Yes |
| Source | Default |

#### Configure the First Console Operator

1. Drag and drop a **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Original Data |
3. Connect the output port (right) of the `dtOriginalData` **Input** operator to the input port (left) of the `Original Data` **Console** operator.

#### Configure the Diff Operator

1. Drag and drop a **Diff** operator onto your Data Workflow canvas.
2. Configure the operator's Info window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Order Status Changes |
3. Connect the output port (right) of the `dtOriginalData` **Input** operator to the upper input port (left) of the `Order Status Changes` **Diff** operator.

#### Configure the Second Input Operator

1. Drag and drop another **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtUpdatedData |
| Required | Yes |
| Source | Default |
3. Connect the output port (right) of the `dtUpdatedData` **Input** operator to the lower input port (left) of the `Order Status Changes` **Diff** operator.

#### Configure the Second Console Operator

1. Drag and drop another **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Updated Data |
3. Connect the output port (right) of the `dtUpdatedData` **Input** operator to the input port (left) of the `Updated Data` **Console** operator.

#### Configure the Third Console Operator

1. Drag and drop a third **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Diff Output |
3. Connect the output port (right) of the `Diff Output` **Diff** operator to the input port (left) of the `Diff Output` **Console** operator.

![A static image displaying the configuration of the dwfDiff Data Workflow.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Diff%20operator_DWF_dwfDiff.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
4. Click **Save Component**.

### Configure the Button Component

Add a [Button](https://docs.unqork.io/docs/button-component) component to trigger the operation.

1. Drag and drop a **Button** component onto your canvas, placing it above the `dwfDiff` **Data Workflow** component.
2. In the **Property ID** field, enter `btnDiffDwf`.
3. In the **Label Text** field, enter `Find Difference`.
4. In the **Action Type** tab, select **Event**.
5. In the **Triggers On Click** field, select **dwfDiff**.

![A static image displaying the configuration of the btnDiffDwf Buttons component in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Diff%20operator_Button_btnDiffDwf.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
6. Click **Save Component**.
7. **Save** your module.

Here's how the completed example looks in the Module Builder:

![A static image displaying the configuration of the module in the UDesigner.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/UD_Diff%20operator_module.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)

Preview your module in Express View and open the DevTools Console. Click the **Find Difference** button, and you'll see the outputs of the three **Console** operators. In the `Diff Output` **Console,** you'll see each element that has changed between the `dtOriginalData` and `dtUpdatedData` **Data Table** components.

![A static image displaying the outputs of the three Console operators in the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Diff%20operator_DevTools%20Console.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)

In the index `0`, you'll see the `kind` key listed as `E`, which means an entry has been edited. The Diff operator refers to the upper input port as **lhs** (left-hand side), so the `lhs` key is `declined` because it represents the original value. Below that value, you'll see `rhs` as `returned`. Because the Diff operator refers to the lower input port as **rhs** (right-hand side), this value is in the updated data set.

> [!NOTE]
> The `path` in this output shows where the change occurred. In this case, it's the `order status` column of the data set. You'll also notice the number `2`. That value represents the index where the change occurred. This index only displays when working with data from a data table. If you're working with JSON objects, you will not see the index here.

> [!WARNING]
> Ensure your Diff operator inputs have differences. If your inputs have no differences, your Data Workflow returns a circular reference error.

![A static image displaying the Diff operator and its Info window.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Diff%20operator_Info.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)

The **Diff operator** lets you determine the differences between two sets of data. The operator uses the [deep-diff npm package](https://www.npmjs.com/package/deep-diff) to determine the structural differences between objects. You'll input each of your data sets or JSON objects into the operator, where it examines each data source and outputs a list of the differences. Each difference is identified by a single letter that represents a type of difference.

Below are the letters and what they represent:

- **N**: A key or value was added.
- **D**: A key or value was deleted.
- **E**: A key or value was edited.
- **A**: A change occurred in an array index. Maining, an entire row was added or deleted.

The operator includes an upper and lower input port, an argument port, and an output port. You'll see the upper input port referred to as the **lhs** (left-hand side) port. The data input into this port serves as the starting point for your Diff operator. The lower input port is referred to as the **rhs** (right-hand side) port. So, if you see an **N** in the operator's output, that means there is a new value in the data connected to the **rhs**. It's a new value because it was not included in the data connected to the **lhs**.

## About the Info Window

And here's a breakdown of each setting in the Info window:

| Setting | Description |
| --- | --- |
| Category | Grayed out and non-adjustable setting indicating the operation type. |
| Label | Sets the label for your operator, displaying below the operator on your Data Workflow canvas. This field is optional, but set a label if you use more than one of the same operator type. A label helps you identify your operators without opening any Info windows. |
| Preserve Argument Type | When selected, this setting ensures the argument data type is respected when the operator executes. |

## Adding a Diff Operator

In this example, you'll configure two [Data Table](https://docs.unqork.io/docs/data-table-component) components that store customer order information. Then, you’ll use a [Data Workflow](https://docs.unqork.io/docs/data-workflow-component) component with a Diff operator to identify the differences.

> [!NOTE]
> These instructions assume you have a new module open, saved, and with a title.

### Configure the First Data Table Component

You'll use a Data Table component to create a set of data as your starting point.

1. Drag and drop a **Data Table** component onto your canvas.
2. In the **Property ID** and **Canvas** **Label Text** fields, enter `dtOriginalData`.
3. In the data table, enter the following:

| name | order status |
| --- | --- |
| Mark | confirmed |
| Anna | processed |
| Harry | declined |

![Data table displaying names and their corresponding order statuses for users.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Diff operator_Data Table___dtOriginalData(1).png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
4. Click **Save & Close**.

### Configure the Second Data Table Component

Add an updated version of your original data. This data set is similar to your first one, with only slight changes. Later, you’ll use a Data Workflow with a Diff operator to identify the differences.

1. Drag and drop another **Data Table** component onto your canvas, placing it below the `dtOriginalData` **Data Table** component.
2. In the **Property ID** and **Canvas Label Text** fields, enter `dtUpdatedData`.
3. In the data table, enter the following:

| name | order status | date |
| --- | --- | --- |
| Mark | delivered | 10/11/21 |
| Anna | shipped | 10/10/21 |
| Harry | returned | 10/09/21 |

![A static image displaying the configuration of the dtUpdatedData Data Table component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Data%20Table__dtUpdatedData.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
4. Click **Save & Close**.

### Configure the Data Workflow Component

Add a [Data Workflow](/v1/docs/data-workflow-component) that uses two [Input](/v1/docs/input-operator) operators to bring in your data sets. Connect them to a Diff operator to compare the sets and find differences. Add three [Console](/v1/docs/console-operator) operators to view the data at each step.

1. Drag and drop a **Data Workflow** component onto your canvas, placing it below the `dtUpdatedData` **Data Table** component.
2. In the **Canvas Label Text** and **Property Name** fields, enter `dwfDiff`.

#### Configure the First Input Operator

1. Drag and drop an **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtOriginalData |
| Required | Yes |
| Source | Default |

#### Configure the First Console Operator

1. Drag and drop a **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Original Data |
3. Connect the output port (right) of the `dtOriginalData` **Input** operator to the input port (left) of the `Original Data` **Console** operator.

#### Configure the Diff Operator

1. Drag and drop a **Diff** operator onto your Data Workflow canvas.
2. Configure the operator's Info window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Order Status Changes |
3. Connect the output port (right) of the `dtOriginalData` **Input** operator to the upper input port (left) of the `Order Status Changes` **Diff** operator.

#### Configure the Second Input Operator

1. Drag and drop another **Input** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Input |
| Component | dtUpdatedData |
| Required | Yes |
| Source | Default |
3. Connect the output port (right) of the `dtUpdatedData` **Input** operator to the lower input port (left) of the `Order Status Changes` **Diff** operator.

#### Configure the Second Console Operator

1. Drag and drop another **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Updated Data |
3. Connect the output port (right) of the `dtUpdatedData` **Input** operator to the input port (left) of the `Updated Data` **Console** operator.

#### Configure the Third Console Operator

1. Drag and drop a third **Console** operator onto your Data Workflow canvas.
2. Configure the operator's **Info** window as follows:

| Setting | Value |
| --- | --- |
| Category | Console |
| Label | Diff Output |
3. Connect the output port (right) of the `Diff Output` **Diff** operator to the input port (left) of the `Diff Output` **Console** operator.

![A static image displaying the configuration of the dwfDiff Data Workflow in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Diff%20operator_DWF___dwfDiff.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
4. Click **Save**.

### Configure the Button Component

Add a [Button](https://docs.unqork.io/docs/button-component) component to trigger the operation.

1. Drag and drop a **Button** component onto your canvas, placing it above the `dwfDiff` **Data Workflow** component.
2. In the **Property ID** field, enter `btnDiffDwf`.
3. In the **Label Text** field, enter `Find Difference`.
4. Set the **Action Type** as **Event**.
5. In the **On Click** field, enter `dwfDiff`.

![A static image displaying theeee configuration of the btnDiffDwf Button component in Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Diff%20operator_Button_btnDiffDwf.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)
6. Click **Save & Close**.
7. **Save** your module.

Here's how the completed example looks in the Module Builder:

![A static image displaying the configuration of the module in the Classic Designer.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/CD_Diff%20operator_module.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)

Preview your module in Express View and open the DevTools Console. Click the **Find Difference** button, and you'll see the outputs of the three **Console** operators. In the `Diff Output` **Console,** you'll see each element that has changed between the `dtOriginalData` and `dtUpdatedData` **Data Table** components.

![A static image displaying the outputs of the three Console operators in the DevTools Console.](https://cdn.us.document360.io/15548f06-2fba-434c-b0c1-5df88317dbd7/Images/Documentation/Diff%20operator_DevTools%20Console.png?sv=2026-02-06&spr=https&st=2026-11-07T17%3A57%3A36Z&se=2026-11-07T18%3A57%3A36Z&sr=c&sp=r&sig=fCEm7QMtNP4V%2BXImTGnJevALbzIKxwh8wF0D3FSMQ8o%3D)

In the index `0`, you'll see the `kind` key listed as `E`, which means an entry has been edited. The Diff operator refers to the upper input port as **lhs** (left-hand side), so the `lhs` key is `declined` because it represents the original value. Below that value, you'll see `rhs` as `returned`. Because the Diff operator refers to the lower input port as **rhs** (right-hand side), this value is in the updated data set.

> [!NOTE]
> The `path` in this output shows where the change occurred. In this case, it's the `order status` column of the data set. You'll also notice the number `2`. That value represents the index where the change occurred. This index only displays when working with data from a data table. If you're working with JSON objects, you will not see the index here.

> [!WARNING]
> Ensure your Diff operator inputs have differences. If your inputs have no differences, your Data Workflow returns a circular reference error.

An object is a type of data structure that represents a single, self-contained entity that acts as a container for the characteristics of that entity.

JSON (JavaScript Object Notation) is an open standard file and data interchange format. Unqork uses JSON for submission (record) data.

An array is a type of object that stores one or more data types. Data types supported in arrays include numbers, strings, and objects.

The location of an element in an array.

Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.

The DevTools Console helps you securely store, build, test, and deploy your software.