HyperTemplates Documentation

Introduction to templating

HyperTemplates is a templating system for composing HTML documents. Web "pages" as we experience them today are HTML documents. Web "sites" are collections of HTML documents.

To understand what a document template is, consider the example of a company letterhead document:

A letterhead is stationery that typically includes the company name, address, title, phone number, email address, logo, and some branding (e.g. a logo). Very similar to the information we find on most web pages. To add this information to every company document without a template (the letterhead) would result in a very inconsistent experience for the company's customers. It would also be incredibly inefficient! Templates solve these problems and many others by making it easy to create consistent looking documents.

Document templates are useful because they allow us to focus on the contents of a document rather than futzing with how the content should be presented. In practical terms, templates also serve as a guide - they prompt us to provide the necessary information to accomplish a given task.

HyperTemplates in a nutshell

To understand HyperTemplates, let's use a simple HTML5 document as an example.

 1<!DOCTYPE html>
 2<html lang='en-US'>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title>ACME Inc</title>
 6        <meta name='description' content='ACME Inc, makers of fine anvil products.'>
 7    </head>
 8    <body>
 9        <header>
10            <nav>
11                <img src='/img/logo.png' alt='ACME Inc company logo (an anvil)' />
12                <a href='/'>Home</a>
13                <a href='/about'>About</a>
14                <a href='/contact'>Contact</a>
15            </nav>
16            <h1>Welcome to ACME, Inc.</h1>
17        </header>
18        <main>
19            <p>Welcome to ACME, home of the anvil.</p>
20        </main>
21    </body>
22</html>

To convert this example document into a reusable template using HyperTemplates, all we need to do is annotate the document using HyperTemplates HTML attributes.

template.html

 1<!DOCTYPE html>
 2<html lang='en-US'>
 3    <head>
 4        <meta charset='utf-8'>
 5        <title ht-content='page.title,site.title'>ACME Inc</title>
 6        <meta name='description' ht-attrs='content:page.description,site.description'>
 7    </head>
 8    <body>
 9        <header>
10            <nav ht-if='site.nav'>
11                <img src='/img/logo.png' alt='ACME Inc company logo (an anvil)' />
12                <a href ht-template='link:site.nav' ht-attrs='href:link.href'>
13                    <span ht-content='link.label,link.title'></span>
14                </a>
15            </nav>
16            <h1 ht-content='page.title,site.title'>Welcome to ACME, Inc.</h1>
17        </header>
18        <main ht-content='html:page.content'></main>
19    </body>
20</html>

This template tells HyperTemplates to make the following changes:

Replace the contents of the <title> and <h1> elements with the contents of the template data page.title or site.title property.
Replace the page description <meta> element content attribute with the contents of the template data page.description or site.description property.
Remove the <nav> element if the template data does not contain a site.nav property.
Clone the <a> element once for each entry in the template data site.nav property, then process the cloned element as a nested template with a variable named link.
Parse the contents of the template data page.content property as HTML and insert the parsed HTML into the <main> element.

To learn more about HyperTemplates attributes, please visit the attributes reference.

Data-driven templating

HyperTemplates populates HTML templates with template data containing key-value pairs. Template data is generally managed as content files in Markdown, YAML, or JSON format.

Example template data

 1{
 2    site: {
 3        title: "HyperTemplates",
 4        description: "HyperTemplates is the pure-HTML templating system for the modern web.",
 5        favicon:
 6            href: "/img/apple-touch-icon.png",
 7            rel: "apple-touch-icon"
 8        nav: [
 9            { label: "Home", href: "/" },
10            { label: "Features", href: "/features/" },
11            { label: "Docs", href: "/docs/" },
12            { label: "Blog", href: "/blog/" },
13        ]
14    },
15    page: {
16        title: "HyperTemplates Documentation",
17        description: "HyperTemplates Documentation",
18        content: "<p>HyperTemplates is a templating system for composing HTML documents...</p>"
19    }
20}

HyperTemplates layouts contain HTML attributes that reference template data properties using "dot notation" property accessors. For example, the site.favicon.href property has a value of /img/apple-touch-icon.png.

HyperTemplates User Documentation

HyperTemplates Documentation

Introduction to templating

HyperTemplates in a nutshell

Data-driven templating

Resources

Tutorials

How-To Guides

Reference Documentation

HyperTemplates Documentation

Introduction to templating

HyperTemplates in a nutshell

Data-driven templating

Resources

Tutorials

How-To Guides

Reference Documentation

💬 Join the community