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!
Usage
src/components/my-workflow-editor.ts
import { useState } from "react";
import { Editor, Provider, Sidebar, type Workflow } from "@inngest/workflow/ui";
// import `PublicEngineAction[]`
import { actionsDefinitions } from "@/inngest/actions-definitions";
import "@inngest/workflow/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
- 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
- Name
onChange
- Type
- function
- Required
- required
- Description
A callback function, called after each
workflow
changes.
- 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>