Skip to content

Developers

JSON to Liquid Converter

JSON to Liquid Converter

Beta

Turn JSON, a JavaScript object, a Python dict, a PHP array or YAML into Shopify Liquid: an assign block plus a rendering template, previewed with LiquidJS. Or convert a Handlebars, Mustache or Knap template into Liquid with every unmapped construct listed. Runs in your browser; nothing is uploaded.

Use via API
  • Free, no sign-up
  • REST + MCP
  • Updated
  • Reviewed by Olgun Ozoktas

Paste data in any of five notations and get a Liquid assign block plus a template that renders it.

Data
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Assigns

The Liquid will appear here..

Preview (LiquidJS)

Rendered by LiquidJS, not Shopify's engine: Shopify objects, sections and money formatting are not simulated, and Shopify-only filters pass their input through unchanged.

The rendered template will appear here..

Why Convert to Liquid in the Browser?

Shopify Liquid has no object or array literals, so data that lives in a JSON file, a JavaScript config or a Python script cannot be pasted into a theme as it is. Every developer who has hard-coded a menu, a feature list or a set of settings into a section has written the same translation by hand: one assign per value, arrays as a string split on a comma, arrays of objects as parallel arrays read with forloop.index0. This page writes that block for you, reads five notations so you paste what you have, and also writes the template that would render the same data once it arrives as a theme object. The second mode does the other common job: a Handlebars, Mustache or Knap template from another system, rewritten as Liquid with every construct that has no Liquid form listed by line. Both modes preview the result with LiquidJS, in your browser; nothing is uploaded.

Data mode reads the pasted text with a tolerant parser: strict JSON first, then a literal that accepts unquoted keys, single quotes, trailing commas, comments, undefined, Python's True, False and None, tuples, PHP's => pairs, array() and NULL, and finally YAML for text that does not open with a bracket. The parsed object is written two ways. The assigns block recreates the data with {% assign %} and {% capture %}: scalars as literals (a string that holds both quote characters or a newline becomes a capture, and one that holds Liquid tags is wrapped in raw), scalar arrays as a string split on the first separator that no item contains, arrays of objects as parallel arrays with a comment naming them, and anything deeper as a JSON string. The template skeleton is the markup a section would use: a paragraph per scalar, a link for URLs, an image for image keys, an if guard for booleans and nulls, a list for scalar arrays and a for loop for arrays of objects, with paths under the root variable when you name one.

Template mode tokenises the source into text, outputs, tags and comments, then rewrites each dialect's constructs. Handlebars and Mustache: #if, #unless and #each become if, unless and for; else and else if become else and elsif; block parameters, this, ./ and ../ resolve to Liquid paths through the same scope rules Handlebars uses; @index, @first and @last become forloop members; #with prefixes the names inside it; partials become render tags with their arguments; helpers with arguments become filters of the same name; Mustache sections become loops. Knap: elseif becomes elsif, colon arguments become comma arguments, loop members become forloop members, the ?? fallback becomes the default filter, dayjs date tokens become strftime, upper, lower, trim, length, unique and kebab become their Liquid names, and every Markdown-only filter is kept as written and reported.

Nothing is dropped silently. Each construct that has no Liquid form, changes meaning, or needs a filter or a snippet to exist is listed under the output with its line. Jinja2, Twig and Nunjucks templates are refused rather than half-converted. The preview runs LiquidJS, a Liquid implementation for JavaScript, not Shopify's engine: it shows structure and logic, while Shopify objects, sections, translations and money formatting are not simulated and Shopify-only filters pass their input through. The same two converters are on the FindUtils API and MCP server as json_to_liquid and template_to_liquid.

How it compares

The Shopify Liquid reference explains the language; it does not write the assign block for a JSON file or rewrite a Handlebars template. A generic JSON to code generator writes classes and interfaces, which Liquid cannot use. Online Liquid playgrounds render a template you already have. This page starts from the data or the template you already have, writes the Liquid, tells you where the translation is lossy, and renders the result, all without leaving the tab.

Liquid Conversion Tips

  • Every item in a split array is a string. Read a number back with | plus: 0, and compare strings with strings.
  • Nested keys are flattened with underscores: shop.name becomes shop_name in the assigns, and stays shop.name in the template, which reads the data as a theme object.
  • Arrays of objects become parallel arrays, one per key. Loop over the first and index the others with forloop.index0.
  • Handlebars and Mustache escape output by default and Liquid does not, so the converter adds | escape to plain outputs; turn it off for a template that already escapes or that outputs trusted HTML.
  • Liquid has no not inside a compound condition and ignores grouping parentheses. The converter says so where it matters; rewrite those lines with unless or a second if.

Frequently Asked Questions

