← Back to Documentation

Documentation

Working with HTML Includes, templates, locals, conditions & loops

Animmaster Vite Template includes a powerful HTML workflow: reuse blocks with <include>, build pages on top of templates with <template> + <block>, and add “programming” features like variables, conditions and loops.

Download Animmaster Vite Template Save your time — start now

Overview

The template provides advanced HTML tooling that you can use (or ignore) depending on the project. The main goal is to reduce duplication and keep your layout consistent across pages.

Best use case
If you repeat the same code in multiple pages (like head, header, footer), use <include> or <template> so you edit it once and update everywhere.

Include HTML files

When you need to reuse a chunk of HTML across many pages, use the built-in include syntax:

Include syntax
<include src="path/to/file.html"></include>

Example: connect head, header and footer on every page. Edit header.html once — and it updates everywhere it’s included.

Example page with includes

<!doctype html>
<html lang="en">

<!-- connect head -->
<include src="@components/layout/head/head.html"></include>

<body>
  <div class="wrapper">

    <!-- connect header -->
    <include src="@components/layout/header/header.html"></include>

    <main class="page">
      <!-- page content -->
    </main>

    <!-- connect footer -->
    <include src="@components/layout/footer/footer.html"></include>

  </div>

  <script type="module" src="@js/app.js"></script>
</body>
</html>

Use HTML templates

For larger projects it’s convenient to use templates (layouts). Templates are stored in src/components/templates — you can add your own.

The key idea is simple: <block name="..."> defines slots, and pages “fill” those slots using <template src="...">.

Template example: main.html

src/components/templates/main/main.html

<!doctype html>
<html lang="en">
<include src="@components/layout/head/head.html"></include>

<link rel="stylesheet" href="@components/templates/main/main.scss">

<body>
  <div class="wrapper">
    <block name="header"></block>
    <block name="main"></block>
    <block name="footer"></block>
  </div>

  <block name="popup"></block>

  <script type="module" src="@js/app.js"></script>
</body>
</html>

Template example: inner.html

src/components/templates/inner/inner.html

<!doctype html>
<html lang="en">
<include src="@components/layout/head/head.html"></include>

<link rel="stylesheet" href="@components/templates/inner/inner.scss">

<body>
  <div class="wrapper">
    <block name="header"></block>

    <div class="inner">
      <block name="main"></block>
      <block name="aside"></block>
    </div>

    <block name="footer"></block>
  </div>

  <block name="popup"></block>

  <script type="module" src="@js/app.js"></script>
</body>
</html>

Notice how each template can connect its own SCSS file — that’s useful when layouts are different.

Page example: index.html uses main.html

src/index.html

<template src="@components/templates/main/main.html">

  <block name="header">
    <include src="@components/layout/header/header.html"></include>
  </block>

  <block name="main">
    <include src="@components/pages/home/home.html"></include>
  </block>

  <block name="footer">
    <include src="@components/layout/footer/footer.html"></include>
  </block>

  <block name="popup"></block>

</template>

Page example: contacts.html uses inner.html

contacts.html

<template src="@components/templates/inner/inner.html">

  <block name="header">
    <include src="@components/layout/header/header.html"></include>
  </block>

  <block name="main">
    <include src="@components/pages/contacts/contacts.html"></include>
  </block>

  <block name="aside">
    <include src="@components/layout/aside/aside.html"></include>
  </block>

  <block name="footer">
    <include src="@components/layout/footer/footer.html"></include>
  </block>

  <block name="popup"></block>

</template>

Variables (locals)

You can pass data to included/template files using locals (JSON). Inside included HTML, print variables using double square brackets: [[title]].

Pass locals into head.html

contacts.html

      <!DOCTYPE html>
      <html lang="en">
      
      <include
        src="@components/layout/head/head.html"
        locals='{"title":"TEXT"}'>
      </include>
      
      <body>
        <div class="wrapper">
          <include src="@components/layout/header/header.html"></include>
          <include src="@components/pages/home/home.html"></include>
          <include src="@components/layout/footer/footer.html"></include>
        </div>
      </body>
      </html>

Render the variable inside head.html

@components/layout/head/head.html

      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="@styles/style.scss">
        <title>[[title]]</title>
      </head>

You can pass multiple values the same way:

Multiple locals example

      <include
        src="@components/layout/head/head.html"
        locals='{
          "title":"Page name",
          "keywords":"...",
          "description":"..."
        }'>
      </include>

Conditions: <if>, <elseif>, <else>

When locals are available, you can add conditional logic. Example: highlight the active menu item. Pass an active value into header.html.

Pass active page name

      <include
        src="@components/layout/header/header.html"
        locals='{"active":"Home"}'>
      </include>

Then, inside header.html:

Condition example inside header

      <ul class="menu__list">
      
        <if condition="'[[active]]' === 'Home'">
          <li class="menu__item">
            <a href="#" class="menu__link menu__link--active">Home</a>
          </li>
        </if>
      
        <else>
          <li class="menu__item">
            <a href="[[item.href]]" class="menu__link">Home</a>
          </li>
        </else>
      
      </ul>
Tip
Instead of duplicating huge menu markup, combine conditions with loops (next section).

Loops: <each>

To optimize repetitive markup, you can generate items from data using <each>. Example: build a menu from an array, and still keep the active item highlight.

Loop + condition example

         <ul class="menu__list">
      
        <each loop='item in [
          {"href": "#","ancor": "Home"},
          {"href": "#","ancor": "About"},
          {"href": "#","ancor": "Blog"},
          {"href": "#","ancor": "Contacts"}
        ]'>
      
          <if condition="'[[active]]' === '[[item.ancor]]'">
            <li class="menu__item">
              <a href="[[item.href]]" class="menu__link menu__link--active">[[item.ancor]]</a>
            </li>
          </if>
      
          <else>
            <li class="menu__item">
              <a href="[[item.href]]" class="menu__link">[[item.ancor]]</a>
            </li>
          </else>
      
        </each>
      
      </ul>

Build settings for HTML

In template.config.js, check the html section:

html → beautify

Controls HTML formatting in production builds.

  • enable — enable/disable formatting (true/false)
  • indent — indentation style
Recommendation
Enable beautify for production builds so the final HTML is clean and readable (helpful for demos and handoff).

Download

Stop copy-pasting the same header/footer into every page. Use includes and templates to build faster — and keep everything consistent.

Download Animmaster Vite Template Save your time — start now