BranchesTags

Repository files navigation

nanohtml

npm versionbuild statusdownloadsjs-standard-style

HTML template strings for the Browser with support for Server Side Rendering in Node.

Installation

$ npm install nanohtml

Usage

Browser

varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)

Node

Node doesn't have a DOM available. So in order to render HTML we use string concatenation instead. This has the fun benefit of being quite efficient, which in turn means it's great for server rendering!

varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())

Node with custom DOM

Modules like jsdom implement (parts of) the DOM in pure JavaScript. If you don't really need the performance of string concatenation, or use nanohtml components that modify the raw DOM, use nanohtml/dom to give nanohtml a custom Document.

varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'

Interpolating unescaped HTML

By default all content inside template strings is escaped. This is great for strings, but not ideal if you want to insert HTML that's been returned from another function (for example: a markdown renderer). Use nanohtml/raw for to interpolate HTML directly.

varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)

Attaching event listeners

varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}

Multiple root elements

If you have more than one root element they will be combined with a DocumentFragment.

varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)

Conditional attributes

Use a javascript object to conditionally add HTML attributes.

varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`

Static optimizations

Parsing HTML has significant overhead. Being able to parse HTML statically, ahead of time can speed up rendering to be about twice as fast.

Browserify

From the command line

$ browserify -t nanohtml index.js > bundle.js

Programmatically

varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)

In package.json

{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}

Bundling

Webpack

At the time of writing there's no Webpack loader yet. We'd love a contribution!

Babel / Parcel

Add nanohtml to your .babelrc config.

Without options:

{"plugins": ["nanohtml"]}

With options:

{"plugins": [["nanohtml",{"useImport": true}]]}

Options

  • useImport - Set to true to use import statements for injected modules. By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild function. Defaults to "nanohtml/lib/append-child".

Rollup

Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:

import html from 'nanohtml/lib/browser';

Attributions

Shout out to Shama and Shuhei for their contributions to Bel, yo-yoify and pelo. This module is based on their work, and wouldn't have been possible otherwise!

See Also

License

MIT

About

🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.

Topics

domelementfrontend

Resources

Readme
MIT license
Activity
Custom properties

Stars

688 stars

Watchers

19 watching

Forks

48 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
nanohtml
npm versionbuild statusdownloadsjs-standard-style
HTML template strings for the Browser with support for Server Side
Rendering in Node.
Installation
$ npm install nanohtml
Usage
Browser
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`document.body.appendChild(el)
Node
Node doesn't have a DOM available. So in order to render HTML we use string
concatenation instead. This has the fun benefit of being quite efficient, which
in turn means it's great for server rendering!
varhtml=require('nanohtml')varel=html`<body><h1>Hello planet</h1></body>`console.log(el.toString())
Node with custom DOM
Modules like jsdom implement (parts of)
the DOM in pure JavaScript. If you don't really need the performance of
string concatenation, or use nanohtml components that modify the raw DOM, use
nanohtml/dom to give nanohtml a custom Document.
varJSDOM=require('jsdom').JSDOMvarnanohtml=require('nanohtml/dom')varjsdom=newJSDOM()varhtml=nanohtml(jsdom.window.document)varel=html`<body><h1>Hello planet</h1></body>`el.appendChild(html`<p>A paragraph</p>`)el.outerHTML==='<body><h1>Hello planet</h1><p>A paragraph</p></body>'
Interpolating unescaped HTML
By default all content inside template strings is escaped. This is great for
strings, but not ideal if you want to insert HTML that's been returned from
another function (for example: a markdown renderer). Use nanohtml/raw for
to interpolate HTML directly.
varraw=require('nanohtml/raw')varhtml=require('nanohtml')varstring='<h1>This a regular string.</h1>'varel=html`<body>${raw(string)}</body>`document.body.appendChild(el)
Attaching event listeners
varhtml=require('nanohtml')varel=html`<body><buttononclick=${onclick}> Click Me</button></body>`document.body.appendChild(el)functiononclick(e){console.log(`${e.target} was clicked`)}
Multiple root elements
If you have more than one root element they will be combined with a DocumentFragment.
varhtml=require('nanohtml')varel=html`<li>Chashu</li><li>Nori</li>`document.querySelector('ul').appendChild(el)
Conditional attributes
Use a javascript object to conditionally add HTML attributes.
varhtml=require('nanohtml')varcustomAttr=isFuzzy ? {'data-hand-feel': 'super-fuzzy'} : {}varel=html`<div${customAttr}></div>`
Static optimizations
Parsing HTML has significant overhead. Being able to parse HTML statically,
ahead of time can speed up rendering to be about twice as fast.
Browserify
From the command line
$ browserify -t nanohtml index.js > bundle.js
Programmatically
varbrowserify=require('browserify')varnanohtml=require('nanohtml')varpath=require('path')varb=browserify(path.join(__dirname,'index.js')).transform(nanohtml)b.bundle().pipe(process.stdout)
In package.json
{
"name": "my-app",
"private": true,
"browserify": {
"transform": [
"nanohtml"
]
},
"dependencies": {
"nanohtml": "^1.0.0"
}
}
Bundling
Webpack
At the time of writing there's no Webpack loader yet. We'd love a contribution!
Babel / Parcel
Add nanohtml to your .babelrc config.
Without options:
{"plugins": ["nanohtml"]}
With options:
{"plugins": [["nanohtml",{"useImport": true}]]}
Options
  • useImport - Set to true to use import statements for injected modules.
By default, require is used.
  • appendChildModule - Import path to a module that contains an appendChild
function. Defaults to "nanohtml/lib/append-child".
Rollup
Use the @rollup/plugin-commonjs plugin with @rollup/plugin-node-resolve. Explicitly import the browser or server entrypoint in your application. E.g.:
import html from 'nanohtml/lib/browser';

Attributions
Shout out to Shama and
Shuhei for their contributions to
Bel,
yo-yoify and
pelo. This module is based on their work, and
wouldn't have been possible otherwise!
See Also
License
MIT
About
🐉 HTML template strings for the Browser with support for Server Side Rendering in Node.
Topics
domelementfrontend
Resources
Readme
MIT license
Activity
Custom properties
Stars
688 stars
Watchers
19 watching
Forks
48 forks
Report repository
Releases
Packages
Used by
Contributors
Languages