Build Your First Workflow

A hands-on tutorial that walks you through creating a simple workflow with a trigger and a data transformation -- all inside the Canvas editor.

Overview

In this tutorial you will build a workflow that does two things:

Manual Trigger -- starts the workflow on demand with a single click.
Set -- creates a greeting message by setting a variable.

The finished workflow graph looks like this:

Workflow graph

Manual Trigger  -->  Set (greeting)

By the end, you will understand how to add nodes, configure them, connect them with edges, execute a workflow, and inspect the results.

Step 1: Create a New Workflow

Open the dashboard

Navigate to http://localhost:3000 and log in. You will land on the Workflows page.

Create a workflow

Click the New Workflow button in the top-right corner. Give your workflow a name -- for example, Hello World. The Canvas editor will open with an empty canvas.

Auto-save

The Canvas editor automatically saves your changes as you work. You do not need to manually save -- just keep building and your progress is persisted in real time.

Step 2: Add a Manual Trigger

Every workflow starts with a trigger. The Manual Trigger is the simplest one -- it fires when you click the Execute button, making it perfect for testing.

Open the node picker

Click the + button on the canvas toolbar, or right-click anywhere on the canvas and select Add Node.

Search for Manual Trigger

Type Manual Trigger in the search bar. Click the result to add it to the canvas.

Position the node

Drag the node to the left side of the canvas. This is the entry point of your workflow -- data will flow from left to right.

The Manual Trigger has no configuration. It simply emits an empty JSON object ({}) when executed. Other triggers -- such as Webhook, Cron Schedule, or Event Listener -- can be configured with specific parameters.

Step 3: Add a Set Node

The Set node lets you define variables that downstream nodes can reference. You will use it to create a greeting message.

Add the Set node

Open the node picker again and search for Set. Add it to the canvas to the right of the Manual Trigger.

Configure the node

Click on the Set node to open the configuration panel on the right. Add a new field with the following values:

Property	Value
Field Name	`greeting`
Value	`Hello from NodeLoom!`

Expressions

You can use NodeLoom expressions in any field value. For example, {{ $json.name }} would reference a field called name from the previous node's output. Expressions are sandboxed and secure by design.

Step 4: Connect the Nodes

Nodes communicate through edges. You connect them by dragging from an output handle to an input handle.

Connect Manual Trigger to Set

Hover over the right side of the Manual Trigger node until you see the output handle (a small circle). Click and drag from that handle to the input handle on the left side of the Set node. A line will appear connecting them.

Your canvas should now show two nodes connected in a line: Manual Trigger and Set.

Step 5: Execute the Workflow

With the workflow wired up, it is time to run it.

Click Execute

Click the Execute button in the top toolbar (or press Ctrl+Enter / Cmd+Enter). The execution engine runs each node in order, starting from the trigger and working through connected nodes.

Watch the execution

As nodes execute, their borders will flash green to indicate success. If a node fails, it will be highlighted in red with an error message.

Step 6: Inspect the Results

After execution completes, you can inspect the data that flowed through each node.

Click on any node

Click on the Set node. The configuration panel will switch to the Output tab, showing the JSON data that the node produced.

Review the output

You should see the greeting variable in the output:

Set node output

{
  "greeting": "Hello from NodeLoom!"
}

Check the execution log

Open the Executions tab in the left sidebar to see a full log of this run, including timestamps, duration, and the status of every node.

Understanding the Canvas Editor

The Canvas editor is a visual graph editor. Here are some useful interactions:

Action	How
Pan the canvas	Click and drag on empty space, or use scroll wheel
Zoom in/out	Ctrl+Scroll (Cmd+Scroll on macOS), or pinch gesture
Select multiple nodes	Click and drag a selection box, or Shift+Click
Delete a node or edge	Select it and press Delete or Backspace
Undo / Redo	Ctrl+Z / Ctrl+Shift+Z (Cmd on macOS)
Auto-save	Changes are saved automatically after every edit

Try the Simple Flow editor

If you prefer a linear, step-by-step layout over a free-form canvas, switch to the Simple Flow editor from the editor toggle in the toolbar. It presents your workflow as a vertical list of steps -- ideal for straightforward, sequential workflows. You can switch between editors at any time without losing your work.

What's Next

Now that you have built and executed your first workflow, here are some directions to explore:

Workflows -- learn about workflow structure, versioning, and activation.
Nodes -- explore the 169+ built-in nodes available in NodeLoom.
Triggers -- set up webhook, cron, and event-based triggers.
Expressions -- use {{ $json.field }} syntax to pass data dynamically between nodes.
AI Agents -- build autonomous agents with memory, tools, and LLM integration.
Canvas Editor -- deep-dive into the full-featured visual editor.

Quick Start

Workflows