Skip to content
| Marketplace
Sign in
Visual Studio Code>Snippets>Liquid TemplatingNew to Visual Studio Code? Get it now.
Liquid Templating

Liquid Templating

Hafizhan

|
13 installs
| (0) | Free
A VSCode extension for rendering templates using Liquid and external JSON data, with support for database queries and dynamic data sources.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Liquid Templating for VSCode

Liquid Templating is a Visual Studio Code extension that allows you to render templates using the Liquid templating engine and JSON-based data sources. It also supports dynamic data generation using JavaScript and integration with Microsoft SQL Server.

Demo

Features

  • Render .liquid-template.* files using data from .liquid-data.json.
  • Define your data statically or dynamically using a generator script.
  • Fetch data from SQL Server databases using a JavaScript data source file (*.liquid-data-src.js).
  • Integrated CodeLens for easy actions:
    • ▶ Render: Render your template to the output file.
    • ▶ Fetch: Fetch data from the database and update the JSON data.
    • ▶ Watch: Watch for file changes and automatically re-render.
  • Live Preview: View rendered templates in real-time as you edit your data or template.

Commands

The following commands are available in the extension:

  • Liquid Templating: Render: Render the template to the output file.
  • Liquid Templating: Render and Watch: Render the template and watch for changes to automatically re-render.

Getting Started

  1. Create a .liquid-template.* file as your template.
  2. Create a .liquid-data.json file to define:
    {
      "template": "./your-template.liquid-template.txt",
      "output": "./output.txt",
      "data": {},
      "dataGenerator": {
        "src": "./your-generator.liquid-data-src.js"
      }
    }
    
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft