# @codemirror/lang-liquid

> Liquid template support for the CodeMirror code editor

Latest version **6.3.2** (published 2026-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @codemirror/lang-liquid
pnpm add @codemirror/lang-liquid
yarn add @codemirror/lang-liquid
bun add @codemirror/lang-liquid
```

## Health

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

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 6.3.2 |
| Published | 2026-02-23 |
| First published | 2023-09-20 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 70 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 20 |
| Author | Marijn Haverbeke |
| Maintainers | adrianheine, marijn |
| Keywords | editor, code, liquid |

## Links

- npm: https://www.npmjs.com/package/@codemirror/lang-liquid
- Repository: https://github.com/codemirror/lang-liquid
- Homepage: https://github.com/codemirror/lang-liquid#readme
- Issues: https://github.com/codemirror/lang-liquid/issues
- npm.io page: https://npm.io/package/@codemirror/lang-liquid

## Dependencies (8)

- [@lezer/lr](https://npm.io/package/@lezer/lr.md) ^1.3.1
- [@lezer/common](https://npm.io/package/@lezer/common.md) ^1.0.0
- [@codemirror/view](https://npm.io/package/@codemirror/view.md) ^6.0.0
- [@lezer/highlight](https://npm.io/package/@lezer/highlight.md) ^1.0.0
- [@codemirror/state](https://npm.io/package/@codemirror/state.md) ^6.0.0
- [@codemirror/language](https://npm.io/package/@codemirror/language.md) ^6.0.0
- [@codemirror/lang-html](https://npm.io/package/@codemirror/lang-html.md) ^6.0.0
- [@codemirror/autocomplete](https://npm.io/package/@codemirror/autocomplete.md) ^6.0.0

## Alternatives

- [flatbuffers](https://npm.io/package/flatbuffers.md) — 6.0M weekly downloads
- [jwt-simple](https://npm.io/package/jwt-simple.md) — 259.5K weekly downloads
- [@exodus/patch-broken-hermes-typed-arrays](https://npm.io/package/@exodus/patch-broken-hermes-typed-arrays.md) — 28.5K weekly downloads
- [@native-to-anchor/buffer-layout](https://npm.io/package/@native-to-anchor/buffer-layout.md) — 12.2K weekly downloads
- [binary-parser-encoder](https://npm.io/package/binary-parser-encoder.md) — 5.3K weekly downloads

## Recent versions

- 6.3.2 (latest) — 2026-02-23
- 6.3.1 — 2025-12-10
- 6.3.0 — 2025-08-15
- 6.2.3 — 2025-03-21
- 6.2.2 — 2024-11-14
- 6.2.1 — 2024-02-02
- 6.2.0 — 2024-01-03
- 6.1.0 — 2023-12-22
- 6.0.1 — 2023-09-28
- 6.0.0 — 2023-09-20

## README

<!-- NOTE: README.md is generated from src/README.md -->

# @codemirror/lang-liquid [![NPM version](https://img.shields.io/npm/v/@codemirror/lang-liquid.svg)](https://www.npmjs.org/package/@codemirror/lang-liquid)

[ [**WEBSITE**](https://codemirror.net/) | [**ISSUES**](https://github.com/codemirror/dev/issues) | [**FORUM**](https://discuss.codemirror.net/c/next/) | [**CHANGELOG**](https://github.com/codemirror/lang-liquid/blob/main/CHANGELOG.md) ]

This package implements [Liquid
template](https://shopify.github.io/liquid/) support for the
[CodeMirror](https://codemirror.net/) code editor.

The [project page](https://codemirror.net/) has more information, a
number of [examples](https://codemirror.net/examples/) and the
[documentation](https://codemirror.net/docs/).

This code is released under an
[MIT license](https://github.com/codemirror/lang-liquid/tree/main/LICENSE).

We aim to be an inclusive, welcoming community. To make that explicit,
we have a [code of
conduct](http://contributor-covenant.org/version/1/1/0/) that applies
to communication around the project.

## Usage

```javascript
import {EditorView, basicSetup} from "codemirror"
import {liquid} from "@codemirror/lang-liquid"

const view = new EditorView({
  parent: document.body,
  doc: `{% if a.active %}{{ a.title }}{% endif %}`,
  extensions: [basicSetup, liquid()]
})
```

## API Reference

<dl>
<dt id="user-content-liquid">
  <code><strong><a href="#user-content-liquid">liquid</a></strong>(<a id="user-content-liquid^config" href="#user-content-liquid^config">config</a>&#8288;?: <a href="#user-content-liquidcompletionconfig">LiquidCompletionConfig</a> &amp; <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> = {}) → <a href="https://codemirror.net/docs/ref#language.LanguageSupport">LanguageSupport</a></code></dt>

<dd><p>Liquid template support.</p>
</dd>
<dt id="user-content-liquidlanguage">
  <code><strong><a href="#user-content-liquidlanguage">liquidLanguage</a></strong>: <a href="https://codemirror.net/docs/ref#language.LRLanguage">LRLanguage</a></code></dt>

<dd><p>A language provider for Liquid templates.</p>
</dd>
<dt id="user-content-liquidcompletionconfig">
  <h4>
    <code>type</code>
    <a href="#user-content-liquidcompletionconfig">LiquidCompletionConfig</a></h4>
</dt>

<dd><p>Configuration options to
<a href="#user-content-liquidcompletionsource"><code>liquidCompletionSource</code></a>.</p>
<dl><dt id="user-content-liquidcompletionconfig.tags">
  <code><strong><a href="#user-content-liquidcompletionconfig.tags">tags</a></strong>&#8288;?: readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt>

<dd><p>Adds additional completions when completing a Liquid tag.</p>
</dd><dt id="user-content-liquidcompletionconfig.filters">
  <code><strong><a href="#user-content-liquidcompletionconfig.filters">filters</a></strong>&#8288;?: readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt>

<dd><p>Add additional filter completions.</p>
</dd><dt id="user-content-liquidcompletionconfig.variables">
  <code><strong><a href="#user-content-liquidcompletionconfig.variables">variables</a></strong>&#8288;?: readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt>

<dd><p>Add variable completions.</p>
</dd><dt id="user-content-liquidcompletionconfig.properties">
  <code><strong><a href="#user-content-liquidcompletionconfig.properties">properties</a></strong>&#8288;?: fn(<a id="user-content-liquidcompletionconfig.properties^path" href="#user-content-liquidcompletionconfig.properties^path">path</a>: readonly <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String">string</a>[], <a id="user-content-liquidcompletionconfig.properties^state" href="#user-content-liquidcompletionconfig.properties^state">state</a>: <a href="https://codemirror.net/docs/ref#state.EditorState">EditorState</a>, <a id="user-content-liquidcompletionconfig.properties^context" href="#user-content-liquidcompletionconfig.properties^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → readonly <a href="https://codemirror.net/docs/ref#autocomplete.Completion">Completion</a>[]</code></dt>

<dd><p>Provides completions for properties completed under the given
path. For example, when completing <code>user.address.</code>, <code>path</code> will
be <code>[&quot;user&quot;, &quot;address&quot;]</code>.</p>
</dd></dl>

</dd>
<dt id="user-content-liquidcompletionsource">
  <code><strong><a href="#user-content-liquidcompletionsource">liquidCompletionSource</a></strong>(<a id="user-content-liquidcompletionsource^config" href="#user-content-liquidcompletionsource^config">config</a>&#8288;?: <a href="#user-content-liquidcompletionconfig">LiquidCompletionConfig</a> = {}) → fn(<a id="user-content-liquidcompletionsource^returns^context" href="#user-content-liquidcompletionsource^returns^context">context</a>: <a href="https://codemirror.net/docs/ref#autocomplete.CompletionContext">CompletionContext</a>) → <a href="https://codemirror.net/docs/ref#autocomplete.CompletionResult">CompletionResult</a> | <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/null">null</a></code></dt>

<dd><p>Returns a completion source for liquid templates. Optionally takes
a configuration that adds additional custom completions.</p>
</dd>
<dt id="user-content-closepercentbrace">
  <code><strong><a href="#user-content-closepercentbrace">closePercentBrace</a></strong>: <a href="https://codemirror.net/docs/ref#state.Extension">Extension</a></code></dt>

<dd><p>This extension will, when the user types a <code>%</code> between two
matching braces, insert two percent signs instead and put the
cursor between them.</p>
</dd>
</dl>

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