Awesome

<div align="center" style="text-align: center;"> <h1 style="border-bottom: none;">lit-ntml</h1> <p>Inspired by <a href="https://github.com/PolymerLabs/lit-html" target="_blank" rel="noopener">lit-html</a> but for Node.js.</p> </div> <hr />

Lightweight and modern templating for SSR in Node.js, inspired by lit-html.

This module also gets featured in web-padawan/awesome-lit-html. Make sure to check the repo out for awesome things inspired by lit-html. 👍💯

Table of contents

Features
Pre-requisite
Enable syntax highlighting when writing HTML with template literal
- Visual Studio Code
Install
Usage
API Reference
deno
License

Features

Support	Feature
✅	`await` all tasks including Functions, Promises, and whatnot.
✅	Parse `PromiseList` or `List` by default, without explicit joining.
✅	Support HTML syntax highlighting + autocompletion with vscode-lit-html in JavaScript's template string.

Pre-requisite

Node.js >= 16.x
ES Modules

Enable syntax highlighting when writing HTML with template literal

Visual Studio Code

Install vscode-lit-html extension.
If the extension does not provide that syntax highlighting and autocompletion, try writing your templates in .jsx file (or .tsx file if you're TypeScript user) . That should work.

Install

# Install via NPM
$ npm install lit-ntml

Usage

html()

import { html } from 'lit-ntml';

const peopleList = ['Cash Black', 'Vict Fisherman'];
const syncTask = () => `<h1>Hello, World!</h1>`;
const asyncLiteral = Promise.resolve('<h2>John Doe</h2>');
const asyncListTask = async () => `<ul>${peopleList.map(n => `<li>${n}</li>`)}</ul>`;

/** Assuming top-level await is enabled... */
await html`${syncTask}${asyncLiteral}${asyncListTask}`; /** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1><h2>John Doe</h2><ul><li>Cash Black</li><li>Vict Fisherman</li></ul></body></html> */

htmlSync()

import { htmlSync as html } from 'lit-ntml';

const peopleList = ['Cash Black', 'Vict Fisherman'];
const syncTask = () => `<h1>Hello, World!</h1>`;

html`${syncTask}${peopleList}`;
/** <!DOCTYPE html><html><head></head><body><h1>Hello, World!</h1>Cash BlackVictFisherman[object Promise]</body></html> */

htmlFragment()

import { htmlFragment as html } from 'lit-ntml';

const syncTask = () => `<h1>Hello, World!</h1>`;
const externalStyleLiteral = `<style>body { margin: 0; padding: 0; box-sizing: border-box; }</style>`;

/** Assuming top-level await is enabled... */
await html`${externalStyleLiteral}${syncTask}`; /** <style>body { margin: 0; padding: 0; box-sizing: border-box; }</style><h1>Hello, World!</h1> */

htmlFragmentSync()

import { htmlFragmentSync as html } from 'lit-ntml';

const peopleList = ['Cash Black', 'Vict Fisherman'];
const syncTask = () => `<h1>Hello, World!</h1>`;
const asyncTask = Promise.resolve(1);

html`${syncTask}${peopleList}${asyncTask}`;
/** <h1>Hello, World!</h1>Cash BlackVictFisherman[object Promise] */

SSR with Express (Node.js)

Browser support

Only modern browsers with native ES Modules support requires no polyfills and transpilation needed.

<!doctype html>
<html>
  <head>
    <script type="module">
      import { html } from 'https://esm.sh/lit-ntml@latest';

      // --snip
    </script>
  </head>
</html>

API Reference

html()

returns: <Promise<string>> Promise which resolves with rendered HTML document string.

htmlSync()

This method works the same as html() except that this is the synchronous version.

htmlFragment()

returns: <Promise<string>> Promise which resolves with rendered HTML document fragment string.

htmlFragmentSync()

This method works the same as htmlFragment() except that this is the synchronous version.

deno

👉 Check out the deno module at deno_mod/lit_ntml.

License