ฝัง
- เผยแพร่เมื่อ 7 ส.ค. 2024
- Here's a quick example of the techniques I used to build my component library.
// CLONE IT
👉 try.webflow.com/cloneable-is-...
// FREE resources
✂️ Code Snippet Library: code-snippets-sign-up.webflow...
🤝 CSS Nobody Told You About: www.webbae.net/css-nobody-tol...
🚗 Roadmap to learn Webflow: www.webbae.net/roadmap-to-lea...
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
00:00 Intro, Demo, Theory
01:48 Webflow Project Overview
03:45 Writing the code to copy JSON
07:52 Adding Components via CMS
09:45 Wrap Up and Shilling My New Patreon - แนวปฏิบัติและการใช้ชีวิต
![[ไฮไลต์] รอบชิงชนะเลิศ "เทนนิส พาณิภัค" ไทย vs จีน Guo Qing เทควันโดหญิง 49kg | โอลิมปิก 2024](http://i.ytimg.com/vi/xgvTIdE8j3U/mqdefault.jpg)
Never knew there was so much behind copying and pasting! Easy and clear explanation, JSON king 👑
Fantastic. Thanks for sharing, Keegan.
This is great! Thanks so much for sharing. I definitely love the component libraries out there but being able to make your own can be empowering with your own styles
I think it’s a natural step for anyone building a lot in Webflow. Once you have built the same component 20 times it makes sense to have your own repository (and share with other if you want!)
This is cool - Thanks !
YASSS WEB BAE
Why you are so genius? hehe thanks again!
Amazing walkthrough!
Thanks @Bullz - are you making your own component lib?
@@webbae We are thinking of making one at the agency im currently working for. Your video has helped us to realise that is is more than possible. Initially thought it would be a mammoth of a task.
@@bullz3718 glad it helped - I have a more in depth look at how I run my production component library with GitHub in my Patreon as well 🌶️
Very cool! One question though, is it possible to copy that component and also get the linked variables? Imagine that this specific component has some variables in it. Is there a way to copy and paste while keeping the variables at the same time?
Hey J - unfortunately the copy paste api doesn’t seem to carry over variables (or components)
Fantastic video. How to hide a JSON in html. I ve seen your library . There, I couldn't find json code in Html) How to do such thing with webflow CMS? is that possible?
You could just hide it with display none if you’re pulling from the CMS or you could create an API to fetch it dynamically.
By the way, this is so awesome. I learned something about how copy/pasting webflow works. Thanks!
Do you think there's a way to do this in airtable? Like have a way to store it there and copy it to your clipboard? I ask because it would be easier for me to store, plus I'm already paying for it and I wouldn't have to pay webflow if I get past 50 cms items
You can definitely do that. My Patreon has a complete walkthrough of how I built out my library, which pulls items from Github. You could easily use Javascript's fetch API to get the data from Airtable instead. Their API is documented really well too. www.patreon.com/posts/component-deep-74094764?Link&
Hey man, awesome work! I have just recently started building my component library with a similar approach. But I was wondering did you find a way to manage class renaming if that is a thing you are even facing? Since I have a style guide the classes that get pasted are renamed even do they have the exact same styling, so I'm trying to find a way around that. Thanks 🙏
I don't have a great solution for that ... yet. From what I'm hearing in the community this is a major pain point for the community. I think Relume is releasing something that will fix it and I've heard rumors that others are working on it too... But sorry I don't have anything at the moment.
@@webbae No worries man, I too am struggling with that one ever since I started building my library. I have also seen that Relume has launched its extension in beta, it looks good but still can't test it.
@@webbae Hey I was wondering if you managed to come up with a solution for this (class duplication/renaming) now? I'm very eager to learn how to build a simple component library myself (been using Relume for a few months now), would definitely become a Patron to access the content if it's perhaps hidden somewhere for public now. Many thanks in advance. I'm really enjoying your content 🙂
so you basically showed us how relume guys build their library :)
This will get you started but if you want to make something that's more maintainable, shows live previews, and is a full-fledged SaaS business you'll find there's a lot more to it :).
For some reason it wont let me connect the text block to the custom field (JSON) - any idea why that might be?
Not sure. Feel free to hop in discord and share a preview linkz
@@webbae I was able to figure it out! thank you!!
Hey, I used that clipboard inspector to get the json data. To test it I copied that json and try to paste it to webflow again. It didn't work. It said "couldn't read clipboard data". Am I missing a step?
Edit: I'm guessing I need to convert it to the right data type, application/json.
When you copy from that clipboard inspector it copies as plain text. Webflow expects application/json which is why you are getting that error. To fix either copy Webflow to Webflow or hack a script from my code and run it in console on the clipboard viewer website.
How do you export the component to html with all the styles?
I just copy/paste the html from inspector in chrome.
how can we make this make this work if we have multiple copy-buttons for multiple components in a single page ?
yes - try using a loop or a global event listener.
how do i host the sandbox project and get the link to the right file
They are automatically hosted for static sandboxes just grab the link form the preview box and add your filename to the end e.g. index.js.
I go over it in this video: th-cam.com/video/gq0jw3_d5Ig/w-d-xo.html
thx@@webbae
Is it possible to make something similar where the interactions copies over as well?
The interactions will copy over with this example too. Be sure to set the trigger to “class” and you should be good to go.
If you inspect the json there is an “ix” field or something that has the name of the interaction.
@@webbae Perfect, thanks! And also thanks for the webflow content, it is really helpfull! :)