htt

html-template-tag

📄 - ES6 Tagged Template for compiling HTML template strings

Showing:

Popularity

Downloads/wk

1.8K

GitHub Stars

40

Maintenance

Last Commit

4d ago

Contributors

6

Package

Dependencies

1

Size (min+gzip)

0.4KB

License

MIT

Type Definitions

Built-In

Tree-Shakeable

Yes?

Categories

Readme

html-template-tag

version issues downloads license

ES6 Tagged Template for compiling HTML template strings.

Installation

This package is distributed via npm:

npm install html-template-tag

Usage

String Interpolation

At its core, this module just performs simple ES6 string interpolation.

var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";

var name = `Antonio`;
var string = html`Hello, ${name}!`;
// "Hello, Antonio!"

Nevertheless, it escapes HTML special characters without refraining its use in loops!

var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";

var names = ["Antonio", "Megan", "/><script>alert('xss')</script>"];
var string = html`
    <ul>
        ${names.map((name) => html`
            <li>Hello, ${name}!</li>
        `)}
    </ul>
`;
// "<ul><li>Hello, Antonio!</li><li>Hello, Megan!</li><li>Hello, /&gt;&lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;!</li></ul>"

Skip autoscaping

You can use double dollar signs in interpolation to mark the value as safe (which means that this variable will not be escaped).

var name = `<strong>Antonio</strong>`;
var string = html`Hello, $${name}!`;
// "Hello, <strong>Antonio</strong>!"

HTML Template Pre-Compiling

This small module can also be used to pre-compile HTML templates:

var html = require("html-template-tag");
// - or - import { html } from "html-template-tag";

var data = {
    count: 2,
    names: ["Antonio", "Megan"]
};

var template = ({names}) => html`
    <ul>
        ${names.map((name) => html`
            <li>Hello, ${name}!</li>
        `)}
    </ul>
`;

var string = template(data);
/* 
    "
    <ul>
        <li>Hello, Antonio!</li>
        <li>Hello, Megan!</li>
    </ul>
    "
*/

NB: The formating of the string literal is kept.

License

MIT

Thanks

The code for this module has been heavily inspired on Axel Rauschmayer's post on HTML templating with ES6 template strings and Stefan Bieschewski's comment.

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial