C1X Workflow Builder UI Library

Standalone, framework-agnostic workflow builder built with pure TypeScript core logic and a Web Component wrapper.

What This Provides

• Pure TypeScript workflow engine for DAG state, validation, history, and JSON serialization.
• Drag-and-drop node builder UI rendered with LiteGraph (HTML5 canvas).
• Embeddable Web Component: c1x-workflow-builder.
• Public API methods for host apps: getWorkflow, loadWorkflow, validateWorkflow, undo, redo, clearWorkflow, fitToScreen.
• Custom DOM events for host synchronization.

Build The Library

From project root:

• npm install
• npm run build

Artifacts are generated in dist.

Embed In React (Fresh Project)

1. In this library project root:

• npm run build
• npm link

2. In your React app:

• npm install c1x-workflow-builder
• npm link c1x-workflow-builder

3. Import once at app startup so custom element is registered:

import "c1x-workflow-builder/dist/index.js";

4. Use the element:

<c1x-workflow-builder workflow-id="react-flow-001" />

5. Optional API usage:

const builder = document.querySelector("c1x-workflow-builder") as any;
const json = builder.getWorkflow();
const ok = builder.loadWorkflow(json);
const result = builder.validateWorkflow();

Embed In Angular (Fresh Project)

1. In this library project root:

• npm run build
• npm link

2. In your Angular app:

• npm install c1x-workflow-builder
• npm link c1x-workflow-builder

3. In src/main.ts (or another bootstrap import):

import "c1x-workflow-builder/dist/index.js";

4. In app.module.ts, allow custom elements:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

5. In template:

<c1x-workflow-builder workflow-id="ng-flow-001"></c1x-workflow-builder>

Demo Page (Preloaded JSON)

A standalone demo is available in demo/index.html.

It loads demo/sample-workflow.json on startup and calls loadWorkflow, then fitToScreen.

Run:

• npm run build
• Open demo/index.html

Event Contract

Common DOM events emitted by the component:

• workflow-ready
• workflow-change
• workflow-validation-failed
• workflow-history-changed
• workflow-destroyed

Framework Examples In This Repo

• React example: examples/react-demo
• Angular example: examples/angular-demo