Omega FlowWorkflow Engine & Editor

A node-based event-driven workflow engine with a fully customizable React editor

Event-Driven Architecture

Process workflows based on events with a flexible node-based architecture. Workflows wait for events and react accordingly.

Visual Workflow Editor

Build workflows visually with drag-and-drop. Built on ReactFlow for a smooth editing experience.

Type-Safe

Built with TypeScript for full type safety. All types exported for excellent developer experience.

Extensible Node System

Create custom nodes with your own views and configuration panels. Register them alongside built-in nodes.

Built-in Node Types

Comes with 6 node types out of the box - Trigger, Action, Condition, Wait, TriggerOrTimeout, and Exit.

Reusable Primitives

Form field components (TextField, NumberField, JsonField, etc.) for building custom node configuration panels.

Installation

bash

pnpm add @omega-flow/engine @omega-flow/types
pnpm add @omega-flow/editor    # for the visual editor

Quick Example

tsx

import { ReactFlow, Background, Controls, Panel } from "@xyflow/react";
import {
  WorkflowEditor,
  NodesPanel,
  DetailPanel,
  ControlPanel,
  useNodes,
  useEdges,
  useNodeRegistry,
  useDragAndDrop,
  defaultNodeTypes,
} from "@omega-flow/editor";

function MyEditor() {
  const { nodes, onNodesChange } = useNodes();
  const { edges, onEdgesChange, onConnect } = useEdges();
  const { reactFlowNodeTypes } = useNodeRegistry();
  const { onDragOver, onDrop } = useDragAndDrop();

  return (
    <ReactFlow
      nodes={nodes}
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
      onConnect={onConnect}
      onDragOver={onDragOver}
      onDrop={onDrop}
      nodeTypes={reactFlowNodeTypes}
    >
      <Background />
      <Controls />
      <Panel position="top-left">
        <NodesPanel />
      </Panel>
      <Panel position="bottom-right">
        <DetailPanel />
      </Panel>
    </ReactFlow>
  );
}

function App() {
  return (
    <WorkflowEditor nodeTypes={defaultNodeTypes}>
      <MyEditor />
    </WorkflowEditor>
  );
}