Build, re(use), and share your own Webcrumbs Plugins — compatible with any site, any stack. 🌟 Star to support our work!
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:
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 [email protected]. 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.