❤
npm
Sign UpSign In

tagtag

3.2.3 • Public • Published

TagTag

Easy HTML templating with JS. Tagtag prints out HTML string, so it's especially useful with Node.js (works in browsers as well).

Install

npm i tagtag

Usage

Import / require

// If you're using ES modules:
import tag from 'tagtag'
 
// If you're using CommonJS modules:
const tag = require('tagtag');

Using with express

// views/index.js
 
const tag = require('tagtag');
const { doctype, html, head, meta, title, body, h1 } = tag.html;
 
module.exports = ({ name }) => doctype(
  html(
    head(
      meta({ charset: 'utf-8' }),
      title(`Hello ${name}`)
    ),
    body(
      h1(`Hello ${name}`)
    )
  )
);
// server.js
 
const express = require('express');
 
const app = express();
 
app.engine('js', require('tagtag/express'));
app.set('views', 'views');
app.set('view engine', 'js');
 
app.get('/', (req, res, next) => {
  res.render('index', { name: 'tagtag' });
});

tag(query)(...args)

tag('h1')('Hello world!').toString(); // <h1>Hello world!</h1>
String(tag('.hello')('world')); // <div class="hello">world</div>
String(tag('#hello.world')('!')); // <div id="hello" class="world">!</div>
const { doctype, html, head, meta, title, body, h1 } = tag.html;
 
String(doctype(
  html(
    head(
      meta({ charset: 'utf-8' }),
      title('Hello tagtag!')
    ),
    body(
      h1('Hello tagtag!')
    )
  )
)) // <!DOCTYPE html><html><head><meta charset="utf-8"><title>Hello tagtag!</title></head><body><h1>Hello tagtag!</h1></body></html>

tag.html[tagName]

This gives you shortcut to tag(tagName) for the standard HTML tag names.

tag.svg[tagName]

This gives you shortcut to tag(tagName) for the standard SVG tag names.

Self-closing tags

Self-closing tags are detected automatically.

Escaping

Notice tagtag escapes text content and attributes by default! If you want to print out raw text, please use:

String(body(tag.raw('<script alert("Evil!")</script>'));

or:

String(body({ $raw: '<script alert("Evil!")</script>' }));

Readme

Keywords

Package Sidebar

Install

npm i tagtag

Repository

github.com/pakastin/tagtag

Homepage

github.com/pakastin/tagtag#readme

Weekly Downloads

10

Version

3.2.3

License

MIT

Unpacked Size

20.3 kB

Total Files

16

Last publish

Collaborators

  • pakastin
Try on RunKit
Report malware