Copy page

Template Language

What is JSON-T?

JSON Template (JSON-T) is a minimal but powerful template language, designed to be paired with a JSON dataset. This data is provided by Squarespace and is dynamically generated, containing all of your site content.

Squarespace uses JSON-T to transform data into a web page. This process is called "rendering" the web page. The renderer combines data from the CMS, also known as the "context," with the JSON-T code to create the HTML output. That HTML is then sent to your browser and displayed.

Here is a high-level overview of JSON-T and how it works:

JSON-T uses a special syntax to mark where data will be inserted into the page. For example: {foo}. These are called JSON-T tags. There are two main types of tags in JSON-T, variables and directives.

• Variables are used to insert data into the page. They tell the renderer what data to render. This is a variable tag: {foo}
• Directives are like commands. They tell the renderer how to render a section of JSON. You can identify them because they use an extra dot, and they often come in pairs. For example: {.section foo} expand foo {.end}.

Variable Substitution

Variables inject data from the JSON context onto the page. To inject the value of baz, put it within curly braces:

Code
<!-- will print Hello -->

{baz}

<!-- given this JSON context -->

{ "baz" : "Hello" }

You can also drill down into the JSON structure using dot notation. When looking up a variable name, we start at the top level of the context and pick the nested object that corresponds to each part of the variable.

Code
<!-- will print Hello -->

{foo.bar.baz}

<!-- given this JSON context --->

{
  "foo": {
    "bar": {
      "baz": "Hello"
    }
  }
}

Built-in Directives

Directives are built-in language constructs that typically start with a period (.). The two main directives used in JSON-T are sections and repeated sections

{.section foo} starts a section named foo. The name corresponds to a JSON key. The section is expanded if the key is present and not false. Sections are closed with a {.end} directive.

Code
<!-- will print Hello -->

{.section foo}
    {bar}
{.end}

<!-- given this JSON context -->

{
  "foo": {
    "bar": "Hello"
  }
}

<!-- but prints nothing if "foo" is missing -->

{.repeated section bar} starts a repeated section named bar. The name corresponds to a JSON key, whose value is a list of dictionaries or strings. The section is expanded once for each element of the list. The special variable {@} represents the value of the context at the current scope, or currently active part of the context.

Code

<!-- will print Hello World -->

{.repeated section bar}
  {@}
{.end}

<!-- given the JSON context -->

{
  "bar": ["Hello", "World"]
}

Putting it All Together

Combining these simple constructs together with your HTML, CSS and JavaScript is how a Squarespace Template is built, using the CMS to provide the data and information that we render in our template files.

REFERENCE: JSON-TEMPLATE REFERENCE WIKI