Html Helpers

Availability

Helper	Node	Browser
attr	✅	✅
css	✅	—
js	✅	—
ol	✅	✅
sanitize	✅	✅
thumbnailImage	✅	✅
ul	✅	✅

Table of Contents

• {{attr}}
• {{css}}
• {{js}}
• {{sanitize}}
• {{ul}}
• {{ol}}
• {{thumbnailImage}}

{{attr}}

Stringify attributes from the options hash into an HTML attribute string.

Params

• options {Object}: Options object with a hash property containing key-value pairs
• returns {String}: Space-prefixed attribute string, or empty string if no attributes

Example

<div{{attr class="container" id="main"}}></div>

Output

<div class="container" id="main"></div>

You can also use variables:

<!-- With context: { btnClass: "btn-primary" } -->
<button{{attr class=btnClass type="submit"}}>Click</button>

Output

<button class="btn-primary" type="submit">Click</button>

{{css}}

Generate <link> tags for stylesheets. Supports both CSS and LESS files.

Params

• list {String|Array}: One or more stylesheet paths/URLs
• returns {String}: One or more <link> tags

Example

Single stylesheet:

{{css "styles/main.css"}}

Output

<link type="text/css" rel="stylesheet" href="styles/main.css">

Multiple stylesheets:

<!-- With context: { stylesheets: ["reset.css", "theme.css", "app.css"] } -->
{{css stylesheets}}

Output

<link type="text/css" rel="stylesheet" href="reset.css">
<link type="text/css" rel="stylesheet" href="theme.css">
<link type="text/css" rel="stylesheet" href="app.css">

LESS files are automatically detected:

{{css "styles/theme.less"}}

Output

<link type="text/css" rel="stylesheet/less" href="styles/theme.less">

{{js}}

Generate <script> tags for JavaScript files.

Params

• context {String|Array|Object}: Script path(s) or options object with src attribute
• returns {String}: One or more <script> tags

Example

Single script:

{{js "app.js"}}

Output

<script src="app.js"></script>

Multiple scripts:

<!-- With context: { scripts: ["vendor.js", "utils.js", "app.js"] } -->
{{js scripts}}

Output

<script src="vendor.js"></script>
<script src="utils.js"></script>
<script src="app.js"></script>

Using the src attribute:

{{js src="bundle.js"}}

Output

<script src="bundle.js"></script>

{{sanitize}}

Strip all HTML tags from a string, preserving only the text content.

Params

• str {String}: The string containing HTML to sanitize
• returns {String}: Plain text with all HTML tags removed

Example

{{sanitize "<p>Hello <strong>World</strong>!</p>"}}

Output

Hello World!

Extracting text from HTML markup:

<!-- With context: { richText: "<div class='note'><em>Important:</em> Check the <a href='/docs'>docs</a></div>" } -->
<p>{{sanitize richText}}</p>

Output

<p>Important: Check the docs</p>

Note: This helper removes HTML tags but preserves all text content, including text inside <script> or <style> tags. It is not a security sanitizer for untrusted input.

{{ul}}

Block helper for creating unordered lists.

Params

• context {Array}: Array of items to render as list items
• options {Object}: Options object; supports HTML attributes via hash
• returns {String}: Complete <ul> element with <li> children

Example

With an array of strings:

<!-- With context: { fruits: ["Apple", "Banana", "Cherry"] } -->
{{#ul fruits}}{{this}}{{/ul}}

Output

<ul><li>Apple</li>
<li>Banana</li>
<li>Cherry</li></ul>

With objects and custom attributes:

<!-- With context: { users: [{name: "Alice"}, {name: "Bob"}] } -->
{{#ul users class="user-list"}}{{name}}{{/ul}}

Output

<ul class="user-list"><li>Alice</li>
<li>Bob</li></ul>

{{ol}}

Block helper for creating ordered lists.

Params

• context {Array}: Array of items to render as list items
• options {Object}: Options object; supports HTML attributes via hash
• returns {String}: Complete <ol> element with <li> children

Example

<!-- With context: { steps: ["Mix ingredients", "Bake at 350°F", "Let cool"] } -->
{{#ol steps class="recipe-steps"}}{{this}}{{/ol}}

Output

<ol class="recipe-steps"><li>Mix ingredients</li>
<li>Bake at 350°F</li>
<li>Let cool</li></ol>

{{thumbnailImage}}

Generate a <figure> element with a thumbnail image, optional link to full-size image, and optional caption.

Params

• context {Object}: Configuration object with the following properties:
  • id {String}: Unique identifier for the figure element
  • alt {String}: Alt text for the image
  • thumbnail {String}: URL of the thumbnail image
  • size {Object}: Object with width and height properties
  • full {String} (optional): URL of the full-size image (creates a link if provided)
  • caption {String} (optional): Caption text for the image
  • classes {Object} (optional): CSS classes for figure, image, and link elements
• returns {String}: Complete <figure> element

Example

Basic thumbnail with link and caption:

{{thumbnailImage image}}

With context:

{
  "image": {
    "id": "hero",
    "alt": "Mountain landscape",
    "thumbnail": "/images/mountain-thumb.jpg",
    "size": { "width": 200, "height": 150 },
    "full": "/images/mountain-full.jpg",
    "caption": "View from the summit"
  }
}

Output

<figure id="image-hero">
<a href="/images/mountain-full.jpg" rel="thumbnail">
<img alt="Mountain landscape" src="/images/mountain-thumb.jpg" width="200" height="150">
</a>
<figcaption>View from the summit</figcaption>
</figure>

With custom CSS classes:

{
  "image": {
    "id": "profile",
    "alt": "User avatar",
    "thumbnail": "/avatars/user.jpg",
    "size": { "width": 100, "height": 100 },
    "full": "/avatars/user-large.jpg",
    "classes": {
      "figure": ["avatar-container", "rounded"],
      "image": ["avatar-img"],
      "link": ["avatar-link"]
    }
  }
}

Output

<figure id="image-profile" class="avatar-container rounded">
<a href="/avatars/user-large.jpg" rel="thumbnail" class="avatar-link">
<img alt="User avatar" src="/avatars/user.jpg" width="100" height="100" class="avatar-img">
</a>
</figure>