The bridge between simple HTML and full Single Page Architecture.

AlpineComponentLoader is a lightweight, zero-dependency library that transforms standard HTML templates into reactive, encapsulated Custom Elements for Alpine.js. It allows developers to build robust, modular applications without the complexity of build steps, bundlers, or Node.js environments.

🚀 Key Features

  • Zero Build Step: No Webpack, Vite, or CLI required. Just import the script and start building.
  • True Encapsulation: Optional Shadow DOM support keeps your component styles and logic isolated from the rest of the page.
  • Smart Loading Strategies: Improve performance with built-in Lazy (viewport) and Idle (background) loading.
  • Declarative Power: Features built-in API data fetching (data-src), typed props, and global store binding.
  • Resilient: Includes error boundaries, fallback templates, and state persistence (Local/Session Storage).

📦 Quick Start

Simply import the module and start defining components:

HTML 
1
2
3
4
5
6
7
8
9
<script type="module">
    import AlpineComponentLoader from './dist/AlpineComponentLoader.min.js';

    AlpineComponentLoader.define('my-card', '/components/card.html', {
        shadow: true
    });
</script>

<my-card title="Hello World"></my-card>

Stop fighting the config. Start building with AlpineComponentLoader.