How to convert html sections to @webflow/XscpData type json format?

Community resources General
1

I’m new to Webflow development.

I’m trying to create a copy pastable component in Webflow.

I figured that the content should be in the below JSON format to be copy pastable into the Webflow Editor.

	let copyJSON = `{"type":"@webflow/XscpData","payload":{"nodes":[{"_id":"c5189161-bbea-6043-8252-2345d0b3022f","tag":"img","classes":["db912598-80db-237e-1156-3d29aaf71b2e"],"children":[],"type":"Image","data":{"attr":{"src":"https://uploads-ssl.webflow.com/5db1c76aadcfe25e881680fa/5db86dc421496616bf357c25_placeholder.svg"},"xattr":[{"name":"item","value":"featured-image"}]}}],"styles":[{"_id":"db912598-80db-237e-1156-3d29aaf71b2e","fake":false,"type":"class","name":"Cards Image","namespace":"","comb":"","styleLess":"position: static; left: 0%; top: 0%; right: 0%; bottom: 0%; display: block; width: 100%; height: 300px; max-width: none; object-fit: cover; object-position: 50% 50%;","variants":{},"children":[],"selector":null}],"assets":[],"ix1":[],"ix2":{"interactions":[],"events":[],"actionLists":[]}},"meta":{"unlinkedSymbolCount":0,"droppedLinks":0,"dynBindRemovedCount":0,"dynListBindRemovedCount":0,"paginationRemovedCount":0}}`

Is there any library to do the conversion from HTML to this JSON format?

1 Like
2

Were you able to find out how to do it? )

3

I don’t know if you can get the JSON format directly through the HTML, but you can get it from the Webflow Designer:
Build the component in the designer and copy it, you will get the JSON in your clipboard, and then to get it in plain text you have to paste it in this Clipboard Inspector in the field that says paste in here

I’m currently trying to figure out how to do the opposite, how to convert the JSON to HTML, if anyone has any clue please hit me up.

4

Covert the JSON to HTML for display purposes?
IIRC if you’re wanting Webflow to create elements, you need to provide the JSON.

This is a good thread on the topic as well.

5

I was looking for something similar.

There’s this guide

But as it says, it’s not particularly fun or straightforward, and it’s fairly limited in what can be imported.

I’d be really curious if there was an online or CLI tool for creating Webflow JSON components from raw HTML. Including CSS elements and JS would be even better!