Files
echo-nexus/node_modules/@codemirror/lang-liquid
..
2026-06-24 03:09:02 +00:00
2026-06-24 03:09:02 +00:00
2026-06-24 03:09:02 +00:00
2026-06-24 03:09:02 +00:00
2026-06-24 03:09:02 +00:00

@codemirror/lang-liquid NPM version

[ WEBSITE | ISSUES | FORUM | CHANGELOG ]

This package implements Liquid template support for the CodeMirror code editor.

The project page has more information, a number of examples and the documentation.

This code is released under an MIT license.

We aim to be an inclusive, welcoming community. To make that explicit, we have a code of conduct that applies to communication around the project.

Usage

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

liquid(config?: LiquidCompletionConfig & Object = {}) → LanguageSupport

Liquid template support.

liquidLanguage: LRLanguage

A language provider for Liquid templates.

type LiquidCompletionConfig

Configuration options to liquidCompletionSource.

tags?: readonly Completion[]

Adds additional completions when completing a Liquid tag.

filters?: readonly Completion[]

Add additional filter completions.

variables?: readonly Completion[]

Add variable completions.

properties?: fn(path: readonly string[], stateEditorState, contextCompletionContext) → readonly Completion[]

Provides completions for properties completed under the given path. For example, when completing user.address., path will be ["user", "address"].

liquidCompletionSource(config?: LiquidCompletionConfig = {}) → fn(contextCompletionContext) → CompletionResult | null

Returns a completion source for liquid templates. Optionally takes a configuration that adds additional custom completions.

closePercentBrace: Extension

This extension will, when the user types a % between two matching braces, insert two percent signs instead and put the cursor between them.