How to Defeat Webflow 10k Code Char Limit w/ DOMParser

In this video I'll show you how to get around the Webflow custom code limit for SVGs by using a CMS rich text field along with the DOMParser API. Before I used to do this by hosting SVGs as HTML documents in Github but with this we can avoid an extra fetch request and keep everything in one place - more organized!
🌶 Website: www.webbae.net/code-boosts/ho...
// 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...
🧱 Build faster with my component library: webbae.net/components
// Premium content
🤝 Patreon: / webbae
🕸️ Advanced Webflow Course (201): www.webbae.net/product/webflo...
// GSAP Discounts
🎢 Get 10% GSAP: WEBBAE10
♣️ Creative Coding Club (My favorite GSAP lessons): www.creativecodingclub.com/bu...
// Connect
🙋‍♀️ Join the Discord: / discord
🐥 Follow Me! / webisbae
// TOPICS COVERED
00:00 Intro
00:28 Demo and SVG
01:45 Webflow
05:50 Code using DOMParser
09:41 Changing SVG Path Color

[@Gladwebs]

This is amazing. Thank you so much for sharing 😀

[@niLmagikero]

This is gold! Thanks man!

[@lawfreed]

another superb video!

[@mattevans4905]

Rocking!! So good. Love your explainer style too Web Bae. Oh and thank you!

[@webbae]

Thanks Matt!

[@jasinAmsterdam1976]

Brilliant bruv 😄

[@webbae]

Being called bruv makes me feel great. I love the show Top Boy so feels like I'm out here making my p's 🤣

[@user-zl1bv8hl7d]

Pure gold!

[@webbae]

thanks!

[@webbae]

🥰 The delay/flash in SVG load will go way down when you move the code from Code Sandbox into your tag :).

[@heatherliu6856]

Should be included in Netflix Infinity documentary. DOMparser defeats infinity

[@webbae]

100% agree

[@elchinhuseynli8876]

Hey @Web Bae 👋 Great solution you got there! I've got a challenge for you regarding another Webflow limitation. Let's say we've got a static page with CMS cards containing nested multi-image fields as lightboxes, like a real estate listings page. When you click on a featured image, you should only see photos from that specific listing. But in Webflow, grouping lightbox images by a name applies to all listings on the static page, so you end up seeing photos from other listings too. 😕 Any ideas on how to overcome this? Should I resort to an external jQuery library? Thanks a bunch! 🙏

[@webbae]

Not sure on this one but thanks for the suggestion I'll look in to it if I get time!