Introduction to HSON

About HTML Structured Object Notation ( 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

Unfortunately, generating valid JSON from Webflow CMS content can be problematic, due to the way Embed fields work.

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.

In deference to JSON, we named this syntax as HSON, or HTML Structured Object Notation. It has specific design mechanics which allows us to unambiguously transform HTML-encoded content into script-friendly JSON.

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.

See the Features page for more details.

	JSON	HSON
Objects	Yes	Yes
Nested Objects	Yes	Yes
Typed Values ( string, number, boolean )	Yes	Yes
Null Values	Yes	Yes ( automatic )
Multiline Strings	Yes	Yes ( automatic, from Webflow multiline text fields containing line breaks )
Arrays	Yes	No... considering use cases and design solution
Comments	Not in browsers, but in JSON5	Future