Serialize JSON resource to multiple Components

[paulrudy]

@johnsicili's comment prompted this feature request.

I'd like to have Webstudio associate non-HTML, non-Markdown fields from JSON with various Webstudio components.

This function, perhaps a new type of Embed, would go beyond the current Content Embed and Markdown Embed, which only associate HTML/Markdown with Components.

For example, a CMS might return a JSON object for an entire page that combines multiple types of content:

• rich text/HTML (already covered by Content Embed)
• markdown (already covered by Markdown Embed)
• image links + alt text as JSON values, not HTML
• video links as JSON values, not HTML
• arrays of items with multiple values (.e.g. a multi-column block of content with an image and rich text for each column)
• text with a particular label (callout, quotation, etc) defined as a JSON field

Here's a view of Directus's website-cms template, as an example:

Webstudio could potentially add a component that allows the user to specify a Component to associate with each JSON item that isn't HTML/Markdown. Arrays within the JSON tree could be associated with their own Embed as needed.

This would allow more customizable control of the content of a page or post from within the UI of a given CMS, with the ability to freely add, subtract, and rearrange blocks of content of various types and see them rendered in Webstudio.

Apologies in advance If I've misunderstood anything! Please feel free to edit/remove this issue if appropriate.

[johnsicili]

I am trying to understand how this is different from the referenced issue, but I am not seeing it... correct me if I'm wrong.

Many of the things you mentioned are already possible.

To tackle the blocks in your Directus screenshot, create a Collection in Webstudio, create each block within the Collection (e.g., build an image link with alt text), and then conditionally show that "block" if the current iteration is the matching type from Directus. So you have 13 block types in Directus, and you'd build 13 boxes in Webstudio for each type and conditionally hide or show each one.

All of that is possible right now.

The referenced issue covers the scenario when rich text is served as JSON and each "block" isn't structured like the predictable blocks in your screenshot (i.e., every call to action will have a title, link, and button text, for example). Rather, each block has basically infinite variations (such as italics, bold, links, etc), and those are inline within a paragraph at unpredictable places, making building a Collection and conditionally showing and hiding things super messy or not possible due to the variations.

[paulrudy]

All of that is possible right now.

You're absolutely right. Thank you! Closing this issue, as I hadn't fully understood Webstudio's powerful functionality already.