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.
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.
- Live preview for HTML Liquid templates, updating as you type
- Support for fake data. Assuming your template file name is
template.liquid, add a filetemplate.liquid.jsonin the same directory to be a context of the template - Ability to format the source template
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 with npm
npm install
npm run test
See Testing Extensions for more info on testing VS Code extensions.