Editor Features

The visual editor's custom HTML panel includes a set of tools that help you write and debug Quill templates. These features activate when the editor detects template syntax ({{ }} or {% %}) in your HTML.

Code editor

The HTML field uses a Monaco code editor (the same engine behind VS Code). It loads on demand so it does not slow down the initial page load. While it loads, a standard text area appears as a fallback.

The editor provides:

• Line numbers
• Bracket matching
• Auto-indentation
• Find and replace
• Multiple cursors (hold Alt and click)

The editor appears in both the sidebar panel and the expanded full-screen view. In the expanded view, the data reference panel shows alongside the editor on the right.

Syntax highlighting

Template tags are color-coded so you can distinguish them from regular HTML at a glance:

Autocomplete

The editor suggests completions as you type. Press Ctrl+Space to trigger suggestions manually. Completions are context-aware:

Inside {{ }}

After typing {{, the editor suggests all available template variables:

• store.name, store.currency, store.email, etc.
• request.path, request.country, etc.
• page_title, canonical_url
• collections
• theme.settings

After a pipe |

After typing | inside an expression, the editor suggests all available filters:

• String filters: upcase, downcase, truncate, split, replace, etc.
• Number filters: abs, round, plus, minus, times, etc.
• Array filters: join, first, last, sort, map, where, etc.
• Date filters: date
• Money filters: money, money_with_currency
• Media filters: img_url, image_tag, asset_url
• Utility filters: default, json, link_to

Inside {% %}

After typing {%, the editor suggests all available tags:

• Control flow: if, elsif, else, endif, unless, endunless
• Loops: for, endfor, break, continue
• Cases: case, when, endcase
• Variables: assign, capture, endcapture
• Other: comment, endcomment, raw, endraw, render, include

Loop variables

When the editor detects a for loop in your template, it also suggests forloop properties:

• forloop.index (1-based position)
• forloop.index0 (0-based position)
• forloop.first (true for the first item)
• forloop.last (true for the last item)
• forloop.length (total number of items)

Template validation

The editor validates your template in real time as you type. Validation checks the template syntax without running it. It catches problems like:

• Missing closing tags ({% if %} without {% endif %})
• Unknown filters ({{ price | monye }})
• Syntax errors in expressions
• Malformed tag arguments

Validation indicators

A badge next to the "HTML" label tells you the current state:

When errors are present, a red box below the editor shows the first error with its line number, column, and a description. Fix the error and the indicator updates right away.

Validation does not block save

You can save a template with syntax errors. This lets you work incrementally, saving partial progress. But you should fix all errors before publishing, because broken templates render as empty blocks on the live site.

Data reference panel

The data reference panel lists every variable you can use in your template. It shows the variable name, its type, and a short description. Variables are grouped by category:

Store

Request

Page

Collections

Theme

In the sidebar view, each group is a collapsible accordion. In the expanded full-screen view, the panel shows on the right side of the editor.

Keyboard shortcuts

The Monaco editor supports standard editing shortcuts: