The key to creating a successful Webflow component-sharing web app is all about the user experience. So we will skip all the fancy intros and jump right into step 1. No worries it's super easy, just follow along and you will have copy-paste functionality in your component library in no time!
1. Extracting Webflow’s block JSON code
First, you have to extract Webflow’s block JSON code. Here is a step-by-step guide on how to do it:
1. First, open your Webflow project in the Designer and navigate to the page where the component you want to copy is located.
2. Now hit F12 / open Developer tools and navigate to the Console tab.
3. Copy and paste the Javascript snippet to the Console line and hit Enter. The snippet will save the desired Webflow block in a JSON file and download it to your computer.
4. Now we need to execute the inserted code. Close the Developer tools and select the desired block on your page. Copy it and paste it back onto the same page. This will launch the script and start the download of “Webflow-object.json”.
5. Repeat the previous step in the designer for all the blocks you want to save. Feel free to rename each file after download so you know which block it belongs to. You can continue copying/pasting blocks and downloading files until you refresh the tab in your browser.
6. When you are done, reload the browser tab with Designer to clear the script in Console.
2. Add Webflow’s block JSON code back into the project
1. Head to the project where you want to add the copy functionality. It can be the same or different project from the one you retrieved Webflow blocks from and go to the desired page.
2. Add an HTML embed element anywhere on the page. Paste the following code snippet inside:
3. Check the downloaded file (webflow-object.json). Open it with any text editor app or use https://jsoneditoronline.org/ to find out the number of characters in the file. Select everything in the opened file (or double-click on content) to get the information about the number of characters. If it is under 9,972 characters, it’s good to use in our snippet above.
4. Copy all selected JSON code and paste it into the mentioned snippet between = and; symbols. You should end up with similar code (but much longer, of course):
5. Save and close the HTML embed editor and head to the next step.
3. Add copy functionality for Webflow’s block
1. Remain on the same page as from STEP 2. Add and style your button that will be responsible for “Copy” functionality of the Webflow block. When you are done add one more class to the button: object-clone-btn.
2. We will add this snippet for copy functionality. You can add it into another HTML embed element that needs to be positioned as the last element on the page. It is important that the HTML embed element containing this script comes after the HTML element holding the Webflow block code. Another option is to paste this snippet into Page Settings “before </body> tag” window.
3. We are done! Test your newly added functionality.
Code limitations and solutions
Unfortunately, there are some limitations of this code you have to consider when creating your Webflow component-sharing app.
The code will work on Webflow blocks with less than 9,972 characters in the JSON file that our snippet generates. The thing is that Webflow’s limitation for code is only 10,000 characters and we need to reserve 28 characters for our code. Thus we can have a maximum of 9,972 characters in the JSON file.
However, we found a solution around the 10,000 character limitation!
One way to go beyond this limitation is to host JSON files on another domain or use another hosting service. You can then read them via URL into Webflow code.
Another way around it is to make/use an API service to serve JSON files into Webflow code.
Our last solution is to save JSON code as text into Webflow CMS. You can then serve it from there with some adaptations to the snippet responsible for extracting Webflow block JSON code.
The second thing worth mentioning is code adaptability. The code will copy one specific Webflow block per page with multiple “Copy” buttons on the page (using the same class). But if you want to have multiple blocks on the page, each with its own “Copy” button, code needs to be adapted.
Conclusion
Creating every single Webflow page from scratch takes ages. Scanning through the whole internet to find a component you need is not so much better. Not even get us started that those components are usually pretty generic and sub-optimal for your Webflow project.
Coming to the end of this article we hope those days are over! Now you can finally build your Webflow template library and:
- Save time.
- Improve your design level.
- Stay consistent through every project.
Just remember to follow the 3 easy steps, and you are golden!
- Extract Webflow’s block JSON code.
- Add Webflow’s block JSON code back into the project.
- Add Copy functionality for Webflow’s block.
