loreanvictor / htmplate

Create HTML templates using HTM

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

htmplate

tests version types npm bundle size

Create HTML templates using HTM (HyperScript Tagged Markup).

import { template, use } from 'htmplate'

const tmpl = template`
  <div class=container>
    <h1>Hellow World!</h1>
    <button>CLICK ME!</button>
  </div>
`

document.body.appendChild(use(tmpl))

๐Ÿ‘‰ Try it out!


Installation

On node:

npm i htmplate

In the browser:

import { template, use } from 'https://esm.sh/htmplate'

Usage

๐Ÿ‘‰ Define HTML templates using a JSX-like syntax:

const tmpl = template`<div>Hellow World!</div>`

The syntax is powered by HTM, so you get bonuses such as self-closing tags (<div/>), components (<${Foo}/>), syntax-highlighting (e.g. this VSCode plugin, though requires additional configuration), etc. See HTM's docs for more info.

๐Ÿ‘‰ Use HTML templates (whether defined using template or not) to create elements:

document.body.appendChild(use(tmpl))

About

Create HTML templates using HTM

License:MIT License


Languages

Language:TypeScript 86.5%Language:JavaScript 13.5%