Website · Documentation · GitHub · Changelog

Experimental tier. May change or be discontinued. Not for production. See product tiers.

Overview

@bpmnkit/user-tasks renders a Camunda 8 user task, and the actions that go with it, into any HTML element. Mount it and you get the task's linked Camunda Form, its metadata, and buttons for claim, complete and — when you ask for it — reject.

It talks to a running @bpmnkit/proxy, which holds the credentials and forwards to the Camunda REST API, so no cluster secret reaches the page.

Features

• Form rendering — loads the task's linked Camunda Form and renders it through @bpmnkit/plugins/form-viewer
• Claim / unclaim — sets or clears the task assignee
• Complete — submits the form's collected variables
• Reject — an optional return action with a reason; the button is hidden unless you pass onReject
• Metadata — assignee, priority, and a due date that highlights once it is overdue
• Themed — light, dark, auto or neon, drawn with the @bpmnkit/ui design tokens
• No framework — a function and an HTMLElement; it works inside React, Vue, Astro or a plain page

Installation

npm install @bpmnkit/user-tasks

Quick Start

import { createUserTaskWidget } from "@bpmnkit/user-tasks"

const widget = createUserTaskWidget({
  container: document.getElementById("task-panel")!,
  task: {
    userTaskKey: "2251799813685281",
    name: "Review order",
    assignee: "alice",
    dueDate: "2025-06-01T12:00:00Z",
    priority: 50,
  },
  proxyUrl: "http://localhost:3033", // default
  theme: "dark",
  onComplete(variables) {
    console.log("Task completed with", variables)
  },
  onClaim() {
    console.log("Task claimed")
  },
  onUnclaim() {
    console.log("Task unclaimed")
  },
  onReject(reason) {
    console.log("Task rejected:", reason)
  },
})

// Show a different task in the same widget — the form reloads.
widget.setTask({ userTaskKey: "2251799813685999", name: "Approve invoice" })

// Remove it from the DOM.
widget.destroy()

API Reference

createUserTaskWidget(options)

interface UserTaskWidgetOptions {
  /** The container element to render the widget into. */
  container: HTMLElement
  /** The user task to display. */
  task: UserTask
  /** Base URL of the proxy server. Default: "http://localhost:3033" */
  proxyUrl?: string
  /** Active profile name, sent as the x-profile header. */
  profile?: string | null
  /** Visual theme (`Theme` from @bpmnkit/ui). Default: "neon" */
  theme?: "light" | "dark" | "auto" | "neon"
  /** Called when the user completes the task. */
  onComplete(variables: Record<string, unknown>): void
  /** Called when the user claims the task. */
  onClaim(): void
  /** Called when the user unclaims the task. */
  onUnclaim(): void
  /** Called when the user rejects the task. Omit to hide the Reject button. */
  onReject?(reason: string): void
}

Returns a UserTaskWidgetApi:

interface UserTaskWidgetApi {
  /** Show a different task and reload its form. */
  setTask(task: UserTask): void
  /** Remove the widget from the DOM and clean up. */
  destroy(): void
}

UserTask

interface UserTask {
  userTaskKey: string
  name?: string
  assignee?: string
  candidateGroups?: string[]
  dueDate?: string // ISO 8601
  priority?: number
  processInstanceKey?: string
  processDefinitionKey?: string
  formKey?: string
}

Related Packages

| Package | Description | |---------|-------------| | @bpmnkit/core | BPMN/DMN/Form parser, builder, layout engine | | @bpmnkit/canvas | Zero-dependency SVG BPMN viewer | | @bpmnkit/editor | Full-featured interactive BPMN editor | | @bpmnkit/engine | Lightweight BPMN process simulator for tests and demos | | @bpmnkit/feel | FEEL expression language parser & evaluator | | @bpmnkit/plugins | 34 composable canvas plugins | | @bpmnkit/api | Camunda 8 REST API TypeScript client | | @bpmnkit/ascii | Render BPMN diagrams as Unicode ASCII art | | @bpmnkit/markdown | BPMN diagrams in Markdown — remark, markdown-it and README pre-rendering | | @bpmnkit/docspack | BPMN Kit docs as an offline docspack package for AI agents | | @bpmnkit/camunda-docspack | Camunda 8 docs as an offline docspack package for AI agents | | @bpmnkit/ui | Shared design tokens and UI components | | @bpmnkit/profiles | Shared auth, profile storage, and client factories for CLI & proxy | | @bpmnkit/operate | Monitoring & operations frontend for Camunda clusters | | @bpmnkit/connector-gen | Generate connector templates from OpenAPI specs | | @bpmnkit/connectors | Camunda 8 OOTB connector catalog and deterministic template application | | @bpmnkit/cli | Camunda 8 command-line interface (casen) | | @bpmnkit/proxy | Local AI bridge and Camunda API proxy server | | @bpmnkit/patterns | Domain process patterns for BPMNKit AIKit | | @bpmnkit/reebe-wasm | WebAssembly BPMN engine for browser simulation | | @bpmnkit/worker-client | Thin Zeebe REST client for standalone workers | | @bpmnkit/flow | Code-first durable flows that derive BPMN, job types and workers | | @bpmnkit/cli-sdk | Plugin authoring SDK for the casen CLI | | @bpmnkit/create-casen-plugin | Scaffold a new casen CLI plugin in seconds | | @bpmnkit/casen-report | HTML reports from Camunda 8 incident and SLA data | | @bpmnkit/casen-worker-http | Example HTTP worker plugin — completes jobs with live JSONPlaceholder API data | | @bpmnkit/casen-worker-ai | AI task worker — classify, summarize, extract, and decide using Claude |

License

MIT © BPMN Kit — made by u11g