SA5 | Sygnal Attributes | Designed for Webflow
Buy Us a Beer!Community ForumMicro-Consulting
  • ➑️Github Repo
  • πŸ‘«Sygnal Attributes Community
  • πŸ“˜Overview
    • Sygnal Attributes v5
    • How to Add Custom Code
    • What is Sygnal Attributes?
    • Sponsor a Feature ✨
    • What's New?
    • Library Modules
    • Technical Notes & Goals
      • CSS Media Queries
      • Callback Handlers
      • Custom Attributes
    • Documentation
    • Configuration Blocks
      • Configuration Block Specification
    • Preloaders
    • Breakpoints
    • Component Support πŸ§ͺ
    • Sygnal Attributes ( SA5 ) Support
    • Dev Team Notes
    • GDPR
    • SA6
    • Triggers, Events & Actions
      • Triggers
        • Click Triggers
        • Scroll Into View Trigger
        • Hover Trigger
        • Timer Trigger
        • Form Triggers πŸ§ͺ
          • Form Submit Trigger πŸ§ͺ
        • Exit Intent Trigger πŸ§ͺ
        • ECommerce Triggers πŸ§ͺ
        • Inactivity Trigger πŸ§ͺ
        • Page Load Trigger πŸ§ͺ
        • Url Hash Trigger πŸ§ͺ
        • Gated Trigger πŸ§ͺ
        • Link Triggers πŸ§ͺ
        • Reactiv Triggers πŸ§ͺ
        • Interaction Trigger πŸ§ͺ
      • Events
        • Namespacing
        • Event Data
        • Link-Based Triggers πŸ§ͺ
        • Breakpoints πŸ§ͺ
        • Persistent Events πŸ§ͺ
        • Gated Events πŸ§ͺ
      • Actions
        • Click Actions
        • Alert Action
        • Visibility Actions
        • Scroll Into View Action
        • Video Actions πŸ§ͺ
        • Audio Action πŸ§ͺ
        • Class Adder Actions πŸ§ͺ
        • Tab Element Actions πŸ§ͺ
        • Interaction Actions πŸ§ͺ
        • Form Actions πŸ§ͺ
        • Navigate Actions πŸ§ͺ
        • Script Actions πŸ§ͺ
    • SA5 Core
      • Handlers
      • Controllers
      • Core Processing
      • Core Technical Notes
        • Element Tracking
  • πŸ“˜sa5-cache
    • πŸ”About SA5's Cache Lib
    • Data Caching ❺
      • Cache Setup v4
  • πŸ“˜sa5-socialshare
    • πŸ”About SA5's Social Share Lib
    • πŸš€Quick Start | SA5 Social Share
    • Email Social Share ❺
  • πŸ“˜sa5-detect πŸ§ͺ
    • πŸ”About SA5's Detect Lib
    • πŸš€Quick Start | SA5 Detect
    • Page
    • User Agent Detection
    • Geolocation Detection πŸ§ͺ
      • Cache Setup v4
    • Detect Incognito Mode
  • πŸ“˜sa5-analytics
    • πŸ”About SA5's Analytics Lib
    • πŸš€Quick Start | SA5 Analytics
    • A/B and Multivariate Testing
    • UTM Tracking
    • Rel Attributes
    • GA Events
    • GTM Events ❺πŸ§ͺ
      • Important dataLayer Notes
      • Facebook
      • Google Analytics ( GA4 )
      • Future
  • πŸ“˜sa5-data
    • πŸ”About SA5's Data Lib
    • πŸš€Quick Start | SA5 Data & Data-Binding
    • Usage Notes
    • Concepts & Terminology
      • Data Paths
      • Complex Data Sources
      • Developing Concepts πŸ“
    • Data Sources ( Simple )
      • URL Querystring Data Source
      • URL Part Data Source
      • User Info Data Source
      • Cookies & Web Storage Data Sources πŸ“
      • Global Data Source πŸ§ͺ
    • Data Sources ( Complex )
      • RichText Data Source πŸ§ͺ
      • Defining Custom Data Sources
      • Collection List Data Source πŸ“
        • Developing Concepts | Collection List Data Sources
    • Data Binding
      • Conditional Visibility
      • Form Elements πŸ“
      • Templates & Macro Expansion πŸ“
      • Developing Concepts on Data-Binding πŸ“
      • Macro Expansion
        • Macro Expansion
        • Count Items
      • Preloaders
    • SA5 Data ( HSON ) ❺πŸ§ͺ
      • SA5 Data BETA Kit
      • JSON Data Variants
    • Advanced Use
    • SA5 Data JS API
    • Future πŸ“
      • External Data
      • One-Way v. 2-way Bindings
      • Reactive Bindings
      • Data Sources ( External ) πŸ§ͺ
        • Google Sheets Data Source β›”
        • GitHub Data Data Source β›”
  • πŸ“˜sa5-forms
    • πŸ”About SA5's Forms Lib
      • SA5 Forms Roadmap
    • πŸš€Quick Start | SA5 Forms
      • SA5 Forms Future
    • Data-binding Form INPUTs & SELECTs ❺
    • Smart Form Webhook Handler ❺
      • Form Webhook Handler JS API Events
      • n8n Handler
      • ▢️Basin Handler
        • File Uploads
        • Future
      • ▢️Make ( Integromat ) Handler
      • Future
    • Form Data Validation
      • Invalid Field Indicators (Real-Time) πŸ§ͺ
      • Invalid Field Indicators on Submit Attempt πŸ§ͺ
      • Email validation
    • Remove Unchecked Checkboxes ✨
    • Preserve Line Breaks
    • Form IP Info ❺
    • File Uploads πŸ“
    • Custom Form Submit Button
    • File Downloads
    • Form Select Element
    • SA5 Forms API
    • Dynamic Forms
    • Form Success Redirect πŸ§ͺ
    • Show / Hide Password πŸ§ͺ
  • πŸ“˜sa5-html
    • πŸ”About SA5's HTML Lib
      • Webflow Interactions
    • πŸš€Quick Start | SA5 HTML
    • Advanced Element Sorting ❺
    • Advanced Element Filtering ❺
      • Useful Filtering Examples
    • Dynamic URLs πŸ§ͺ
      • Future
    • Dynamic Attributes
      • Future
        • Smart Attributes πŸ§ͺ
        • Prefix, Postfix, and Formatted Attributes πŸ§ͺ
    • Scroll to Section
    • Breakpoints ❺
    • Limit Items by Breakpoint ❺
      • Designer CSS Embed
    • Limit Items to Multiple-of ❺
    • Numeric Sequencing ❺
    • Truncate Text w/ Ellipsis ❺
    • Encoded Email
    • Hide Section w/ Empty Collection Lists ❺
    • Download File ❺
    • Decode HTML ❺
    • Markdown ❺
      • Themes
    • Transform ❺πŸ§ͺ
    • Code Formatting ❺πŸ§ͺ
    • CMS Code Injection ❺πŸ§ͺ
    • Responsive Tables ❺πŸ§ͺ
    • Text Formatting ❺πŸ§ͺ
    • Components ❺πŸ§ͺ
      • Component Object Positioning
    • Auto-Size IFRAMEs πŸ§ͺ
    • Switch Case ❺πŸ§ͺ
    • Lazy Load
    • Gallery πŸ§ͺ
    • Scroll Anchor
  • πŸ“˜sa5-layout
    • πŸ”About SA5's Layout Lib
      • Future
    • πŸš€Quick Start | SA5 Layout Lib
    • Layout ❺
      • Tabs Layout Handler
      • Slider Layout Handler πŸ§ͺ
      • Future
    • Element Groups ❺πŸ§ͺ
    • Equal Height Rows ❺πŸ§ͺ
  • πŸ“˜sa5-logic πŸ§ͺ
    • πŸ”About SA5's Logic Lib
      • Future
    • πŸš€Quick Start | SA5 Logic Lib
    • If ❺πŸ§ͺ
    • Switch ❺πŸ§ͺ
  • πŸ“˜sa5-booking
    • πŸ”About SA5's Booking Lib
    • πŸš€Quick Start | SA5 Booking Lib
    • GetTimely ❺πŸ§ͺ
    • SimplyBook ❺πŸ§ͺ
  • πŸ“˜sa5-richtext
    • πŸ”About SA5's Rich Text Lib
      • Future
    • πŸš€Quick Start | SA5 Rich Text
    • Nested Lists ❺
      • Legacy Feature Notes
    • GitHub Gists ❺
      • ▢️Video Tutorials
      • Why Gist?
      • Technical Notes
      • Future
    • Code Blocks πŸ§ͺ
      • Wrapping Code Blocks
      • Copy Code to Clipboard
    • Excalidraw ( SVG Embeds )
    • URL Expanders πŸ§ͺ
    • Annotations πŸ§ͺ
    • Text SPAN Formatting πŸ§ͺ
    • Lightboxes πŸ§ͺ
      • Future
    • Embeddables
    • Richtext ❺πŸ§ͺ
      • CSS Isolation
    • Blockquotes
    • Call-Outs
    • Responsive Inline Images
  • πŸ“˜sa5-table
    • HTML Tables
  • πŸ“˜sa5-kiosk πŸ§ͺ
    • πŸ”About SA5's Kiosk Lib
    • πŸš€Quick Start | SA5 Kiosk
    • Usage Notes
    • Kiosk Hardware & Browser Setup
    • Kiosk Base πŸ§ͺ
    • Inactivity Timer
    • Display Mode
    • Technical Notes
    • Future
      • Smart Watch Notes
    • ToDo
  • πŸ“˜sa5-hotkeys
    • πŸ”About SA5's Hotkeys Lib
    • πŸš€Quick Start | SA5 Hotkeys
    • Hotkeys ❺
      • Future
  • πŸ“˜sa5-commerce
    • Payment Providers
    • Price in Local Currency πŸ§ͺ
  • πŸ“˜sa5-demo
    • Webflow Preview Link
  • πŸ“˜sa5-ui
    • πŸ”About SA5's UI Lib
    • πŸš€Quick Start | SA5 UI
    • 5-Star Ratings Component ❺
  • πŸ“˜sa5-cro
    • πŸ”About SA5's CRO Lib
    • πŸš€Quick Start | SA5 CRO
    • Conversion Tracking Event
  • πŸ“˜sa5-url
    • πŸ”About SA5's Url Lib
    • πŸš€Quick Start | SA5 Url
    • Query Param Passthrough
      • Future
    • External Link Targeting
    • Relative Link Fixups β›”
  • πŸ“˜sa5-video
    • πŸ”About SA5's Webflow Video Lib
    • πŸš€Quick Start | SA5 Video
    • Background Video Poster
    • Triggers, Events & Actions
    • YouTube Hide Related Videos [BETA]
      • Styling Options
      • Future
    • Media Pop-Ups πŸ§ͺ
    • Video Player ( Direct )
    • Video Controller File Format
    • Media Controller
    • Video Player Controller
      • Video Playback Spec πŸ§ͺ
      • YouTube Video Data πŸ§ͺ
      • Loom Video Data πŸ§ͺ
  • πŸ“˜sa5-elements
    • πŸ”About SA5's Elements Lib
      • Elements Lib Future Plans
    • πŸš€Quick Start | SA5 Elements
    • Element Actions πŸ§ͺ
    • Tabs Element
      • Tabs Future Plans
      • Triggers, Events & Actions πŸ§ͺ
      • Tabs API
    • Slider Element
      • Triggers, Events & Actions πŸ§ͺ
      • Slider JS API
      • Slider JS API Events
      • Advanced Slider Use
      • Future
    • Deck Controller Element β›”
    • Button Element
      • Triggers, Events & Actions πŸ§ͺ
    • Dropdown Element
      • Triggers, Events & Actions πŸ§ͺ
      • Future
    • Lightbox Element
      • CMS Lightbox + Groups
      • CMS Lightbox + Captions
        • Popular Lightbox Setups
      • Lightbox JS API
      • Triggers, Events & Actions πŸ§ͺ
      • SA5 Lightbox Future
    • Radio Button Element πŸ§ͺ
      • Triggers, Events & Actions πŸ§ͺ
    • Autocomplete Element
      • Styling
      • Future
    • Accordion Element
      • Accordion Future Plans
      • Triggers, Events & Actions πŸ§ͺ
      • Accordion API
    • Lottie Element ❺πŸ§ͺ
      • Triggers, Events & Actions πŸ§ͺ
    • Locale Switcher Element ❺πŸ§ͺ
      • Technical Notes
      • JavaScript API
  • πŸ“˜sa5-format
    • πŸ”About SA5's Format Lib
    • πŸš€Quick Start | SA5 Format
    • Format Numbers & Currencies ❺
    • Format Dates ❺
      • Use Cases
        • Custom Format a Date
        • Localize a Date
        • From and To Relative Timespans
        • Age
      • Future - Date formatting
      • Setup Your Date Field for Good Parsing
  • πŸ“˜sa5-user-accounts
    • πŸ”About SA5's Webflow User Accounts Lib
    • πŸš€Quick Start | SA5 User Accounts
    • Logged-In User Info ❺
      • Custom User Fields
      • Webflow's UserID
      • Access Groups
        • Using Access Groups for Conditional Visibility
        • Using Access Groups for Routing ❺πŸ§ͺ
      • The User object
        • The User Object Lifecycle
      • Tips & Best Practices
      • User Info FAQs
      • Troubleshooting
      • ⏩Future Plans & Ideas
      • BETA testing
      • Technical Notes - Interfaces
      • Future Development
    • Advanced Log-In & Sign-Up Flow ❺
    • Conditional Element Display ❺
    • Expand Login Button ❺
  • πŸ“˜sa5-track
    • πŸ”About SA5's Tracking Lib
    • πŸš€Quick Start | SA5 Tracking
    • Webflow Cookies & Storage Tracking ❺
      • Conditional Element Visibility
      • Tracking Page Visits
      • Tracking Button Clicks
      • Track Query String Params
      • Track Checkbox State
      • Cloneable Demo
    • SA5 Referer Tracking ❺πŸ§ͺ
    • Future Plans
      • Likes & Favorites Tracking ❺πŸ§ͺ
      • Recently Viewed Tracking ❺πŸ§ͺ
  • πŸ“˜sa5-modals
    • πŸ”About SA5's Webflow Modals & Popups Lib
    • πŸš€Quick Start | SA5 Modals & Popups
    • Webflow Popups & Modals
      • Triggers
      • Gating Modals
      • Modal Design & Styling Notes
      • Simple Modals v. Custom Modals
      • Modal JS API
      • Page-Specific Modal Control
      • Common Configurations
      • Pro-Tips
      • SA5 Modals Roadmap & Future
        • Future Attributes
        • Future Triggers
    • Dismissible Elements
    • Triggers, Events & Actions πŸ§ͺ
    • Webflow Modals & Popups Auto-Open and Auto-Close
    • Side Panels πŸ§ͺ
  • πŸ“˜sa5-selectcustom
    • πŸ”About SA5's Custom Form Select Lib
    • πŸš€Quick Start | SA5 Custom Form Select
    • Triggers, Events & Actions πŸ§ͺ
    • Custom Form Select ❺πŸ§ͺ
  • πŸ“˜sa5-gallery
    • πŸ”About SA5's Gallery Lib
    • πŸš€Quick Start | SA5 Gallery
    • Gallery ❺πŸ§ͺ
      • Simple Collage Layout Engine
  • πŸ“˜sa5-effects
    • πŸ”About SA5's Effects Lib
    • πŸš€Quick Start | SA5 Effects
    • Depthmap (Fake 3D) Image ❺πŸ§ͺ
    • Image Zoom
  • πŸ“˜sa5-fixup
    • Viewport META
    • Webflow Fixups ❺
  • πŸ“˜sa5-countup
    • CountUp Animated Numbers
  • πŸ“˜sa5-seo
    • πŸ”About SA5's SEO Lib
    • πŸš€Quick Start | SA5 SEO
    • Noindex ❺πŸ§ͺ
    • Nofollow ❺πŸ§ͺ
    • JSON-LD ❺πŸ§ͺ
      • JSON-LD Article ❺πŸ§ͺ
      • JSON-LD Video ❺πŸ§ͺ
      • JSON-LD Course Info ❺πŸ§ͺ
      • JSON-LD WebPage
      • JSON-LD Sitelinks Searchbox ❺πŸ§ͺ
  • πŸ“˜sa5-core
    • SA5 Core ❺
    • Webflow Designer Support ❺
  • πŸ“˜sa5-embeds
    • πŸ”About SA5's Embeds Lib
    • πŸš€Quick Start | SA5 Embeds
    • Table Embeds ❺
      • Google Doc Table Embeds
        • Styling Table Embeds
      • Google Sheets Table Embeds
      • Future
  • πŸ“˜sa5-state
    • πŸ”About SA5's State Lib
    • πŸš€Quick Start | SA5 State
    • State ❺πŸ§ͺ
      • State Handlers
        • SA5 State Handler
        • MobX
        • Redux
  • πŸ“˜sa5-localization
    • πŸ”About SA5's Localization Lib
    • πŸš€Quick Start | SA5 Localization
    • Localization Functions
    • Locale URLs
    • Sort locales in the order you choose
  • πŸ“˜sa5-404
    • πŸ”About SA5's 404 Lib
    • πŸš€Quick Start | SA5 404
    • 404 Smart Search ❺
  • πŸ“˜sa5-calc
    • πŸ”About SA5's Calc Lib
      • Future
    • πŸš€Quick Start | SA5 Calc
    • Count & Sum Items ❺
      • Source Types
      • Calc Use Cases
  • πŸ“˜sa5-trigger β›”
    • πŸ”About SA5's Trigger Lib
    • πŸš€Quick Start | SA5 Trigger
    • IX Triggers ( Legacy ) ❺
  • πŸ“˜Deprecated Features
    • Repeater β›”
    • Lipsum Generator β›”
    • JSON Formatter β›”
Powered by GitBook
On this page
  • HSON ( HTML Structured Object Notation )
  • Plain-Text Data Format Notes
  • JSON Variants

Was this helpful?

  1. sa5-data
  2. SA5 Data ( HSON ) ❺πŸ§ͺ

JSON Data Variants

A review of JSON data variants and how they relate to SA5

JSON is great, but it has a few key limitations;

Pros;

  • Plain-text, easy to type

  • 100% JS-compatible. This is what JSON is for, "JavaScript Object Notation."

Cons;

  • Its syntax is strict, and easy for a non-dev to mess up

  • It is not very strongly typed

  • It's not directly compatible with Webflow's custom code features, which always HTML encode embedded CMS vars.

SA5 Data & the Introduction of HSON

HSON ( HTML Structured Object Notation )

HSON is a format designed by Sygnal, specifically to close a few key gaps in

It borrows design concepts from JSON and YAML, but has key distinctions;

  • Possesses a simpler syntax for structure and key-value notation, akin to YAML

  • The values in HSON are always HTML-encoded, in line with Webflow's field-embed design

  • It adds some strong-typing capabilities to allow for more intelligent structure creation

Add dates. Support intrinsic Webflow date format if possible.

SA5 Data, aka. HSON was designed by Sygnal specifically for Webflow.

