ReferencesWorkflow Kit

Components API (React)

The @inngest/workflow-kit package provides a set of React components, enabling you to build a workflow editor UI in no time!

workflow-kit-announcement-video-loop.gif

Usage

src/components/my-workflow-editor.ts

import { useState } from "react";
import { Editor, Provider, Sidebar, type Workflow } from "@inngest/workflow-kit/ui";

// import `PublicEngineAction[]`
import { actionsDefinitions } from "@/inngest/actions-definitions";

// NOTE - Importing CSS from JavaScript requires a bundler plugin like PostCSS or CSS Modules
import "@inngest/workflow-kit/ui/ui.css";
import "@xyflow/react/dist/style.css";

export const MyWorkflowEditor = ({ workflow }: { workflow: Workflow }) => {
  const [workflowDraft, updateWorkflowDraft] =
    useState<typeof workflow>(workflow);

  return (
    <Provider
      workflow={workflowDraft}
      trigger={{ event: { name: 'blog-post.updated' } }}
      availableActions={actionsDefinitions}
      onChange={updateWorkflowDraft}
    >
      <Editor>
        <Sidebar position="right"></Sidebar>
      </Editor>
    </Provider>
  );
};

Reference

<Provider>

<Provider> is a Controlled Component, watching the workflow={} to update.

Make sure to updated workflow={} based on the updates received via onChange={}.

  • Name
    workflow
    Type
    Workflow
    Required
    required
    Description

    A Workflow instance object.

  • Name
    trigger
    Type
    object
    Required
    required
    Description

    An object with a name: string property representing an event name.

  • Name
    availableActions
    Type
    PublicEngineAction[]
    Required
    optional
    Description

    See the PublicEngineActionEngineAction[] reference.

  • Name
    onChange
    Type
    function
    Required
    required
    Description

    A callback function, called after each workflow changes.

  • Name
    {children}
    Type
    React.ReactNode
    Required
    required
    Description

    The <Provider> component should always get the following tree as children:

<Editor>
  <Sidebar position="right"></Sidebar>
</Editor>