Building Workflow Nodes — Flowork Visual Flow Editor

🧩 Workflow Node javascript v1

How to create custom workflow nodes for the Flowork visual flow editor. Nodes are the building blocks of drag-and-drop workflows. Each node requires a specific JSON/JS skeleton with inputs, outputs, and an execute function.

In this guide, we cover "Building Workflow Nodes — Flowork Visual Flow Editor" for the Flowork AI Knowledge Base. Category: node. Language: javascript.

Architecture Overview

Workflow system: Vue Flow (@vue-flow/core) provides the visual canvas. Nodes are stored in nodes/ directory as .nflow packages or raw folders. Each node defines its inputs (left handles), outputs (right handles), and processing logic. The Go Engine's internal/workflow module orchestrates execution.

Key Patterns

  • Each node folder must contain: manifest.json, schema.json, execute.js, icon.svg
  • manifest.json defines node metadata, input/output ports, and category
  • execute.js exports an async function that receives inputs and returns outputs
  • Nodes communicate via handles — left handles are inputs, right handles are outputs
  • Data flows left-to-right through the workflow graph
  • Nodes can be online (JS only) or offline (Python/Node.js via Engine)
  • The internal/runner module manages node execution lifecycle

Project Structure

├── manifest.json
├── schema.json
├── execute.js
├── icon.svg

Implementation Details

Node manifest.json

{
  "name": "http-request",
  "version": "1.0.0",
  "description": "Make HTTP requests",
  "category": "Network",
  "inputs": [
    { "id": "url", "label": "URL", "type": "string" },
    { "id": "method", "label": "Method", "type": "select", "options": ["GET","POST","PUT","DELETE"] }
  ],
  "outputs": [
    { "id": "response", "label": "Response", "type": "object" },
    { "id": "status", "label": "Status Code", "type": "number" }
  ]
}

execute.js

module.exports = async function execute(inputs, context) {
  const { url, method } = inputs;
  try {
    const res = await fetch(url, { method: method || 'GET' });
    const data = await res.json();
    return {
      response: data,
      status: res.status
    };
  } catch (err) {
    return { response: { error: err.message }, status: 0 };
  }
};

Troubleshooting

  • ⚠️ Node folder name must match manifest.json name exactly
  • ⚠️ Input/output IDs must be unique within the node
  • ⚠️ execute.js must export an async function — synchronous functions will hang
  • ⚠️ Always return all declared outputs even on error
  • ⚠️ icon.svg is mandatory — workflow canvas won't render without it

Summary

This article covers node patterns for Flowork OS. Generated by Flowork AI from verified system architecture.