Liquid Template Debugger

The industry-standard debugging environment for complex Liquid templates.
Eliminate guesswork with deterministic, line-by-line execution and real-time visualization.

Quick Start

Get your first template debugged in less than half a minute:

1. Install: Search for Liquid Template Debugger in the VS Code Marketplace and click Install.
2. Open: Open any .liquid file in your workspace.
3. Launch: Click the Liquid Debugger icon in the left Activity Bar.
4. Debug: Paste your sample JSON into the input box and click Start Debugging.

Done! You are now stepping through your Liquid code in real-time.

The Ultimate Debugging Workflow

Experience a seamless transition from writing code to perfecting logic with our structured workflow.

1. Rapid Launch

Access the debugger instantly via the Activity Bar icon. Our dedicated entry point ensures your workspace remains organized while keeping powerful tools just one click away.

2. Intuitive Data Setup

Inputting sample data has never been easier. Use the interactive popup to paste your JSON payload or select from built-in high-quality samples.

Data Insertion Popup

Sample Data Selection

3. Precision Execution

Take full control of your template execution. Start debugging with a single click and manage complex logic using high-fidelity breakpoints.

Start Debugging

Breakpoint Management

4. State-of-the-Art Debugger UI

Visualize your template's lifecycle in real-time. The main window provides a comprehensive view of variables, transformations, and live output rendering.

AI-Powered Template Engineering

Accelerate your development cycle with our integrated Gemini AI engine.

Settings & Model Selection

Configure your AI experience by providing your Gemini API key and selecting the model that best fits your complexity requirements.

AI Settings

Model Selection

AI Mapping & Generation

Transform requirements into code instantly. Use AI Mode to describe your mapping needs and watch as the debugger generates production-ready Liquid templates.

AI Mode Entry

Main Window

Alternative View

Personalization and Visual Mastery

Themed Environments

Choose a look that matches your style. Our Theme Selector allows you to switch between premium visual presets, optimizing contrast and readability for your specific workflow.

Built-in Knowledge Hub

The Interactive Guide

Never leave your IDE to look up documentation again. The integrated Guide provides a searchable, categorized reference for all Liquid tags, filters, and operators with live examples.

Pro Features Deep Dive

Advanced Transformations

Experience the power of our rendering engine as it handles multi-pass transformations with ease.

Variable State Tracking

Real-Time Watch Expressions

Template Management & Quick Access

Effortlessly switch between different template versions and sample data sets using our integrated management menu or the VS Code Command Palette.

Interactive Template Menu

Command Palette Access

Security & Privacy

We take developer privacy seriously and prioritize your intellectual property with a hardened security architecture.

• Zero Egress: Your Liquid templates and sample JSON payloads never leave your local machine. All rendering and step-through logic occurs entirely within your VS Code instance.
• Secure Sandbox: All rendering is contained within a restricted Content Security Policy (CSP) and isolated environment to prevent any side effects on your local filesystem or system resources.
• No Telemetry: We do not track your templates, input data, or usage patterns. Your debugging sessions are strictly private.

1. AI Generator Security (Opt-in)

Our Gemini-powered AI Mapper is designed for safe enterprise usage:

• Encrypted Secret Storage: API keys are managed by VS Code's native SecretStorage (industry-standard encryption).
• Automatic PII Scrubbing: Our sanitization pipeline redact potential PII, tokens, or sensitive patterns before transmitting prompts to the AI model.
• Opt-in Connectivity: AI features are strictly opt-in. The extension remains fully functional for standard debugging even without an internet connection or API key.

Advanced Configuration

Persist your environment settings using .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "liquid",
      "request": "launch",
      "name": "Debug Liquid Template",
      "template": "${file}",
      "data": "${workspaceFolder}/data.json",
      "format": "json"
    }
  ]
}

Support & Community

• Issue Tracker: Report a Bug
• Contribution: GitHub Repository

Developed with ❤️ for the Liquid Community by Soubhik and Bob.