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


3 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.

1 Like

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 !

3 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

4 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))
2 Likes

Hi Jean, I was also trying to figure out how this copy paste feature is working. Any chance you make tutorials :grinning: I like the idea of Flowbase and Relume, but really just want to build my own personal version

1 Like

Iā€™m here for the same reason. Want to make personal library too.
For now Copyflow is the solution till someone from the community come up with a proper working solution!

Hey, @Jeandcc @Studio_Lars did any of you managed to figure out a complete solution? Iā€™m heaving a hard time figuring out this past part/converting json back to webflow

Hey @alxndr any chance you have this solution sorted for multiple instances? I got this to work but it can only have one object per page

Bro use clipboard inspector Clipboard Inspector
fantastic.

3 Likes

Hey bro @stefan-nube , I donā€™t have it right now.

When you copy components between Webflow projects you get the very annoying automatic renaming of classes with a class name conflict (e.g. ā€œcontainerā€ gets renamed to ā€œcontainer-2ā€).

How does these webflow libraries handle this?

Might be useful to some:

1 Like

They donā€™t. If a class already exists and the CSS styles are not exactly the same, Webflow will always auto rename the classes.

have you guys made any more progress on this? It would be so great to be able to create something that combines relume, flowbase, and our own code snippets ā€¦