Editor Tooling

Blutui has two tools that make writing Canvas templates easier:

• Blutui IntelliSense: an editor extension that adds syntax highlighting and snippets for Canvas.
• Prettier plugin for Canvas: a Prettier plugin that formats your Canvas templates.

Blutui IntelliSense

Blutui IntelliSense adds syntax highlighting and snippets for Canvas to Visual Studio Code and VS Code-based editors like Cursor and Windsurf.

Installation

Search for blutui in your editor's extensions panel, or install it from:

• The Visual Studio Code Marketplace, for Visual Studio Code.
• Open VSX, for VS Code-based editors that use it, such as Cursor and Windsurf.

Syntax highlighting

IntelliSense highlights Canvas tags, filters, functions, tests and strings in .canvas and .html files. It also highlights CSS, JavaScript and SCSS embedded in your templates, and JSON inside {% canopy config %} blocks.

Snippets

Snippets let you quickly write Canvas tags, functions, filters and tests. Start typing a prefix and choose the snippet from the autocomplete list. For example, if expands to:

{% if condition %}

{% endif %}

Most tags can be triggered by their name (if), the tag itself ({% if %}), or a ! shorthand (!if). Filters can be triggered by their name or with a pipe (slug or |slug).

IntelliSense includes snippets for:

• Tags such as if, for, set, include, macro and form.
• Functions such as asset, cms.collection, cms.form, cms.menu and canopy.blocks.
• Filters such as date, image_url, slug, sort and reading_time.
• Tests such as is defined, is empty and is even.
• Templates such as !page (a new page that extends a layout), !layout (a layout set up for Canopy Blocks) and !form-macro (a set of form input macros).

For the full list of snippets, see the Blutui IntelliSense README.

Auto-closing brackets

When you type {{ or {%, IntelliSense adds the closing }} or %} for you.

Prettier plugin for Canvas

The prettier-plugin-canvas plugin formats your .canvas templates with Prettier, including the Canvas tags and the HTML around them.

Installation

Install the plugin as a dev dependency in your project:

npm install -D prettier-plugin-canvas

Then add the plugin to your Prettier configuration:

{
  "plugins": ["prettier-plugin-canvas"]
}

Usage

Run Prettier on your views folder to format your templates:

npx prettier --write "views/**/*.canvas"

To format on save in your editor, install the Prettier extension. It uses the plugin from your project's Prettier configuration.

For more details, see the prettier-plugin-canvas repository.