Alt names considered: Sygnal Structured Object Notation (SSON), Webflow Structured Object Notation (WFSON), HTML Structured Object Notation (HTMLSON), SA5 Structured Object Notation (SA5SON).

Plain-Text Data Format Notes

JSON Variants

  1. JSONP (JSON with Padding): Primarily used to overcome the cross-domain policies in web browsers, JSONP includes a JSON payload wrapped in a function call. It's used in JSON data requests from a different domain than the one the script originated from.

  2. NDJSON (Newline Delimited JSON): A stream-friendly format where each line is a valid JSON object. Useful for processing large JSON files or streams of data without needing to parse the entire dataset at once.

  3. JSON-LD (JSON for Linked Data): A method of encoding Linked Data using JSON. It is used to serialize Linked Data and connect it to web-based, structured data.

  4. GeoJSON: A format for encoding a variety of geographic data structures using JSON. It's used for representing simple geographical features, along with their non-spatial attributes.

  5. JSON5: An extension to JSON that aims to make JSON code easier for humans to write and read, incorporating features from ECMAScript 5.

  6. JSONC: A compressed form of JSON that aims to reduce the size of the JSON data.

  7. BSON (Binary JSON): A binary-encoded serialization of JSON-like documents. Used mainly in MongoDB, it is designed to be efficient in space, but not necessarily in speed.

  8. MsgPack (MessagePack): It's a binary format that is more efficient than JSON but has JSON-like types. Used for communication between different languages like JSON but in a more compact way.

