![Raylo Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384961d4f194295c8d8797_02d03e31-2b08-4ca5-a29e-addc73813995-1620853142674.webp)
![Guitar Tricks Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384a95e03b9dafbf4939ed_GuitarTricksLogo.webp)
![Raylo Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384961d4f194295c8d8797_02d03e31-2b08-4ca5-a29e-addc73813995-1620853142674.webp)
![Guitar Tricks Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/64384a95e03b9dafbf4939ed_GuitarTricksLogo.webp)
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/66841dbe80b4b6e0049149ad_Relume%20Style%20Library.webp)
![Mozilla Logo](https://cdn.prod.website-files.com/56b9f7a823ac054969b80350/664b66d96a4be9ef3e6512a2_Mozilla_logo.svg.png)
Create Your Own Relume Style Library
Many Webflow users have posted tutorials on how to create your own copy/paste library similar to Relume.io, but one issue that keeps showing up is Webflow's 5,000 character limit on embeddable code, but we can avoid the limit by using custom attributes!
CMS STRUCTURE
Before we get down to the steps you'll need a CMS Collection, with a "text field", call it something like "JSON Data". After you've added that, let's move on.
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/6682d5fd480877ff19fb6bb4_JSON%20Data%20Example.gif)
STEP. 1
Add the following script to your Webflow pages closing </body> tag. I won't bore you with how this works, just know that it does!
1 <script>
2 document.querySelectorAll('.object-clone-btn').forEach(item => {
3 item.addEventListener('click', event => {
4 event.preventDefault();
5 let data = item.dataset.json; // Get JSON from button's data-json attribute
6
7 console.log("Button clicked");
8 document.addEventListener('copy', event => {
9 console.log("Object copied");
10 if (event.clipboardData) {
11 event.clipboardData.setData('application/json', data);
12 } else if (window.clipboardData) {
13 window.clipboardData.setData('application/json', data);
14 }
15 event.preventDefault();
16 }, true);
17 document.execCommand('copy');
18 })
19 })
20 </script>
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/6682d3781e3fd08ea6664c09_Screenshot_2.webp)
STEP. 2
Next we need a button in our Component Collection Item, give it a class "object-clone-btn". It doesn't have to be the only class, as in my example below I simply added it as a combo-class.
object-clone-btn
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/6682d3e5bd3b8c1ffeefa867_Screenshot_3.webp)
STEP. 3
On the afore mentioned button we're going to add a custom attribute! This is where we bypass the 5000 Webflow character limit.
With your button selected, open the "Settings" panel on the right, scroll down to Custom Attributes and we're going to add one using the plus icon.
Name it "data-json"
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/668416a25fe3f1b5b57b5114_Screenshot_8.webp)
And the value we're going to attach is from the CMS Field we named JSON Data, pictured below.
![](https://cdn.prod.website-files.com/56dac33a7254048579e272af/668414cabf46df065204be82_Screenshot_7.webp)
STEP. 4
Publish it! You're done, go test it.
Up your Webflow game by adding custom CSS properties.