https://github.com/yq314/vscode-braze-liquid-preview

Braze Liquid Preview for Visual Studio Code
https://github.com/yq314/vscode-braze-liquid-preview

braze hacktoberfest liquid previewer vscode-extension

Last synced: 2 months ago
JSON representation

Braze Liquid Preview for Visual Studio Code

• Host: GitHub
• URL: https://github.com/yq314/vscode-braze-liquid-preview
• Owner: yq314
• License: mit
• Created: 2019-04-11T15:46:36.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2022-02-26T13:38:20.000Z (almost 3 years ago)
• Last Synced: 2023-04-04T02:11:49.912Z (almost 2 years ago)
• Topics: braze, hacktoberfest, liquid, previewer, vscode-extension
• Language: TypeScript
• Homepage: https://marketplace.visualstudio.com/items?itemName=chinyip.braze-liquid-preview
• Size: 747 KB
• Stars: 1
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Braze Liquid Preview for Visual Studio Code

![GitHub](https://img.shields.io/github/license/yq314/vscode-braze-liquid-preview.svg)

![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/chinyip.braze-liquid-preview.svg?logo=visual-studio-code)

![Visual Studio Marketplace Installs](https://img.shields.io/visual-studio-marketplace/i/chinyip.braze-liquid-preview.svg?logo=visual-studio-code)

Gives a live preview for [Braze Liquid](https://www.braze.com/docs/user_guide/personalization_and_dynamic_content/liquid/overview/) 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](https://github.com/kirchner-trevor)'s [vscode-shopify-liquid-preview](https://github.com/kirchner-trevor/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](https://code.visualstudio.com/api/working-with-extensions/testing-extension)

## Implemented Braze Features

The Braze templating features are provided by [brazejs](https://github.com/yq314/brazejs), refer to its [README](https://github.com/yq314/brazejs#difference-with-liquidjs) 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.