https://github.com/webcrumbs-community/webcrumbs

Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. 🌟 Star to support our work!
https://github.com/webcrumbs-community/webcrumbs

admin-panel community hacktoberfest javascript microfrontend nodejs open-source react reactjs web-development

Last synced: 4 months ago
JSON representation

Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. 🌟 Star to support our work!

• Host: GitHub
• URL: https://github.com/webcrumbs-community/webcrumbs
• Owner: webcrumbs-community
• License: agpl-3.0
• Created: 2023-09-13T12:33:12.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2025-03-18T21:12:27.000Z (8 months ago)
• Last Synced: 2025-03-25T16:04:51.316Z (8 months ago)
• Topics: admin-panel, community, hacktoberfest, javascript, microfrontend, nodejs, open-source, react, reactjs, web-development
• Language: HTML
• Homepage: https://webcrumbs.org
• Size: 136 MB
• Stars: 1,682
• Watchers: 28
• Forks: 138
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• jimsghstars - webcrumbs-community/webcrumbs - Build, re(use) and share your own JavaScript plugins that effortlessly match your website's style. 🌟 Star to support our work! (HTML)

README

          


  Looking for Frontend AI? It's right here!


  🌟 We're live — star the repo and jump to the How it works section below to start using it!  





  

    

  

  



  

    

    

    

  

  



  

    

      

      

      

    

      

  

    

      

      

      

    

  

  



  








  

  

  





We're on a mission to make web development feel like assembling Lego blocks everywhere. Webcrumbs is building the first open plugin ecosystem compatible with any framework, site builder, or next-gen code tool — from React, Angular, Next.js, and Svelte to WordPress, Shopify, Framer, Lovable, V0.dev, Bolt.new, and more. Developers and non-developers alike can build and reuse components easily via our visual Frontend AI generator, embed them with our open source, and grow with a community-driven ecosystem.

See how easy it is to embed Webcrumbs Plugins — tutorials for each platform:



  
CodePen

  
Framer

  
Lovable

  
PHP

  
Shopify

  
Squarespace

  
v0.dev

  
Webflow

  
Wix

  
WordPress

  
Other (HTML embed)





  

    

    

    

  







  

  

  





We’re live and your support means the world! ⭐ Star us on GitHub to keep the momentum going.



  

    

    

    

  









  


Star the repo: It's the easiest way to support us. Just one click 🧡




  


Spread the word: Write about us on DEV.to, Linkedin, X, Medium, Substack, wherever you hang out.




  


Hop on Discord: Real-time chats, sneak peeks, and plugin magic.




  


Got ideas? Tell us at community@webcrumbs.org. We read every one!




  


Tell a friend: Developers, designers, vibe coders, curious tinkerers — all welcome.











  This open source tool lets you publish UI components and paste them into anything — HTML, React, Framer, Shopify, WordPress, whatever.

  Built it once. Embed it anywhere. 

  Check it out → github.com/webcrumbs-community/webcrumbs





  

    

      

      

      

    

   

  

    

      

      

      

    

   

  

    

      

      

      

    

   

  

    

      

      

      

    

   

  

    

      

      

      

    

   

  

    

      

      

      

    

   

  

    

      

      

      

    

   

  

    

      

      

      

    

  







HOW IT WORKS



  
Head over to app.webcrumbs.ai



  
Create your component (no setup needed!)

  
Click Publish



  
Copy and paste the embed code into your site:



<webcrumbs-plugin uri="https://plugins.webcrumbs.dev/demo-component/"></webcrumbs-plugin>

<script src="https://cdn.webcrumbs.dev/@latest"></script>



* Just swap demo-component with your plugin's name.

Want it to load even faster? Add this to your <head>:

<link rel="preload" as="style" href="https://plugins.webcrumbs.dev/demo-component/style.css">

<link rel="preload" as="script" crossorigin="anonymous" href="https://plugins.webcrumbs.dev/demo-component/bundle.js">

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lato&display=swap"/>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap"/>

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"/>



* Same thing here — replace demo-component with your actual plugin name and check the plugin’s style.css to get the actual fonts being used.

See an example here

Prefer to self-host? Totally fine! Just make sure your bundle.js and style.css are publicly available at your chosen uri.



  

    

    

    

  

  



  

    

  








  

    

    

    

  

  



  

    

    

    

  








  

    

    

    

  

  



  

    

    

    

  





  



  

    

    

    

  

  



  

   

     

     

     

   

  







-----



  This project operates under the AGPL-3.0 Open Source License and is a community-driven endeavor.





  Made with ❤️ by the Webcrumbs Team.