Introduction to HSON

No doubt you’re familiar with JSON, which stands for JavaScript Structure Object Notation.

A simple JSON object looks like this;

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

It’s fundamental to the web, and used in many places;

• Importing and exporting data from JavaScript programs.
• Transporting data to and from API’s
• Persisting structured data in cookies or webStorage

JSON and Webflow

Often when developers are working with Webflow, we need the ability to bring data easily from our Webflow-generated page - including CMS content - into our JavaScript program.

For example;

• We want to pull some CMS data, perform calculations and show a total
• We want to generate JSON-LD data for better SEO
• We want to utilize data in places like a form select element

The Problems

JSON can be constructed in a Webflow Embed element, and the Add Field feature can be used to embed most CMS field types.

However there are issues with this approach;

• All field content embedded in this way is HTML-encoded, rather than JSON-encoded. This leads to a high likelihood for invalid JSON
• In multiline fields, line breaks invalidate JSON
• JSON is syntactically inflexible and requires precise entry. One too many commas? Forgot a double quote? Your JSON is invalid.

Essentially, you risk a lot of invalid JSON, which means script failures and SEO problems.

Introducing HSON

HSON acts as a transport format between your Webflow CMS-emitted content ( which is HTML ) and JSON.

Here’s what that same JSON above looks like in HSON.

name: John Doe
slug: john-doe
brief: Software Engineer

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

Why HSON was Invented

The primary purpose of SA5 Data is to provide a reliable means to expose Webflow’s collection lists as a JSON data source that can be used in your custom code.

• Count and group data
• Perform calculations
• Generate running totals
• and much more

Once the data is accessible to your scripts, you can do whatever you like with it.

Core Features

HSON is intended to provide as much parity as possible with JSON.