HAX Traveler logo

🧙‍♂️ Magic Script Demo

Automatic Web Component Loading with HAX CDN

🚀 What is the Magic Script?

The Magic Script is a simple two-line solution that automatically loads web components from the HAX CDN when they're detected in the DOM. No manual imports, no complex setup - just include the script and use any component!

✨ Magic Script - Copy & Paste Ready 
<script>window.__appCDN="https://cdn.hax.cloud/cdn/";</script>
    <script src="https://cdn.hax.cloud/cdn/build.js"></script>
500+
Web Components
2
Lines of Code
0
Configuration Required
∞
Possibilities

📋 View Complete Component Registry ↗

📋 Play with all elements in "Doc player" ↗

Click above to see all available components in the registry JSON file

🎯 How It Works

  1. Detection: The build.js script uses a MutationObserver to watch for undefined custom elements
  2. Registry Lookup: When a custom element is found, it checks the wc-registry.json for the component path
  3. Dynamic Import: The component is automatically imported from the CDN
  4. Hydration: The custom element is defined and the component becomes interactive

📚 Read more on dev.to

Read the Dev.to article series about HAX Magic Script