Website · Documentation · GitHub · Changelog

Overview

@bpmnkit/operate is a zero-dependency monitoring and operations frontend for Camunda 8. Mount it into any HTML element to get a full process monitoring UI — live dashboard, instance browser, incident management, job queue, and user tasks.

It pairs with the @bpmnkit/proxy local server, which polls the Camunda REST API server-side and pushes updates via Server-Sent Events. The frontend stays clean with no polling timers.

A mock mode (mock: true) ships fixture data without any running proxy or cluster — useful for demos and local development.

Features

• Dashboard — real-time stats: active instances, open incidents, active jobs, pending tasks
• Process Definitions — deployed process list with name, version, and tenant
• Process Instances — paginated list with state filter (Active / Completed / Terminated)
• Instance Detail — BPMN canvas via @bpmnkit/canvas with live token-highlight overlay
• Incidents — error type, message, process, and resolution state
• Jobs — job type, worker, retries, state, error message
• User Tasks — name, assignee, state, due date, priority
• Profile switcher — header dropdown that switches all SSE streams on change
• Mock/demo mode — fully self-contained fixture data, no cluster required
• Hash router — #/, #/instances, #/instances/:key, #/definitions, etc.

Installation

npm install @bpmnkit/operate @bpmnkit/proxy

Quick Start

Demo mode (no cluster needed)

import { createOperate } from "@bpmnkit/operate"

createOperate({
  container: document.getElementById("app")!,
  mock: true,
  theme: "auto",
})

Connected to a real Camunda cluster via proxy

import { createOperate } from "@bpmnkit/operate"

createOperate({
  container: document.getElementById("app")!,
  proxyUrl: "http://localhost:3033",   // default
  profile: "production",               // optional, uses active profile if omitted
  pollInterval: 15_000,                // ms between server-side polls (default: 30 000)
  theme: "dark",
})

API Reference

createOperate(options)

interface OperateOptions {
  container: HTMLElement
  proxyUrl?: string        // default: "http://localhost:3033"
  profile?: string         // profile name; uses active profile if omitted
  theme?: "light" | "dark" | "auto"  // default: "auto"
  pollInterval?: number    // ms between polls; default: 30 000
  mock?: boolean           // use built-in fixture data; default: false
}

Returns an OperateApi:

interface OperateApi {
  el: HTMLElement
  setProfile(name: string | null): void
  setTheme(theme: "light" | "dark" | "auto"): void
  navigate(path: string): void  // e.g. "/instances/123456789"
  destroy(): void
}

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 execution engine | | @bpmnkit/feel | FEEL expression language parser & evaluator | | @bpmnkit/plugins | 22 composable canvas plugins | | @bpmnkit/api | Camunda 8 REST API TypeScript client | | @bpmnkit/ascii | Render BPMN diagrams as Unicode ASCII art | | @bpmnkit/ui | Shared design tokens and UI components | | @bpmnkit/profiles | Shared auth, profile storage, and client factories for CLI & proxy | | @bpmnkit/connector-gen | Generate connector templates from OpenAPI specs | | @bpmnkit/cli | Camunda 8 command-line interface (casen) | | @bpmnkit/proxy | Local AI bridge and Camunda API proxy server | | @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