Inspired by lit-html but for Node.js.
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. 👍💯
| 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. |
.jsx file (or .tsx file if you're TypeScript user) . That should work.# Install via NPM
$ npm install lit-ntml
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> */
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> */
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> */
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] */
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>
This method works the same as html() except that this is the synchronous version.
This method works the same as htmlFragment() except that this is the synchronous version.
👉 Check out the deno module at deno_mod/lit_ntml.
MIT License © Rong Sen Ng
FAQs
Inspired by lit-html but for Node.js
We found that lit-ntml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.