Webflow Clipboard Format

This article is primarily of interest to Relume-style "component library" developers, who want to copy and paste elements from an external website into the Webflow designer.

Webflow has a special clipboard format used to capture and transport information about elements, classes styles that need to be copied from one page to another, or from one site to another.

The format is not publically documented however there are a number of good resources online for the technically-minded.

Resources

https://www.reddit.com/r/webflow/comments/129ij6e/how_does_webflow_copy_paste_work/

Luca Mlakar's Tutorial

Check out Luca Mlakar's tutorial here;

https://discourse.webflow.com/t/guide-to-add-copy-and-paste-functionality-to-your-webflow-like-flowbase-relume-and-mozaik-component-library/210170

BMG Posts

Some posts from BMG Studio;

https://www.bmg.studio/blog/how-to-create-your-own-relume-library-ripoff

https://www.bmg.studio/blog/the-clipboard-inspector-for-webflow-data

Notes Alex Iglesias Piñol ( Finsweet CTO )

You can get the JSON data using this:
‍https://gist.github.com/alexiglesias93/6a53936ed8820542f38781b7341d0e68

‍And you can paste the JSON data using this:
‍https://github.com/finsweet/ts-utils/blob/master/src/components/CopyJSONButton.ts

Other Useful Resources

Add Copy and Paste Functionality To Your Webflow Component Library

https://www.flowout.com/blog/create-your-own-component-sharing-app

https://www.youtube.com/watch?v=NrRU_4LU2IE&ab_channel=WebBae

https://evercoder.github.io/clipboard-inspector/

https://classimporter.webflow.io/#

Component Libraries

Relume - https://www.relume.io/components

Webbae - https://www.webbae.net/components

Flowbase - https://www.flowbase.co/

https://webflow.com/libraries/detail/flowui-component-library

Grid Up -

Untitled UI - https://www.untitledui.com/

Systemflow - https://www.systemflow.co/

Landingfolio - https://www.landingfolio.com/

https://www.landingfolio.com/library/all/webflow

Chrome Extensions

ViDesigns - https://chromewebstore.google.com/detail/videsigns-extension-for-w/epegfofibengnfhehlblkjpaplobhlmf?hl=en-US&utm_source=ext_sidebar

‍

‍