# @neo4j-cypher/react-codemirror

> This package can be built with `pnpm build` and then published to npm with `pnpm publish`.

Latest version **2.0.0-next.26.5** (published 2025-09-03) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @neo4j-cypher/react-codemirror
pnpm add @neo4j-cypher/react-codemirror
yarn add @neo4j-cypher/react-codemirror
bun add @neo4j-cypher/react-codemirror
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; high quality score.

Warnings: low downloads; large bundle.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 2.0.0-next.26.5 |
| Published | 2025-09-03 |
| First published | 2022-12-02 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22.15.0 |
| Dependencies | 19 |
| Unpacked size | 15.4 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 52 |
| Maintainers | neo4j-bloom-reader2, neo4j-organization |
| Keywords | neo4j, cypher, react, editor, codemirror, codemirror 6 |

## Links

- npm: https://www.npmjs.com/package/@neo4j-cypher/react-codemirror
- Repository: https://github.com/neo4j/cypher-language-support
- Homepage: https://github.com/neo4j/cypher-language-support#readme
- Issues: https://github.com/neo4j/cypher-language-support/issues
- npm.io page: https://npm.io/package/@neo4j-cypher/react-codemirror

## Dependencies (19)

- [prismjs](https://npm.io/package/prismjs.md) ^1.29.0
- [style-mod](https://npm.io/package/style-mod.md) ^4.1.2
- [workerpool](https://npm.io/package/workerpool.md) ^9.0.4
- [@lezer/common](https://npm.io/package/@lezer/common.md) ^1.0.2
- [@types/prismjs](https://npm.io/package/@types/prismjs.md) ^1.26.3
- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [@codemirror/lint](https://npm.io/package/@codemirror/lint.md) ^6.8.5
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.38.1
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.1.3
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.5.2
- [@types/workerpool](https://npm.io/package/@types/workerpool.md) ^6.4.7
- [@codemirror/search](https://npm.io/package/@codemirror/search.md) ^6.5.11
- [fastest-levenshtein](https://npm.io/package/fastest-levenshtein.md) ^1.0.16
- [@codemirror/commands](https://npm.io/package/@codemirror/commands.md) ^6.8.1
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.11.2
- [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.18.6
- [@neo4j-cypher/lint-worker](https://npm.io/package/@neo4j-cypher/lint-worker.md) workspace:*
- [vscode-languageserver-types](https://npm.io/package/vscode-languageserver-types.md) ^3.17.3
- [@neo4j-cypher/language-support](https://npm.io/package/@neo4j-cypher/language-support.md) workspace:*

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 2.0.0-next.26.5 (latest) — 2025-09-03
- 0.0.0-canary-20260916112144 (canary) — 2026-09-16
- 2.0.0-next.40 (next) — 2026-08-19
- 0.0.0-canary-20260916022708 — 2026-09-16
- 0.0.0-canary-20260915022916 — 2026-09-15
- 0.0.0-canary-20260914093956 — 2026-09-14
- 0.0.0-canary-20260911022656 — 2026-09-11
- 0.0.0-canary-20260910145642 — 2026-09-10
- 0.0.0-canary-20260910023020 — 2026-09-10
- 0.0.0-canary-20260909151255 — 2026-09-09
- 0.0.0-canary-20260909082937 — 2026-09-09
- 0.0.0-canary-20260909023117 — 2026-09-09
- 0.0.0-canary-20260908092418 — 2026-09-08
- 0.0.0-canary-20260908062951 — 2026-09-08
- 0.0.0-canary-20260908023056 — 2026-09-08
- … 577 more at https://npm.io/package/@neo4j-cypher/react-codemirror/versions

## README

# React Codemirror

This package can be built with `pnpm build` and then published to npm with `pnpm publish`.

## Usage

`npm install @neo4j-cypher/react-codemirror@next`

```tsx
import { useState } from 'react';

import { CypherEditor } from '@neo4j-cypher/react-codemirror@next';

export function CodeEditor() {
  const [value, setValue] = useState('');
  // can be used to access underlying codemirror state or call for example `focus`
  const editorRef = useRef<CypherEditor>(null);

  return <CypherEditor value={value} onChange={setValue} ref={editorRef} />;
}
```

For a full example, see the [react-codemirror-playground](https://github.com/neo4j/cypher-language-support/tree/main/packages/react-codemirror-playground).

## Usage without react

Currently we only support using the codemirror editor via the react wrapper, but we plan to release the codemirror extensions separately as well.

## Learning codemirror

It can take a little time to get into the CodeMirror6 ways of thinking, Trevor Harmon has a [great blog post](https://thetrevorharmon.com/blog/learning-codemirror/) explaining the cm6 "primitives". He also has a demo on how to integrate ANTLR4 with codemirror over [here](https://github.com/thetrevorharmon/zephyr-demo).

### Completion Icons

We use unmodified copies of Visual Studio Code Icons from microsofts repository [here](https://github.com/microsoft/vscode-icons) licensed under creative commons.

---
_Source: https://npm.io/package/@neo4j-cypher/react-codemirror · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._