WORKFLOW React Node Builder Template

Installation and usage

The installer adds the complete framework and its UI dependencies to your React project.

01 — Set up your project

Initialize shadcn once.

pnpm dlx shadcn@latest init

02 — Install the framework

pnpm dlx shadcn@latest add https://podie.dev/framework-registry/workflow.json

03 — Add it to your interface

import { WorkflowFramework } from '@/components/frameworks/workflow';

export default function App() {
  return <WorkflowFramework initialView="workspace" />;
}

Starting a new project? Download the ZIP, extract it, run npm install and npm run dev.

Everything in the frontend

• Infinite node canvas with pan, zoom and connections
• Start, transform, conditional and output nodes
• Executable local workflows with branch tracing and cancellation
• JSON import/export, undo, themes and browser persistence

Nodes execute locally: transform templates preserve input fields and produce a result; conditions select a true or false path. The right panel shows executed and skipped steps, inputs, outputs and final results.

Custom step executor

Pass a typed executor prop to implement transform steps through your own server. It receives {node, input, signal} and returns a JSON object. Workflow types are in workflow-model.ts. No external service is called by default.

import type { StepExecutor } from '@/components/frameworks/workflow-model';

const executor: StepExecutor = async ({ node, input, signal }) => {
  const response = await fetch('/api/workflow/step', {
    method: 'POST', signal,
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ node, input }),
  });
  if (!response.ok) throw new Error('Step failed');
  return response.json();
};

Workflows are saved in browser localStorage. Export JSON to move projects between browsers. Runs validate connections and cycles before execution; Stop run cancels the active signal. Server credentials, scheduling and background execution require your own backend.