HTML Liquid Preview for Visual Studio Code

Gives a rendered live preview for HTML based liquid templates. It uses the liquidjs npm package to do the rendering. Formatting of the template can be done by a separate command and is powered by Prettier and the Shopify Prettier Liquid Plugin

This extension was inspired by YE Quing's - Braze Liquid Preview

Which in turn was inspired by Trevor Kirchner's - Shopify Liquid Preview.

This extension is designed to be complimentary to Liquid language support extensions such as Liquid and Shopify Liquid which provide features including syntax highlighting and auto-completion.

Purpose

When editing a template the output of which is HTML, I like the live rendered preview you get with the Braze plugin. However I didn't need the Braze extensions and I did want it to support all the standard Liquid syntax.

I also tended to have some issues with other extensions in terms of formatting. Sometimes they auto-format when I don't want them to. Sometimes they format the liquid but not the HTML. Sometimes if it fails due to a parsing error it's not obvious what the problem is. I've added a format option as a separate command that can be run manually so as not to interfere with any other formatter that may have already been setup. If there is an error parsing the Liquid HTML the problem will be highlighted in the editor.

Features

• Live preview for HTML Liquid templates, updating as you type
• Support for fake data. Assuming your template file name is template.liquid, add a file template.liquid.json in the same directory to be a context of the template
• Ability to format the source template

Usage

Use the keybinding ctrl+shift+p to launch the command pallet. this extension makes 2 new commands available:

• HTML Liquid: Preview
• HTML Liquid: Format Template

Running locally

Running with npm

npm install
npm run test

See Testing Extensions for more info on testing VS Code extensions.