Liquid Template Previewer
LiveParse and preview Liquid templates with custom JSON data context.
Understanding Liquid Template Language
Liquid is a template language created by Shopify and used across Shopify themes, Jekyll static sites, Eleventy, and other platforms. Liquid templates combine HTML markup with dynamic tags ({% if %}, {% for %}, {% assign %}), output expressions ({{ product.title }}), and filters (| upcase, | date, | money) to generate HTML from data. Previewing Liquid templates requires sample data and a rendering engine — something that is difficult to set up locally without installing the full Shopify or Jekyll environment.
Preview Shopify Liquid templates instantly by providing a Liquid template and a JSON data context. Supports common Liquid tags including for loops, if/else conditionals, assign, capture, and standard filters like upcase, downcase, date, and split. Ideal for Shopify theme developers and Jekyll users.
The Devkitr Liquid Template Previewer renders Liquid templates with sample JSON data, showing the HTML output in real time. Write or paste Liquid template code, provide sample data in the JSON panel, and see the rendered result instantly — without setting up a Shopify development environment, Jekyll server, or any local rendering pipeline.
In a typical development workflow, Liquid Template Previewer becomes valuable whenever you need to parse and preview liquid templates with custom json data context. Whether you are working on a personal side project, maintaining production applications for a company, or collaborating with a distributed team across time zones, having a reliable browser-based inspection tool eliminates the need to install desktop software, write one-off scripts, or send data to third-party services that may log or retain your information. Since Liquid Template Previewer processes everything locally on your device, your data stays private and your workflow stays uninterrupted — open a browser tab, paste your input, get your result.
Key Features
Real-Time Rendering
Updates the HTML output as you type, providing instant feedback on template changes without manual build or refresh steps.
JSON Data Editor
Define template variables and collections in a JSON editor with validation, simulating the data objects available in your Shopify or Jekyll environment.
Full Tag Support
Supports all standard Liquid tags including if/elsif/else, for loops, case/when, capture, assign, increment, and comment blocks.
Filter Library
Implements standard Liquid filters — date formatting, string manipulation, math operations, array sorting, and URL encoding.
How to Use Liquid Template Previewer
Write Your Template
Enter Liquid template code with tags, output expressions, and filters in the template editor panel.
Provide Sample Data
Define the variables your template references (product, collection, page, etc.) as JSON in the data panel.
Preview the Output
The rendered HTML output updates in real time, showing how your template transforms the data into markup.
Debug and Iterate
Modify templates or data and see changes instantly. Test different data scenarios to verify conditional logic and loop behavior.
Use Cases
Prototyping Shopify Theme Sections
Write and preview Shopify section templates with sample product data before deploying to a development store.
Testing Conditional Display Logic
Test if/elsif/else conditions with different data inputs to verify that templates show the correct content for each scenario.
Building Jekyll Page Templates
Preview Jekyll post and page templates with sample front matter data without running the full Jekyll server locally.
Learning Liquid Syntax
Experiment with Liquid tags, filters, and expressions in a safe preview environment with immediate visual feedback.
Pro Tips
Test your templates with empty collections and nil values to ensure they handle missing data gracefully with appropriate fallback content.
Use the capture tag to assign rendered blocks to variables for reuse — it keeps templates DRY and easier to maintain.
Test Liquid filters in isolation by outputting {{ "test" | upcase }} before using them in complex expressions to verify behavior.
Structure your sample JSON data to match the actual Shopify or Jekyll data schema as closely as possible for realistic preview results.
Common Pitfalls
Forgetting to handle nil and empty values in templates
Fix: Use {% if variable %} or {{ variable | default: "fallback" }} to prevent blank output when data is missing from the rendering context.
Using single quotes for Liquid string comparisons
Fix: Liquid comparisons use double quotes: {% if status == "active" %}. Single quotes are not supported in standard Liquid.
Nesting Liquid output tags {{ }} inside other tags {% %}
Fix: Liquid tags and output are separate constructs. Use variables or captures to pass values between different tag contexts.
Frequently Asked Questions
QWhat Liquid tags are supported?
For loops, if/else/elsif/unless conditionals, assign, capture, increment, decrement, comment, and raw tags are supported.
QCan I use Liquid filters?
Yes. Common filters like upcase, downcase, capitalize, strip, replace, split, first, last, size, date, plus, minus, times, and more are supported.
QDoes it support Shopify-specific tags?
This previewer focuses on core Liquid syntax. Shopify-specific objects like product or collection require actual Shopify data.
Related Articles
Related Tools
SQL Formatter
SQL beautifier — format and beautify SQL queries with proper indentation online.
HTML Formatter
Beautify HTML code with proper indentation, nesting, and readability.
CSS Beautifier
Beautify minified or messy CSS with consistent formatting and indentation.
XML Formatter
Format and beautify XML documents with proper indentation and structure.