Explore real-world examples demonstrating zero-dependency client-side HTML composition, declarative slots with default fallbacks, responsive repeat grids, and dynamic source code injection.
This example demonstrates how to define reusable components using <an-component-def> and inject dynamic content into them using <an-inject>. It also shows how to display raw code snippets in the browser using <an-code> without HTML entities escaping.
This example focuses on creating master page structures using <an-layout-def> to wrap multiple pages in a single layout. It also highlights how to provide default fallback content inside <an-place> tags when an <an-inject> is omitted by the consumer.
This example introduces <an-data> and <an-repeat>. It shows how to fetch external JSON files locally or from an API, store them globally, and then iterate over the arrays to dynamically render grids and lists of components.
This example demonstrates the full power of Andalina by chaining all features together: a page template calling a layout, fetching data, repeating over that data, and rendering encapsulated components within the loop.
Learn how to encapsulate complex third-party CSS framework markup (like Bootstrap) into clean, reusable Andalina components. Also demonstrates how to safely load Bootstrap JS after Andalina finishes DOM mutations.
Learn how to mount complex Javascript frameworks (like React) inside an Andalina-managed DOM by listening for the andalina:ready event.
Learn how to bootstrap an Angular application safely inside an Andalina layout by waiting for DOM construction to finish.
A personalized user dashboard showcasing the latest logical tags and template features. Discover how to use conditional blocks (<an-if> / <an-else>) and native JavaScript expressions (Math, Methods, and Fallbacks) directly inside bindings.
Explore the Andalina DevTools! By setting debug: true in your config, Andalina will render a beautiful UI overlay and console tree map.