Diffdown is a real-time collaborative Markdown editor/previewer built on the AT Protocol
diffdown.com
1# @codemirror/autocomplete [](https://www.npmjs.org/package/@codemirror/autocomplete)
2
3[ [**WEBSITE**](https://codemirror.net/) | [**DOCS**](https://codemirror.net/docs/ref/#autocomplete) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/autocomplete/blob/main/CHANGELOG.md) ]
4
5This package implements autocompletion for the
6[CodeMirror](https://codemirror.net/) code editor.
7
8The [project page](https://codemirror.net/) has more information, a
9number of [examples](https://codemirror.net/examples/) and the
10[documentation](https://codemirror.net/docs/).
11
12This code is released under an
13[MIT license](https://github.com/codemirror/autocomplete/tree/main/LICENSE).
14
15We aim to be an inclusive, welcoming community. To make that explicit,
16we have a [code of
17conduct](http://contributor-covenant.org/version/1/1/0/) that applies
18to communication around the project.
19
20## Usage
21
22```javascript
23import {EditorView} from "@codemirror/view"
24import {autocompletion} from "@codemirror/autocomplete"
25import {jsonLanguage} from "@codemirror/lang-json"
26
27const view = new EditorView({
28 parent: document.body,
29 extensions: [
30 jsonLanguage,
31 autocompletion(),
32 jsonLanguage.data.of({
33 autocomplete: ["id", "name", "address"]
34 })
35 ]
36})
37```
38
39This configuration will just complete the given words anywhere in JSON
40context. Most language modules come with more refined autocompletion
41built-in, but you can also write your own custom autocompletion
42[sources](https://codemirror.net/docs/ref/#autocomplete.CompletionSource)
43and associate them with your language this way.