Skip to main content
The {{json}} helper safely serializes a value to JSON for inline output in your theme. This is especially useful when you need to pass server-rendered data into a <script type="application/json"> block or into a JavaScript-powered UI.

​
Example Code

<script id="theme-config" type="application/json">
    {{json accent=@site.accent_color title=@site.title}}
</script>
The helper outputs escaped JSON that is safe to embed inline: 
{"accent":"#FF1A75","title":"My site"}

​
Passing an object

{{json @site}}

​
Passing named values

If you pass hash arguments, {{json}} serializes those named values instead: 
{{json title=@site.title url=@site.url membersEnabled=@site.members_enabled}}

​
Notes

  • Returns null when the input value is undefined
  • Escapes unsafe characters such as <, > and & for inline script safety
  • Intended for JSON output, not for formatting arbitrary HTML