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. 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.

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.