Template Docs Commerce APIs Webhooks Custom Code Upcoming Changes
Get Started
Get Started

View JSON Data

The JSON data returned to every page and block can be viewed and accessed via a URL or template formatter.

Website & Collection Data

To access the data behind any collection in a structured format, append this query string to any URL on your site: ?format=json-pretty In addition to returning collection data, other data needed to construct a full page (such as website data) will also be returned.

Note: Using ?format=json-pretty is not static and should not be used as an alternative to our APIs.

Pretty JSON Example:

Here is an example URL you can paste into your browser address bar to view the JSON data:

http://base-template.squarespace.com/blog/?format=json-pretty

{
    ...

    "collection": {
        "id": "5048fde7c4aa917cbd4d8e13",
        "websiteId": "50295e80e4b096e761d7e4d3",
        "enabled": true,
        "starred": false,
        "type": 1,
        "ordering": 2,
        "title": "Blog",
        "navigationTitle": "Blog",
        "urlId": "blog",
        "itemCount": 2,
        "updatedOn": 1454432700858,
        "pageSize": 20,
        "folder": false,
        "dropdown": false,
        "tags": [
            "tag1",
            "pizza",
            "coffee",
            "snacks",
            "tag2"
        ],
        "categories": [
            "category1",
            "category2"
        ],
        "homepage": false,
        "typeName": "blog",
        "synchronizing": false,
        "fullUrl": "/blog/",
        "passwordProtected": false,
        "typeLabel": "blog"
    },

    ...
}

Block & Navigation Data

Within a template file directly, you can use the JSON formatter to output JSON for any item you have in scope, just add this within the block file: {item|json-pretty} – this is very useful during development as you can review the JSON data available in the source of the page as rendered.

Example from a navigation.block file:

<!-- {@|json-pretty} -->

You can also log the object in your browser's console if you find that preferable to viewing the source:

<script>console.log({@|json-pretty})</script>

This is especially useful for debugging.