# es6-string-html-template

> A brief HTML template using ES6 string template

Latest version **1.0.2** (published 2017-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install es6-string-html-template
pnpm add es6-string-html-template
yarn add es6-string-html-template
bun add es6-string-html-template
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2017-03-31 |
| First published | 2017-03-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | clarence-pan |
| Maintainers | clarencep |
| Keywords | ES6, HTML, template |

## Links

- npm: https://www.npmjs.com/package/es6-string-html-template
- Repository: https://github.com/Clarence-pan/node-es6-string-html-template
- Homepage: https://github.com/Clarence-pan/node-es6-string-html-template#readme
- Issues: https://github.com/Clarence-pan/node-es6-string-html-template/issues
- npm.io page: https://npm.io/package/es6-string-html-template

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2017-03-31
- 1.0.1 — 2017-03-31
- 1.0.0 — 2017-03-31

## README

# ES6 string HTML template

It is a brief HTML template using ES6 string template.

[![NPM version][npm-image]][npm-url]
![Stability][stability]
[![build status][travis-image]][travis-url]
[![Test coverage][codecov-image]][codecov-url]
[![David deps][david-image]][david-url]
[![Known Vulnerabilities][snyk-image]][snyk-url]
[![NPM download][download-image]][download-url]


[npm-image]: https://img.shields.io/npm/v/es6-string-html-template.svg?style=flat-square
[npm-url]: https://npmjs.org/package/es6-string-html-template
[stability]: https://img.shields.io/badge/stability-stable-brightgreen.svg
[travis-image]: https://img.shields.io/travis/Clarence-pan/node-es6-string-html-template.svg?style=flat-square
[travis-url]: https://travis-ci.org/Clarence-pan/node-es6-string-html-template
[codecov-image]: https://codecov.io/gh/Clarence-pan/node-es6-string-html-template/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/Clarence-pan/node-es6-string-html-template
[david-image]: https://img.shields.io/david/Clarence-pan/node-es6-string-html-template.svg?style=flat-square
[david-url]: https://david-dm.org/Clarence-pan/node-es6-string-html-template
[snyk-image]: https://snyk.io/test/npm/es6-string-html-template/badge.svg?style=flat-square
[snyk-url]: https://snyk.io/test/npm/es6-string-html-template
[download-image]: https://img.shields.io/npm/dm/es6-string-html-template.svg?style=flat-square
[download-url]: https://npmjs.org/package/es6-string-html-template



# Install

```
npm install --save es6-string-html-template
```

# Usage Example

## ES6 modules:

```js
import {html, escape, raw} from 'es6-string-html-template'

function renderArticle({title, content, author, date}){
    return html`
<article>
    <h1>${title}</h1>
    ${raw(content)}
    <footer>${author} created at ${date}</footer>
</article>`
}

let articleHtml = renderArticle({
    title: `Jim's daily`,
    content: `<ol>
                <li>Open computer</li>
                <li>Write <code>console.log("Hello world!")</code>
                </li>
              </ol>`,
    author: 'Tom',
    date: '2017-04-01',
})

console.log('' + articleHtml)

// output:
// <article>
//     <h1>Jim&#39;s daily</h1>
//     <ol>
//                 <li>Open computer</li>
//                 <li>Write <code>console.log("Hello world!")</code>
//                 </li>
//               </ol>
//     <footer>Tom created at 2017-04-01</footer>
// </article>

```

## CommonJs modules:

```js
const {html, escape, raw} = require('es6-string-html-template')

function renderArticle(data){
    return html`
<article>
    <h1>${data.title}</h1>
    ${raw(data.content)}
    <footer>${data.author} created at ${data.date}</footer>
</article>`
}

let articleHtml = renderArticle({
    title: `Jim's daily`,
    content: `<ol>
                <li>Open computer</li>
                <li>Write <code>console.log("Hello world!")</code>
                </li>
              </ol>`,
    author: 'Tom',
    date: '2017-04-01',
})

console.log('' + articleHtml)
// output:
//
// <article>
//     <h1>Jim&#39;s daily</h1>
//     <ol>
//                 <li>Open computer</li>
//                 <li>Write <code>console.log("Hello world!")</code>
//                 </li>
//               </ol>
//     <footer>Tom created at 2017-04-01</footer>
// </article>
```

---
_Source: https://npm.io/package/es6-string-html-template · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._