This tool for all HTML template creators

Moataz Aldawood — Wed, 05 Aug 2026 16:14:57 +0000

Hi,
I would introduce this tool for you. It is a brilliant and simple tool to create reusable Component/ Layouts / Page templates with Zero Dependencies. Use only HTML! and No server!

an-dalina

Simple Example:
Here we defined a USER-CARD component which receives 2 attributes: username, and role.

<an-component-def>
    <an-attributes>
        <!-- define components attributes that will be passed from the caller -->
        <an-attribute name="username" mandatory="true" />
        <an-attribute name="role" default-value="Member" />
    </an-attributes>

    <an-body>
        <!-- defining component code structure -->
        <div class="card">
            <h2>{{username}}</h2>
            <p>Role: {{role}}</p>
        </div>
    </an-body>
</an-component-def>

calling the component and passing attributes values:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="andalina.js" defer> </script>
</head>
<body>

    <!-- call a component using src attribute -->
    <an-component src="user-card.html" username="Alice" role="Admin"/>

    <!-- call a component and use default value of role -->
    <an-component src="user-card.html" username="Bob"/>
</body>
</html>

This will be rendered in client side as:

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="andalina.js" defer> </script>
</head>
<body>
    <div class="card">
        <h2>Alice</h2>
        <p>Role: Admin</p>
    </div>

    <div class="card">
        <h2>Bob</h2>
        <p>Role: Member</p>
    </div>
</body>
</html>

Andalina provide 6 tags only. with them you can do everything without repeating your codes.

the tags are:
an-include: use it to include and inject any part of code. almost, use it for include list of CSS and JS files inside header.
an-component: use it to define component and reuse it anywhere.
an-layout: use it to define layout and reuse it anywhere
an-template: use it to render a predefined tempalte.

an-repeat: use it to repeat part of your code X times.
an-code: use it to inject Java, C#, Json, XML,.... or any code from external file. this help to keep your page clean.

Try it and let me know your feedback.
an-dalina

Bridging the FE/BE Divide: Why I Built a Zero-Dependency Component Engine for Vanilla HTML

Moataz Aldawood — Tue, 04 Aug 2026 21:54:41 +0000

If you’ve ever worked on a team with a strict separation between Front-End and Back-End developers, you know the pain.

The FE team builds and delivers pristine, raw HTML. Then, it lands on the BE team's desk. Suddenly, the back-end developers have to rewrite, restructure, or "clean up" the markup just to wrap it in server-side rendering logic—whether that is JSF, ASP, Laravel, PHP, Django, JSP, Thymeleaf, Blade, or Jinja2.

The result? Massive misalignment, friction, and wasted development cycles during handoff.

The Problem: The Markup Translation Tax
Why does this happen? Because traditional component frameworks (React, Vue, Svelte) require a heavy Node.js toolchain, build steps, and complex bundling. If a backend-heavy stack isn't running a full Node ecosystem, integrating modern component architectures becomes an uphill battle.

As a result, teams fall back on copy-pasting raw HTML templates, leading to out-of-sync codebases where the front-end design and back-end logic drift apart.

The Solution: Enter Andalina
To solve this misalignment, I wanted something lightweight that bridges the gap without forcing a massive infrastructure shift. So, I built Andalina (an-dalina)—a zero-dependency, client-side template engine that brings component architecture straight to vanilla HTML.

No Node.js required.
No Webpack or complex bundlers.
No server-side rendering setup needed to preview.
Built entirely on Standard HTML/XHTML.

How It Works
With Andalina, the FE team delivers structured, modular components that cleanly map to server-side component boundaries. Because it relies on standard HTML syntax, the BE team can easily ingest and integrate these templates directly into their existing server-side architecture without rewriting a single line of markup.

Best of all? It has only 6 tags to learn, making the learning curve flat for anyone on the team.

Try It Out & Let's Connect!
I built Andalina to help front-end and back-end teams work closer together and actually enjoy the handoff process.

You can check out the documentation and try it out here:
👉 Andalina Documentation

I would love to hear your thoughts. All kinds of feedback are welcome—ideas, enhancements, edge cases, or issues. Let’s make FE and BE developers friends again! :)

DEV Community: Moataz Aldawood

This tool for all HTML template creators

Bridging the FE/BE Divide: Why I Built a Zero-Dependency Component Engine for Vanilla HTML