Build reusable pages, templates, layouts, and any other UI components for vanilla HTML.

Andalina is a zero-dependency, client-side template engine that brings component architecture to vanilla HTML. No Node.js, no Webpack, no server required.

Get Started View Examples on GitHub

The DX Problem We Solve

Front-End developers often copy and paste identical HTML across dozens of static files. Back-End developers then have to rip it apart to use it in JSP, Jinja2, or Blade.

Andalina fixes this. You write modular components once in standard HTML, and Andalina dynamically stitches them together in the browser. Zero build steps, zero Node.js required.

Build a page template and reuse it in any page

master-template.html

<an-place name="main-content">

  <!-- your content will be placed here -->

</an-place>

index.html

<an-template name="master-template">
   <an-inject name="main-content">

      <p> this is my page content </p>

   </an-inject>
</an-template>

Rendered HTML for index.html

<p> this is my page content </p>

Create reusable UI components with dynamic properties

user-card.html

<!-- Define component attributes -->
<an-attribute name="username" mandatory="true" />
<an-attribute name="role" default-value="Member" />

<!-- Component UI Structure -->
<div class="card">
   <h3>{{username}}</h3>
   <p>Role: {{role}}</p>
</div>

index.html

<!-- Call component with custom role -->
<an-component name="user-card" 
              username="Alice" 
              role="Admin" />

<!-- Call component with default role -->
<an-component name="user-card" 
              username="Bob" />

Rendered HTML for index.html

<div class="card">
   <h3>Alice</h3>
   <p>Role: Admin</p>
</div>

<div class="card">
   <h3>Bob</h3>
   <p>Role: Member</p>
</div>

Visual Output for index.html

Alice

Role: Admin

Admin

Bob

Role: Member

Member

The Four Core Pillars

Zero Dependency

Andalina runs entirely in the browser. No Node.js build pipelines, no Webpack, and no server-side rendering required.

Incredibly Simple

With only 5 core tags to learn, Andalina is exceptionally easy to pick up, even for absolute beginners.

Standard HTML

There is no need to learn a new programming language or complex framework. It's just the HTML you already know!

Single Source

Front-End developers fix bugs in exactly one place. Andalina handles injecting the repetition for you.

Ready to stop repeating yourself?

Drop the script tag into your project and start building modular HTML today.

Read the Documentation