# What is JSON-T?
**JSON Template** (JSON-T) is a minimal but powerful template language, designed to be paired with a [JSON](/what-is-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:
```html
<!-- 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.

```html
<!-- will print Hello -->

{foo.bar.baz}

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

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

## Built-in Directives
[Directives](/json-t-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.

```html
<!-- 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.

```html

<!-- 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](https://code.google.com/archive/p/json-template/wikis/Reference.wiki)