Streaming live at 10am (PST)

How does component webflow libraries like flowbase, library.relume.io, incorporate copy button to copy components and paste it to webflow canvas?

And other webflow components library have this feature to copy and paste components from a click of a button and paste it using ctrl + v over webflow canvas


2 Likes

I would love to know this aswell! I can find tutorials etc. to clipboard functions but I haven’t figured out how to attach a component to the button and keeping it in the webflow structure so it wil be pasted correctly.

Basically they use code to fetch and add a JSON string to your clipboard (That JSON string describes what your component should look like). Webflow then uses and “understands” that JSON when you paste it into the designer

Their front-end code that handles that specifically:


An example of JSON object: https://d67ceuxvao51w.cloudfront.net/cta-sections/section-cta10.json

Really nice trick indeed, it taught me new tricks for sure !

2 Likes

So you would only need some sort of conversion or export that makes it possible to store a webflow element as a JSON, right? I think I might ask a developer to do something similair for me, I don’t think my understanding of javascript will be enough haha.
Thanks Jean!

No worries @Studio_Lars ! And yep, that should be more than enough as long as you keep things in a way that Webflow can understand.

I just need to understand how the heck they got that JSON in the first place: Whenever I copy something from the Webflow designer, I can’t paste the clipboard anywhere else other than Webflow.

Later I’m going to go into Webflow’s code to see if I can spot how they did it.

2 Likes

Let us know if you find anything!

1 Like

Hey @Studio_Lars , it took me a good while to figure things out but I was finally able to get something up and running. I’m not sure if this is the approach that they use at Relume, but it should be close enough.

There are still some things that I want to better understand (dealing with the minified JS code from the Designer is a pain), but I was able to come up with a simple 3-liner that gets you the JSON structure of a Webflow element.

You first need to go to your webflow project, open the designer, and then you open the console (CTRL + SHIFT + J in windows) . From there, paste the following code (read the code and you will see it’s not a scam as they say in the console :joy:) and press enter:

window.addEventListener("copy", async (event) => {
  const elementJson = event.clipboardData.getData("application/json");
  event.clipboardData.setData("text/plain", elementJson);
  console.log("Copied component JSON to clipboard");
});

This code will basically copy the JSON text to your clipboard when you press CTRL+C when selecting a webflow element. You can then paste the contents of your clipboard in notepad for you to visualize it, or do something else with it, such as creating a JSON file and hosting it somewhere so you can build something similar to Relume.

Here are some parts of the Relume JS code that will help you get started on the other end of this task (Converting JSON back to a webflow component):

image

3 Likes

Haha that console text is pretty funny.
Good find! I’m going to take a look this weekend

1 Like

Hey @Jeandcc @Studio_Lars

I believe it would work:

document.addEventListener('copy', function(e){
  e.clipboardData.setData('application/json', wfComponent);
  e.preventDefault();
});
document.getElementById("copyBtn").onclick = function() {
  document.execCommand('copy');
};
var wfComponent;
fetch('https://example.com/component.json')
  .then(res => res.text())
  .then(data => wfComponent = data)
  .then(() => console.log(wfComponent))