What does JSON to Liquid actually produce?
Two things from the same data. The assigns block is Liquid code that recreates the values with {% assign %} and {% capture %}: one variable per scalar, nested keys flattened to snake_case names, scalar arrays as split strings, arrays of objects as parallel arrays. The template skeleton is the markup that would render the same data once it arrives as a theme object: paths such as shop.name, for loops over arrays, if guards for booleans and missing values. Use the first when the data must be hard-coded in a section, the second when the data comes from Shopify.

Why are arrays written as strings with split?
Because Liquid has no array literal. The only way to build an array inside a template is to split a string, so ["new", "sale"] becomes "new,sale" | split: ",". The converter picks the first separator (comma, semicolon, pipe, tilde, caret) that no item contains and says so when none is free. Every item of such an array is a string; use | plus: 0 to read a number and compare strings with strings.

How are arrays of objects handled?
As parallel arrays, one per key, which is the pattern Shopify developers use by hand: items_title and items_price for a list of items, each a split string, with a comment naming them. Loop over one and read the others with forloop.index0. A key missing from some objects becomes an empty string in those slots, and a nested value inside such an object becomes a JSON string; both cases are listed in the warnings.

Which notations does Data mode read?
Strict JSON, a JavaScript object literal with unquoted keys, single quotes, trailing commas, comments and undefined, a Python dict with True, False, None and tuples, a PHP array with => pairs, array() and NULL, and YAML. Auto-detect tries JSON, then the literal forms, then YAML for text that does not open with a bracket; the footer under the input says which one was read. Code such as new Date() is refused with its line and column, because it is not data.

Which template dialects does Template mode convert?
Handlebars, Mustache and Knap. Jinja2, Twig and Nunjucks templates are recognised and refused with a clear message rather than half-converted. Auto-detect looks at the tags used: Handlebars block syntax and partials, Mustache sections, or Knap's elseif, colon arguments and ?? fallback. Set the dialect by hand when a small template does not carry enough clues.

Why does the output add | escape to my Handlebars variables?
Handlebars and Mustache HTML-escape {{ }} outputs by default and Liquid does not, so a faithful conversion adds | escape to plain outputs and leaves {{{ }}} and {{& }} outputs bare. Choose Never under Escape outputs for a template that outputs trusted HTML or already escapes, or Always to add it to a Knap template, which writes Markdown and gets none by default.

What do the warnings mean?
Each warning names a line and a construct that has no Liquid form, changed meaning, or needs something to exist. Typical cases: a helper with arguments that became a filter of the same name, a partial that became a render tag whose snippet must exist, a Mustache section converted as a loop, not inside a compound condition rewritten as == false, @key replaced with an index, a Markdown-only Knap filter kept as written, and Knap's habit of trimming whitespace after a tag. Nothing is dropped without a line in that list.

Is the preview the same as Shopify?
No. The preview runs LiquidJS, a Liquid implementation for JavaScript that follows the standard Liquid syntax and filters. It renders the structure and logic of the template against the data you give it. Shopify's objects such as product and collection, sections and blocks, translations and money formatting are not simulated, and Shopify-only filters such as money and img_url pass their input through unchanged so the preview does not fail on them. Test the final template in a theme.

Is my data or template uploaded anywhere?
No. Parsing, conversion and the preview run in your browser; LiquidJS is fetched once as a script and no request carries your text. You can confirm that in the browser's network panel while converting.

Can I run these conversions from a script or an AI agent?
Yes. Both converters are on the FindUtils API and MCP server. json_to_liquid takes the source text, an optional notation, root and escape_html flag and returns the assigns, the template, the notation read and the warnings. template_to_liquid takes the template text, an optional dialect and escape_output flag and returns the Liquid, the dialect read and the warnings with their lines.

Rate This Tool

0/1000

Get Weekly Tools

Suggest a Tool

From FindUtils

More to explore

Products and services from the team behind FindUtils.

Promote your tool
Featured product seeranks.com SeeRanks — transparent product discovery A public ranking board where paid placement is always labeled and every product keeps its earned position. View SeeRanks Free favicon tool emojifavicons.com Emoji Favicons Turn any emoji into a favicon with one HTML line. SVG, PNG or ICO, no sign-up. <link rel="icon" href=".../🦊.svg"> Create a favicon
FindUtils service findutils.com Articles for software tools A sourced article for your channels, or a sponsored FindUtils publication with editorial review. Compare packages Domain portfolio findutils.com Domain names for sale .com.dev.sh.app.io Unused names across dev tools, AI, PDF and commerce. Make an offer. Browse the list Playable ranking towerscore.io TowerScore — stack the skyline Play to climb, or buy a floor. Paid floors are labeled. Open TowerScore