Process Designer (VS Code Extension)

Extension ID: RineSong.process-designer

Webview-based BPMN and Camunda Form editor for VS Code / Cursor — a lightweight alternative to the Camunda Modeler desktop app.

Disclaimer: This is an unofficial community extension. It is not affiliated with, endorsed by, or maintained by Camunda Services GmbH or the bpmn.io project.

Features

Webview technology stack

This extension does not use React or Vue in its own code. The webviews are plain TypeScript + DOM, bundled with Webpack:

Extension host (src/extension.ts, providers, services) runs in Node.js and uses the VS Code API only — no browser UI there.

Dark theme strategy

bpmn-js and form-js ship fixed light (Carbon) themes. VS Code dark themes inject light foreground colors and color-scheme: dark into webviews, which breaks inputs, icons, and scrollbars if left unchecked.

We isolate editor surfaces with pd-light-surface (src/webview/theme.css): white background, dark text, color-scheme: light. The outer toolbar/log areas still follow VS Code theme variables.

Known limitation: In some dark themes, a form component-palette scrollbar may briefly flash a dark track on hover after scrolling (VS Code-injected ::-webkit-scrollbar vs Chromium overlay scrollbars). Mitigations are in theme.css but not 100% reliable across all hosts.

Architecture

┌─────────────────────────────────────────────────────────────┐
│  Extension host (Node.js)          src/                     │
│  ├─ extension.ts              activation, commands          │
│  ├─ providers/                CustomTextEditorProvider    │
│  ├─ services/                 deploy, createFile, logging   │
│  └─ utils/                    nonce, webview HTML, edits    │
└──────────────────────────┬──────────────────────────────────┘
                           │ postMessage (edit / update / log / deploy)
┌──────────────────────────▼──────────────────────────────────┐
│  Webview (browser bundle)          src/webview/           │
│  ├─ index.ts + webview.css    bpmn-js modeler             │
│  ├─ form.ts + form.css        @bpmn-io/form-js playground │
│  ├─ theme.css                 shared light-surface tokens │
│  ├─ logger.ts, vscodeApi.ts   shared webview utilities    │
│  └─ tsconfig.json             DOM types (separate from ext) │
└───────────────────────────────────────────────────────────┘
                           ▲
                           │ webpack (3 targets)
                    dist/extension.js
                    dist/webview/index.{js,css}
                    dist/webview/form.{js,css}

Message protocol (extension ↔ webview)

Build notes

• Dual TypeScript targets: root tsconfig.json excludes src/webview; webview uses src/webview/tsconfig.json with DOM libs.
• Webpack ts-loader instances: instance: 'extension' vs instance: 'webview' prevent cross-target type-check conflicts.
• Preact alias: form-js bundles a nested preact; webpack aliases force a single copy to avoid hook context errors.

Getting started

npm install
npm run compile

Press F5 in the extension project to launch an Extension Development Host (uses dist/ directly). Sample files live in samples/.

To open .bpmn / .form with the custom editor by default:

{
  "workbench.editorAssociations": {
    "*.bpmn": "bpmn-modeler.bpmnEditor",
    "*.form": "bpmn-modeler.formEditor"
  }
}

Commands

Configuration

bpmnModeler.camunda.endpoints — array of deployment targets:

{
  "bpmnModeler.camunda.endpoints": [
    {
      "name": "Local Camunda 7",
      "endpointUrl": "http://localhost:8080",
      "restPath": "/engine-rest",
      "basicAuthUser": "",
      "basicAuthPassword": ""
    }
  ]
}

Legacy single-endpoint keys (bpmnModeler.camunda.endpointUrl, etc.) still work as a fallback.

Project layout

src/
  extension.ts
  providers/
    bpmnEditorProvider.ts
    formEditorProvider.ts
  services/
    createFile.ts
    deployService.ts
    outputChannel.ts
  utils/
    documentEdit.ts
    fileIcons.ts
    getNonce.ts
    webviewHtml.ts
  webview/
    index.ts          # BPMN entry (bpmn-js)
    form.ts           # Form entry (form-js playground)
    theme.css         # Light-surface tokens for dark IDE themes
    logger.ts
    vscodeApi.ts
    webview.css
    form.css
resources/
  logo.png
  icons/light|dark/
samples/
  empty.bpmn
  empty.form
webpack.config.js     # extension + 2 webview bundles

Scripts

Roadmap

1. DMN custom editor (dmn-js)
2. Zeebe / Camunda 8 moddle and deployment targets
3. Element templates, linting (parity with Camunda Modeler plugins)

Publishing

npm run package
npm_config_registry=https://registry.npmjs.org npx @vscode/vsce package --no-dependencies
# → process-designer-x.y.z.vsix

vsce login RineSong
vsce publish --no-dependencies          # VS Code Marketplace

# Cursor / VSCodium also need Open VSX (Eclipse account + Publisher Agreement):
npx ovsx publish process-designer-x.y.z.vsix -p <OpenVSX-Token>

Before publishing, verify:

• publisher is RineSong, name is process-designer
• THIRD_PARTY_NOTICES.md — bpmn.io watermark must stay visible in editors
• README disclaimer is visible on the Marketplace listing

Legal & attribution

License

MIT — see LICENSE. Third-party notices: THIRD_PARTY_NOTICES.md