Braze Liquid Preview for Visual Studio Code

Gives a live preview for Braze Liquid templates. The extension compiles Braze Liquid template on the fly, applying preview data and rendering resulting HTML in separate window.

The code is based on Trevor Kirchner's vscode-shopify-liquid-preview. I extended it with additional Braze specific tags and filters so it works for Braze liquid too.

Features

• Live preview for Braze 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

Usage

• Use the keybinding ctrl+k v while selecting a file with a .liquid extension
• Use the keybinding ctrl+shift+p and type Braze Liquid: Open Preview to the Side to run from command panel

Running locally

Running with npm

npm install
npm run test

Test your extension with Visual Studio Code

Implemented Braze Features

The Braze templating features are provided by brazejs, refer to its README for supported features and usage.

Caveats

⚠️ Braze only implements a subset of Shopify liquid, so things working here may not work in Braze, do test it in Braze to confirm everything works fine before publishing the template.