Using HSON

Currently, HSON is implemented as the preferred data-source format in Sygnal's SA5 Data library.

SA5 Data parses HSON blocks in your page, and loads that data into internal datasource structures which can then be data-bound to do things like;

• Populating a form options field from the CMS

• Embedding data into rich text blocks in a handlebars-like templated fashion

• Custom summary calculations performed by your custom code against CMS data, such as inventory counts, average product price, CMS item counts, and so on.

The Basics of HSON

HSON blocks are placed in Webflow's HTML Embeds, typically inside of any Collection List or Collection Page. They describe the JSON object you want to create.

Here's a very simple example of what HSON looks like.

<script type="sygnal/sa5-data">
name: John Doe
slug: john-doe
brief: Software Engineer
</script>

This would be parsed as the JavaScript object;

{
  "name": "John Doe",
  "slug": "john-doe",
  "brief": "Software Engineer"
}

That resulting data can be used in SA5 Data-Binding, or in your custom JavaScript code.

Typically, you would use Webflow's Field embeds to compose the SA5 Data object from Webflow's CMS Embed fields. An example might look like this;

HTML Embed example setup

The resulting JSON object is stored in SA5's Datastore so that you can easily access all of the data on your page, even hundreds of data items.

In the <script> example above, you can see two custom attributes, wfu-data-dsn and wfu-data-item-id. These are specific to SA5 Data and identify the collection and the item uniquely, for storage, so that they can be easily retrieved for data-binding.

For example if this collection contained an item with a slug of 102-hemingway, then you could access it directly through data-binding;

wfu-bind = $data.listings.102-hemingway.name

Advanced Structures

To provide a full bridge between Webflow's CMS Data and structured JSON objects, the SA5 Data syntax has support for typed values ( string, number, boolean ), null values, nested objects, and multiline strings.

See the HSON Features section for more.

Here's a more complex HSON example, which contains typed values, and nested objects.

<script type="sygnal/sa5-data">
name:$ John Doe
age:# 23
isActive:? true
address::
    street: 
    city: Springfield
    country: 
    postalCode::
        code:# 
        region: 
</script>

This generates the following JSON object;

{
  "name": "John Doe",
  "age": 23,
  "isActive": true,
  "address": {
    "street": null,
    "city": "Springfield",
    "country": null,
    "postalCode": {
      "code": null,
      "region": null
    }
  }
}