Instantly preview rendered liquid template
Tags: html, vscode, extensions, shopify
Published: 2024-03-20 17:16:25

[Liquid](https://shopify.github.io/liquid/) is a template language created by shopify. In my use case I use it for generate html that is almost similar looking but differs in data. So when iterating over my HTML, I need to preview the changes I made combined with my data.

I achieve this using 2 VS code extensions.


One is [Shopify Liquid Preview](https://marketplace.visualstudio.com/items?itemName=kirchner-trevor.shopify-liquid-preview) this enables us to connect our data with the template file. 
Another one is [HTML Preview](https://marketplace.visualstudio.com/items?itemName=george-alisson.html-preview-vscode) this will help us preview data connected html file inside vs code.

Install these 2 extensions.

So at first create a html file. Mine is named `index.html`

```
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Preview Liquid Template Instantly in vscode</title>
</head>

<body>
    <div style="width:100%; text-align: center;">
        <h1>Greetings from {{name}}</h1>
        <h2>{{post.title}}</h2>
        <h3>{{post.description}}</h3>
        {%- if conditional.enabled -%}
        <p>This section is only visible when conditional is enabled</p>
        {%- endif -%}
    </div>
</body>

</html>
```

Next create a json file that contains your data that will be connected with the HTML file. Mine is named `data.json`

```
{
  "name": "Minhazul Hayat Khan",
  "post": {
    "title": "Preview Liquid Template instantly in vscode",
    "description": "This uses 2 vscode extensions to directly preview the liquid template with data connected"
  },
  "conditional": {
    "enabled": true
  }
}
```
Now go to your HTML file and press "CTRL + SHIFT + P" and select the "Shopify Liquid: Open Preview to the side" option.


![select open preview to the side](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asri5xom7nwa0fjmh266.png)

After selecting it, select the json file you'd like to connect with the html

![connect data.json](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kk3ru5lsvyo30dk3ti1.png)

If everything is done properly it will generate a Preview with the connected data to the side.


![data connected html sample](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g0a4cxnixrpi9vunerkr.png)

Now click on the Preview html file and press CTRL + SHIFT + p again and select the HTML: Open Preview option.


![select the generated html file and select open preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uo0rmel1nbz02fmz9enc.png)

It will show you the HTML's preview.


![Rendered html page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw5iyxx6ik929co44jc1.png)

I had to struggle with checking and verifying the template changes for a very long time. I hope this helps someone. All the codes shown here can be found in my repo [here](https://github.com/minhaz1217/devops-notes/tree/master/70.%20instantly%20preview%20rendered%20liquid%20template).

## Reference
[https://github.com/minhaz1217/devops-notes/tree/master/70.%20instantly%20preview%20rendered%20liquid%20template](https://github.com/minhaz1217/devops-notes/tree/master/70.%20instantly%20preview%20rendered%20liquid%20template)