# @bpmn-io/feel-editor

> Editor for FEEL expressions.

Latest version **2.8.1** (published 2026-10-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @bpmn-io/feel-editor
pnpm add @bpmn-io/feel-editor
yarn add @bpmn-io/feel-editor
bun add @bpmn-io/feel-editor
```

## Health

**Score 60/100 (C)** — status: active.

Positive: esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 2.8.1 |
| Published | 2026-10-28 |
| First published | 2022-06-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 14 |
| Unpacked size | 139.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 21 |
| Author | Martin Stamm |
| Maintainers | bpmn-io-admin, nikku, barmac, philippfromme, maxtru, skaiir-camunda, vsgoulart, barinali, ev-camunda, jarekdanielak, alekseymanetov |
| Keywords | bpmn-io, feel, editor |

## Links

- npm: https://www.npmjs.com/package/@bpmn-io/feel-editor
- Repository: https://github.com/bpmn-io/feel-editor
- Homepage: https://github.com/bpmn-io/feel-editor#readme
- Issues: https://github.com/bpmn-io/feel-editor/issues
- npm.io page: https://npm.io/package/@bpmn-io/feel-editor

## Dependencies (14)

- [mitt](https://npm.io/package/mitt.md) ^3.0.1
- [min-dom](https://npm.io/package/min-dom.md) ^5.3.0
- [@codemirror/lint](https://npm.io/package/@codemirror/lint.md) ^6.9.7
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.43.11
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.2.3
- [@bpmn-io/cm-theme](https://npm.io/package/@bpmn-io/cm-theme.md) ^0.2.2
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.7.4
- [@bpmn-io/feel-lint](https://npm.io/package/@bpmn-io/feel-lint.md) ^3.2.0
- [@bpmn-io/lang-feel](https://npm.io/package/@bpmn-io/lang-feel.md) ^4.0.2
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.11.0
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.12.4
- [@bpmn-io/semver-compat](https://npm.io/package/@bpmn-io/semver-compat.md) ^0.1.0
- [@camunda/feel-builtins](https://npm.io/package/@camunda/feel-builtins.md) ^1.4.1
- [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.20.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 2.8.1 (latest) — 2026-10-28
- 0.0.1-alpha0 (exp) — 2022-06-14
- 2.8.0 — 2026-09-14
- 2.7.1 — 2026-08-21
- 2.7.0 — 2026-08-12
- 2.6.0 — 2026-06-18
- 2.5.2 — 2026-03-05
- 2.5.1 — 2026-02-27
- 2.5.0 — 2026-02-11
- 2.4.0 — 2026-02-10
- 2.3.0 — 2026-02-09
- 2.2.0 — 2026-02-06
- 2.1.0 — 2026-01-24
- 2.0.0 — 2025-12-11
- 1.12.1 — 2025-11-14
- … 30 more at https://npm.io/package/@bpmn-io/feel-editor/versions

## README

# @bpmn-io/feel-editor

Embeddable Editor for [FEEL expressions](https://docs.camunda.io/docs/components/modeler/feel/what-is-feel/).

## Usage

To get started, create a feel-editor instance:

```JavaScript
import FeelEditor from '@bpmn-io/feel-editor';

const editor = new FeelEditor({
  container
});
```

Configure the FEEL dialect (expression or unary tests):

```JavaScript
const editor = new FeelEditor({
  container,
  dialect: 'unaryTests' // defaults to 'expression'
});
```

You can provide a starting document and listen for changes:

```JavaScript
const editor = new FeelEditor({
  container,
  onChange,
  onKeyDown,
  onLint,
  value
});
```

### Variables

You can provide a variables array that will be used for auto completion. Nested
structures are supported.
The Variables need to be in the following format:

```JavaScript
const editor = new FeelEditor({
  container,
  variables: [
    {
      name: 'variablename to match',
      detail: 'optional inline info',
      info: 'optional pop-out info',
      entries: [
        {
          name: 'nested variable',
          ...
        }
      ]
    }
  ]
});
```

The variables can be updated on the instance via `FeelEditor#setVariables()`:

```javascript
editor.setVariables([
  {
    name: 'newName',
    detail: 'new variable inline info',
    info: 'new pop-out info'
  }
]);
```

### Content attributes

You can provide attributes which will be set on the content editable div:

```javascript
const editor = new FeelEditor({
  container,
  contentAttributes: {
    'aria-label': 'Expression editor'
  }
});
```

### Events

You can listen to events fired by the editor:

```javascript
const editor = new FeelEditor({
  container
});

editor.on('lint', ({ diagnostics }) => console.log(diagnostics));
```

## Hacking the Project

To get the development setup make sure to have [NodeJS](https://nodejs.org/en/download/) installed.
As soon as you are set up, clone the project and execute

```
npm install
npm start
```

## License

MIT

---
_Source: https://npm.io/package/@bpmn-io/feel-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._