Technical Notes

HSON ( prev SA5 Data ) is a custom notation designed to represent structured data in a human-readable format. It is designed specifically to work with Webflow's Custom Code areas and HTML Embeds, and to work with Webflow's HTML-encoded CMS field embeds.

This syntax combines elements of traditional data representation formats like JSON, YAML and HCL, and simplifies them for ease of use. SA5 Data is particularly suitable for configuration, data representation, and other scenarios where clear, concise data structures are desired.

Design features;

• Is very easy to work with in Webflow's HTML Embed editor

• It reliably handles Webflow's innate HTML encoding in embedded CMS fields

• It handes line breaks in multiline embed content

• It is easily translated directly to JavaScript objects

Sygnal designed SA5 Data because other approaches like raw JSON embeds created too many risks for broken, unparseable data structures. SA5 Data safely transports HTML Encoded CMS data from Webflow's Collection lists into JavaScript objects with zero risk of data loss, damage, or broken scripts.

Basic Rules

Script Tag:

• Every SA5 Data block starts with a <script type="sygnal/sa5-data"> tag and ends with a </script> tag.

Key-Value Pairs:

• Represent data as key: value pairs.

• Each pair should be on a new line.

• Whitespace will be trimmed from both the key and the value

• The first colon on the line is a delimiter, thus the key cannot contain a : but the value can

Values:

• Do not enclose values in quotes. They are not needed and would be considered part of the string content.

• All values must be HTML-encoded. This happens automatically with Webflow's embedded fields. If you have static string content;

  • < must be encoded as <

  • > must be encoded as >

  • & must be encoded as &

• If a value is delimited by < and > characters, the whitespace and line feeds within those angle brackets are considered part of the value.

  Copy

  multi-line-value: <This is a
  multi-line value with preserved whitespace and line breaks.>

• Value type defaults to strings, and will be created in the JavaScript object accordingly. However you can also define numeric and boolean types by appending a type identifier to the value separator;

  • : or :$ indicates a string value

  • :# indicates a numeric value

  • :? indicates a boolean value

• Empty values of any time resolve to null values.

Indentation & Nesting:

• Nested structures are indicated by indentation.

• Use consistent indentation (preferably spaces) to represent nested structures. The level of indentation indicates the depth of nesting.

• For each nested level, increase the indentation consistently (e.g., by two or four spaces).

No Commas or Brackets:

• Unlike JSON, SA5 Data doesn't use commas to separate key-value pairs or brackets to denote objects.

Technical Notes

In the resulting JavaScript object-

• Value types are all string, unless identified as boolean or numeric

• Empty values are always null

• Webflow's HTML encoded fields are decoded

• Line breaks are encoded as