Json.liquid

Purpose

Json.liquid is a debugging helper template used to serialize Liquid models into the browser so developers can inspect the data that the server provides to the theme.

In practice, this file outputs the serialized model in two ways:

logs it to DevTools via console.log(...)

assigns it to a global variable: window.viewModel

This is extremely useful when:

you're building or troubleshooting a component and need to confirm the shape of model

you want to inspect Root / GlobalData in DevTools

you need to validate which settings/translations are actually available at runtime

Where it's used

Json.liquid is rendered by the main layout:

Structure/LayoutA.liquid

Example (from the layout):

{% render 'Structure\\Json' with Root as model %}

In this usage, the layout passes Root into Json.liquid as model, so the page can output a serialized version of the full root model.

Inputs

Json.liquid expects a variable named model.

The caller decides what model value is:

the layout may pass Root

a component list can pass each model (useful when debugging a specific component contract)

Output

The output is a <script defer> tag that:

prints a styled log entry to the console, including the serialized model

sets window.viewModel to the serialized model

The actual implementation in Structure/Json.liquid looks like this:

<script defer>
    console.log(
        `%c  ${"{{model.Name}}" ? "{{model.Name}}" : "View Model"} `
        , 'color: green; background:black; font-size: 20pt'
        , {{ model | serialize | raw }}
    )

    window.viewModel = {{ model | serialize | raw }};
</script>

Once present, you can inspect it in the browser console:

window.viewModel

Example β€Rootβ€ model shape

When used from Structure/LayoutA.liquid, the layout passes Root as model:

model.globalData (company, settings, modules, user, culture, etc.)

model.page (type, metas, breadcrumbs, page data)

model.headerComponents / model.bodyComponents / model.footerComponents

model.reusables

This matches the printed example you shared (notably globalData.settings, headerComponents including NavBar, and large nested navigation trees).

When to use it

Use Json.liquid temporarily when:

a component renders incorrectly because some model.Settings.* key is missing

translations don't show as expected (model.Translations.*)

feature flags/settings from GlobalData.Settings are not what you expect

you need to confirm which user state is available in Root.GlobalData.User

Privacy / security notes

Because it can expose a lot of data to the browser:

Do not output sensitive information in production environments.

If the platform includes user data in Root, ensure you're comfortable exposing it to the client.

Prefer scoping debug output to the minimum necessary model when troubleshooting.

Recommendations

Large payloads: Serializing the full Root model can be heavy and clutter DevTools. Use it only when needed.

Disable after debugging: Keep debug output off (or limited) when you're done.

Multiple renders: If you render Json.liquid for every component in a list, it will output many scripts and become noisy quickly.

Tips for inspecting quickly

In DevTools console, run window.viewModel.globalData.settings to jump directly to feature flags (e.g. showProductComparison, enableWishlist, etc.).

To inspect a single component contract, render Json.liquid with a component model (instead of Root) so the payload stays small.

Json.liquid

Purpose#

Where it's used#

Inputs#

Output#

Example β€Rootβ€ model shape#

When to use it#

Privacy / security notes#

Recommendations#

Tips for inspecting quickly#