Also look into;

  1. CJSON (Canonical JSON): A subset of JSON that is intended to provide canonical encoding of data structures, meaning that data structures encoded in CJSON can be uniquely reconstructed from the byte stream.

  2. JSONT (JSON Template): A template engine that uses JSON as its language.

  3. FSON (Function JSON): An extension of JSON to support encoding of functions.

  4. JPath: A query language for JSON, similar in concept to XPath for XML.

Other popular plaintext formats

  1. XML (eXtensible Markup Language): A widely used format that is more verbose than JSON. It's suitable for complex data structures and supports namespaces, attributes, and comments. It's commonly used in web services (like SOAP), configuration files, and document formats (like Office Open XML).

  2. YAML (YAML Ain't Markup Language): Known for its readability, YAML is often used in configuration files and data serialization. It supports complex data structures, including lists and associative arrays. It's widely used in applications like Docker, Kubernetes, and Ansible.

  3. TOML (Tom's Obvious, Minimal Language): Designed to be easy to read and write due to its clear semantics. TOML is used in configuration files and is the default configuration format for Rust's package manager, Cargo.

  4. CSV (Comma-Separated Values): A simple format used to store tabular data. Each line is a data record, and each record consists of fields separated by commas. It's widely supported by spreadsheet programs and databases.

  5. INI: A simple format used for configuration files. It's organized into sections, and each section contains keys with values. The format is straightforward and is used in many applications for storing settings.

  6. Protocol Buffers (Protobuf): Developed by Google, this is a binary serialization format that is more efficient and faster than JSON. It's used for storing and exchanging structured data between services.

  7. Cap’n Proto: Similar to Protobuf, but faster as it doesn't require a separate unpacking step. It's designed for high-performance scenarios.

  8. MsgPack (MessagePack): A binary format that is more efficient than JSON but has JSON-like types. It's used for communication between different languages like JSON but in a more compact way.

  9. EDN (Extensible Data Notation): A subset of Clojure's syntax designed for extensible data notation. It's similar to JSON but supports more types and is extensible.

  10. S-expressions: Used primarily in Lisp programming environments, S-expressions are a notation for nested lists of data. They can be used for data serialization in a manner similar to JSON or XML.

Binary Variants

Last updated 1 year ago

Was this helpful?

πŸ“˜