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
  • How Do I Use It?
  • Features
  • Typed Values
  • Null Values
  • Nested Objects
  • Multiline Content
  • Technical Guide
  • Basic Rules
  • Technical Notes
  • Future
  • Comments
  • Arrays

Was this helpful?

  1. sa5-data

SA5 Data ( HSON ) ❺πŸ§ͺ

Add data to your custom code

We refer to 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.

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.

How Do I Use It?

SA5 Data uses a specially-typed <script> code block to easily capture and describe your CMS and static data. The syntax is designed specifically to support Webflow's HTML-encoded field embeds as the source for your raw data.

SA5 Data blocks are placed in 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 SA5 Data looks like.

We are likely to migrate the type to sygnal/hson for generic data descriptions.

<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"
}

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;

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> element, you can see two custom attributes, wfu-data-dsn and wfu-data-item-id. These identify the collection and the item uniquely, so that you could later retrieve it easily.

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

Features

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.

Typed Values

By default, values are interpreted as string values, and JavaScript objects are created accordingly. However you can identify any field as a numeric or boolean type when appropriate.

This is done by adding a symbol immediately after the : delimiter;

  • : or :$ indicate a string value

  • :# indicates a numeric value

  • :? indicates a boolean value

Here's an example structure;

<script type="sygnal/sa5-data">
name:$ John Doe
age:# 23
isActive:? true
description: <John is a software engineer
from Springfield. He loves coding and
is passionate about technology.>
</script>

Null Values

Blank values are expressed as nulls in your object, regardless of the type.

Here, age and isActive are nulls;

<script type="sygnal/sa5-data">
name:$ John Doe
age:# 
isActive:? 
description: <John is a software engineer
from Springfield. He loves coding and
is passionate about technology.>
</script>

Nested Objects

SA5 Data also supports nested objects.

To indicate a nested object,

  1. Place your field key on a line by itself, with a double-colon :: suffix

  2. Indent the fields within your nested object beneath it

Here address and postalCode are both nested objects.

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

Generates the following JSON object;

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

Multiline Content

There is an edge case problem here, which is that in Webflow a CMS text field can be set to multiline, and can contain line breaks. To resolve this unambiguously, wrap Webflow's embedded variable in angle brackets < >

Objects can be nested by specifying the object key on one line, and indenting the nested object beneath it;

<script type="sygnal/sa5-data">
name: The Catcher in the Rye
author: J.D. Salinger
description: <In "The Catcher in the Rye," the protagonist, Holden Caulfield, 
recounts his experiences in New York City after being expelled 
from an elite prep school.> 
</script>

Which is parsed as;

{
  "name": "The Catcher in the Rye",
  "author": "J.D. Salinger",
  "description": "In \"The Catcher in the Rye,\" the protagonist, Holden Caulfield,\nrecounts his experiences in New York City after being expelled\nfrom an elite prep school."
}

The use of angle brackets was chosen because Webflow HTML encodes all values it embeds, which means that angle brackets cannot exist in the embedded content itself.

Also use angle brackets if whitespace characters at the start or end of your field content are an essential part of your data.

Technical Guide

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 &lt;

    • > must be encoded as &gt;

    • & must be encoded as &amp;

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

    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 \n

Future

Support for process-assembled objects. In rare cases, some pieces of the object may be outside of the sa5-data block, particularly items that cannot be Field-embedded such as rich text content.

In this case, we might support a special attribute on those elements such as [wfu-data-item] along with field, db, dsn identifiers, and specify the field for an object-merge. e.g. article.text would indicate the nested article object, with a text field. Objects would be created as needed. I am probably in favor of an object-merge approach.

As multiline string delimiters, < > are concise and unambiguous, however we are also considering the use of """, ``` or \\\ delimiters to make them more visible.

We expect that the need for multiline strings support is relatively low.

Comments

Some means to indicate comments, preferably;

  • Full line comments

  • End of line comments

Arrays

Some means to indicate arrays.

  • Blank lines?

  • [] and indent prefix?

  • Separate items with a shared context on a param? -> I like this

Last updated 6 months ago

Was this helpful?

And that resulting data can be used in , or in your custom JavaScript code.

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

πŸ“˜
SA5 Data-Binding
data-binding
HTML Embed example setup