v1.0.0—webflow json copy/paste utility with dynamic attribution

Processes JSON from an element copied in Webflow Designer, adds required specs for compatibility with copy to clipboard functionality that works pasting back into WF Designer (use case e.g. building public component libraries where users can copy pre-built WF components into their own site).

features:

• listens for clicks on element/s with the data-json-copy attribute
• copies JSON data from the target element (data-json-target attribute) to clipboard
• modifies JSON to meet Webflow specs for pasting, should alert if error encountered

use:

• add data-json-copy attr. to your button element (or any clickable element) with a descriptive value (e.g. hero-section)
• add data-json-target to the Textarea with the JSON string inside (can be retrieved by pasting here) with the same value as the trigger data-json-copy

example:

<button data-json-copy="snippet1">Copy JSON</button>
<textarea data-json-target="snippet1">{"key":"value"}</textarea>