Liquid templating language support for Monaco Editor with Zod schema validation
npm install monaco-liquidThis package provides a seamless integration of the Liquid templating language into the Monaco Editor, offering syntax highlighting, validation, hover support, and autocompletion capabilities.
- Language Registration: Registers Liquid as a language within Monaco Editor with support for Liquid's syntax, including tags, filters, variables, and expressions.
- Syntax Highlighting: Differentiates between Liquid tags, output delimiters, comments, strings, variables, and HTML content.
- Hover Support: Displays type information for variables based on schemas defined using Zod.
- Validation: Checks for unmatched or improperly nested Liquid tags and output delimiters.
- Autocomplete Suggestions: Provides suggestions for Liquid syntax, variables, and properties based on the provided schemas.
---
Install the package via npm:
``bash`
npm install monaco-liquid
---
`typescript
import * as monaco from 'monaco-editor';
import { registerLiquidLanguage, setModelLiquidValidation } from 'monaco-liquid';
import { z } from 'zod';
// Initialize Monaco Editor
const editor = monaco.editor.create(document.getElementById('container'), {
language: 'liquid',
value: '{% if user %}\n Hello, {{ user.name }}!\n{% endif %}',
theme: 'vs-dark',
});
// Register Liquid language
registerLiquidLanguage(monaco);
// Define schemas using Zod
const schemas = {
user: z.object({
name: z.string(),
age: z.number(),
isAdmin: z.boolean(),
}),
};
// Attach validation and schemas to the editor model
const model = editor.getModel();
if (model) {
setModelLiquidValidation(monaco, model, schemas);
}
`
---
Registers the Liquid language with the Monaco Editor, enabling syntax highlighting, hover support, and autocompletion.
Associates schemas with the editor model and validates Liquid syntax.
- Parameters:
- monacoInstance: The Monaco instance.model
- : The Monaco text model where Liquid content is written.schemas
- : A record of Zod schemas defining the structure of variables used in Liquid templates.
---
Schemas define the structure and types of variables in your Liquid templates. The package uses Zod schemas to enable detailed hover information and autocompletion for nested properties.
`typescript`
const schemas = {
product: z.object({
name: z.string(),
price: z.number(),
tags: z.array(z.string()),
}),
};
, the editor will suggest name, price, and tags. For nested properties, suggestions are context-aware.$3
Hovering over product.price will display the type as Number`.