PostHTML is a tool for transforming HTML/XML with JavaScript plugins. It allows you to process HTML files using a variety of plugins to perform tasks such as minification, templating, and more.
HTML Transformation
This feature allows you to transform HTML elements. In this example, all <div> tags are transformed into <span> tags.
const posthtml = require('posthtml');
const html = '<div class="foo">Hello World</div>';
posthtml()
.use(tree => {
tree.match({ tag: 'div' }, node => {
node.tag = 'span';
return node;
});
})
.process(html)
.then(result => console.log(result.html));HTML Minification
This feature allows you to minify HTML content. The example demonstrates how to collapse whitespace in the HTML string.
const posthtml = require('posthtml');
const html = '<div class="foo"> Hello World </div>';
const posthtmlMinifier = require('posthtml-minifier');
posthtml([posthtmlMinifier({ collapseWhitespace: true })])
.process(html)
.then(result => console.log(result.html));Templating
This feature allows you to use templating within your HTML. The example shows how to replace a placeholder with a dynamic value.
const posthtml = require('posthtml');
const expressions = require('posthtml-expressions');
const html = '<div>{{ message }}</div>';
posthtml([expressions({ locals: { message: 'Hello World' } })])
.process(html)
.then(result => console.log(result.html));html-minifier is a highly configurable, well-tested, JavaScript-based HTML minifier. It focuses on minifying HTML content, similar to the minification feature in PostHTML, but does not offer the same level of extensibility with plugins.
Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It allows you to manipulate HTML and XML documents with a jQuery-like syntax. While it offers powerful DOM manipulation capabilities, it does not provide the same plugin-based architecture as PostHTML.
jsdom is a JavaScript implementation of the WHATWG DOM and HTML standards, primarily intended for use with Node.js. It allows you to create and manipulate a DOM tree, similar to PostHTML, but is more focused on providing a complete DOM environment rather than a plugin-based transformation system.
PostHTML is a tool for transforming HTML/XML with JS plugins. PostHTML itself is very small. It includes only a HTML parser, a HTML node tree API and a node tree stringifier.
All HTML transformations are made by plugins. And these plugins are just small plain JS functions, which receive a HTML node tree, transform it, and return a modified tree.
For more detailed information about PostHTML in general take a look at the docs.
| Name | Status | Description |
|---|---|---|
| posthtml-parser |  | Parser HTML/XML to PostHTMLTree |
| posthtml-render |  | Render PostHTMLTree to HTML/XML |
npm i -D posthtml
Sync
import posthtml from 'posthtml'
const html = `
<component>
<title>Super Title</title>
<text>Awesome Text</text>
</component>
`
const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, { sync: true })
.html
console.log(result)
<div class="component">
<div class="title">Super Title</div>
<div class="text">Awesome Text</div>
</div>
:warning: Async Plugins can't be used in sync mode and will throw an Error. It's recommended to use PostHTML asynchronously whenever possible.
Async
import posthtml from 'posthtml'
const html = `
<html>
<body>
<p class="wow">OMG</p>
</body>
</html>
`
posthtml(
[
require('posthtml-to-svg-tags')(),
require('posthtml-extend-attrs')({
attrsTree: {
'.wow' : {
id: 'wow_id',
fill: '#4A83B4',
'fill-rule': 'evenodd',
'font-family': 'Verdana'
}
}
})
])
.process(html/*, options */)
.then((result) => console.log(result.html))
<svg xmlns="http://www.w3.org/2000/svg">
<text
class="wow"
id="wow_id"
fill="#4A83B4"
fill-rule="evenodd" font-family="Verdana">
OMG
</text>
</svg>
Directives
import posthtml from 'posthtml'
const php = `
<component>
<title><?php echo $title; ?></title>
<text><?php echo $article; ?></text>
</component>
`
const result = posthtml()
.use(require('posthtml-custom-elements')())
.process(html, {
directives: [
{ name: '?php', start: '<', end: '>' }
]
})
.html
console.log(result)
<div class="component">
<div class="title"><?php echo $title; ?></div>
<div class="text"><?php echo $article; ?></div>
</div>
npm i posthtml-cli
"scripts": {
"posthtml": "posthtml -o output.html -i input.html -c config.json"
}
npm run posthtml
npm i -D gulp-posthtml
import tap from 'gulp-tap'
import posthtml from 'gulp-posthtml'
import { task, src, dest } from 'gulp'
task('html', () => {
let path
const plugins = [ require('posthtml-include')({ root: `${path}` }) ]
const options = {}
src('src/**/*.html')
.pipe(tap((file) => path = file.path))
.pipe(posthtml(plugins, options))
.pipe(dest('build/'))
})
Check project-stub for an example with Gulp
npm i -D grunt-posthtml
posthtml: {
options: {
use: [
require('posthtml-doctype')({ doctype: 'HTML 5' }),
require('posthtml-include')({ root: './', encoding: 'utf-8' })
]
},
build: {
files: [
{
dot: true,
cwd: 'html/',
src: ['*.html'],
dest: 'tmp/',
expand: true,
}
]
}
}
npm i -D html-loader posthtml-loader
webpack.config.js
const config = {
module: {
loaders: [
{
test: /\.html$/,
loader: 'html!posthtml'
}
]
},
posthtml: (ctx) => ({
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
})
}
export default config
webpack.config.js
import { LoaderOptionsPlugin } from 'webpack'
const config = {
module: {
rules: [
{
test: /\.html$/,
use: [
{
loader: 'html-loader',
options: { minimize: true }
},
{
loader: 'posthtml-loader'
}
]
}
]
},
plugins: [
new LoaderOptionsPlugin({
options: {
posthtml(ctx) {
return {
parser: require('posthtml-pug'),
plugins: [
require('posthtml-bem')()
]
}
}
}
})
]
}
export default config
$ npm i rollup-plugin-posthtml -D
# or
$ npm i rollup-plugin-posthtml-template -D
import { join } from 'path';
import posthtml from 'rollup-plugin-posthtml-template';
// or
// import posthtml from 'rollup-plugin-posthtml';
import sugarml from 'posthtml-sugarml'; // npm i posthtml-sugarml -D
import include from 'posthtml-include'; // npm i posthtml-include -D
export default {
entry: join(__dirname, 'main.js'),
dest: join(__dirname, 'bundle.js'),
format: 'iife',
plugins: [
posthtml({
parser: sugarml(),
plugins: [include()],
template: true // only rollup-plugin-posthtml-template
})
]
};
import pug from 'posthtml-pug'
posthtml().process(html, { parser: pug(options) }).then((result) => result.html)
| Name | Status | Description |
|---|---|---|
| posthtml-pug |  | Pug Parser |
| sugarml |  | SugarML Parser |
In case you want to develop your own plugin, we recommend using posthtml-plugin-boilerplate to get started.
| Name | Status | Description |
|---|---|---|
| posthtml-md |  | Easily use context-sensitive markdown within HTML |
| posthtml-toc |  | Table of contents |
| posthtml-lorem |  | Add lorem ipsum placeholder text to any document |
| posthtml-retext |  | Extensible system for analysing and manipulating natural language |
| prevent-widows |  | Prevent widows from appearing at the end of paragraphs |
| posthtml-richtypo |  | Process HTML node text with Richtypo |
| Name | Status | Description |
|---|---|---|
| posthtml-doctype |  | Set !DOCTYPE |
| posthtml-head-elements |  | Include head elements from JSON file |
| posthtml-include |  | Include HTML |
| posthtml-modules |  | Include and process HTML |
| posthtml-extend |  | Extend Layout (Pug-like) |
| posthtml-extend-attrs |  | Extend Attrs |
| posthtml-expressions |  | Template Expressions |
| posthtml-inline-assets |  | Inline external scripts, styles, and images |
| posthtml-static-react |  | Render custom elements as static React components |
| posthtml-custom-elements |  | Use custom elements |
| posthtml-web-component |  | Web Component server-side rendering, Component as a Service (CaaS) |
| posthtml-spaceless |  | Remove whitespace between HTML tags |
| posthtml-cache |  | Add a nanoid to links in your tags |
| posthtml-highlight |  | Syntax highlight code elements |
| posthtml-pseudo |  | Add pseudo selector class names to elements |
| posthtml-noopener |  | Add rel="noopener noreferrer" to links that open in new tab |
| posthtml-noscript |  | Insert noscript content when JavaScript is disabled |
| posthtml-hash |  | Hash static CSS/JS assets |
| posthtml-insert-at |  | Append/prepend HTML to a selector |
| posthtml-plugin-remove-duplicates |  | Remove duplicated tags |
| posthtml-plugin-link-preload |  | Add preload/prefetch tags (or return equivalent headers) |
| posthtml-prism |  | Code syntax highlighting with Prism |
| posthtml-url-parameters |  | Add parameters to URLs |
| posthtml-safe-class-names |  | Replace escaped characters in class names and CSS selectors |
| posthtml-fetch |  | Fetch and render remote content |
| posthtml-mso |  | Makes it easy to write Outlook conditionals in HTML emails |
| posthtml-postcss-merge-longhand |  | Merge longhand inline CSS into shorthand |
| posthtml-markdownit |  | Transform Markdown using markdown-it |
| posthtml-extra-attributes |  | Add new attributes to elements in your HTML |
| Name | Status | Description |
|---|---|---|
| posthtml-bem |  | Support BEM naming in html structure |
| posthtml-postcss |  | Use PostCSS in HTML document |
| posthtml-px2rem |  | Change px to rem in Inline CSS |
| posthtml-css-modules |  | Use CSS modules in HTML |
| posthtml-postcss-modules |  | CSS Modules in html |
| posthtml-classes |  | Get a list of classes from HTML |
| posthtml-prefix-class |  | Prefix class names |
| posthtml-modular-css |  | Make CSS modular |
| posthtml-inline-css |  | CSS Inliner |
| posthtml-collect-styles |  | Collect styles from html and put it in the head |
| posthtml-collect-inline-styles |  | Collect inline styles and insert to head tag |
| posthtml-style-expantion |  | PostHTML plugin expand link rel="stylesheet". |
| posthtml-style-to-file |  | Save HTML style nodes and attributes to CSS file |
| posthtml-color-shorthand-hex-to-six-digit |  | Enforce all hex color codes to be 6-char long |
| posthtml-minify-classnames |  | Rewrites classnames and ids inside of html and css files to reduce file size. |
| Name | Status | Description |
|---|---|---|
| posthtml-img-autosize |  | Auto setting the width and height of <img> |
| posthtml-to-svg-tags |  | Convert html tags to svg equivalents |
| posthtml-webp |  | Add WebP support for images |
| posthtml-favicons |  | Generate Favicons and add related tags |
| posthtml-inline-svg |  | Inline svg icons in HTML |
| posthtml-inline-favicon |  | Inline favicons in HTML |
| Name | Status | Description |
|---|---|---|
| posthtml-aria-tabs |  | Write accessible tabs with minimal markup |
| posthtml-alt-always |  | Always add alt attribute for images that don't have it |
| posthtml-schemas |  | Add microdata to your HTML |
| Name | Status | Description |
|---|---|---|
| posthtml-shorten |  | Shorten URLs in HTML |
| posthtml-uglify |  | Shorten CSS in HTML |
| posthtml-minifier |  | Minify HTML |
| posthtml-remove-attributes |  | Remove attributes unconditionally or with content match |
| posthtml-remove-tags |  | Remove tags with content match |
| posthtml-remove-duplicates |  | Remove duplicate elements from your html |
| posthtml-transformer |  | Process HTML by directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc. |
| htmlnano |  | HTML Minifier |
| posthtml-link-noreferrer |  | Add rel="noopener" and rel="noreferrer" to all links that contain the attribute target="_blank" |
| posthtml-lazyload | | Add native lazyload attribute |
| posthtml-postcss-treeshaker |  | Tree shake styles for classes and ids in style tag |
| Name | Status | Description |
|---|---|---|
| posthtml-load-plugins |  | Autoload Plugins |
| posthtml-load-options |  | Autoload Options (Parser && Render) |
| posthtml-load-config |  | Autoload Config (Plugins && Options) |
| posthtml-w3c |  | Validate HTML with W3C Validation |
| posthtml-hint |  | Lint HTML with HTML Hint |
| posthtml-tidy |  | Sanitize HTML with HTML Tidy |
| Name | Status | Description |
|---|---|---|
| koa-posthtml |  | Koa Middleware |
| hapi-posthtml |  | Hapi Plugin |
| express-posthtml |  | Express Middleware |
| electron-posthtml |  | Electron Plugin |
| metalsmith-posthtml |  | Metalsmith Plugin |
Ivan Demidov |
Ivan Voischev |
See PostHTML Guidelines and CONTRIBUTING.
FAQs
HTML/XML processor
The npm package posthtml receives a total of 262,001 weekly downloads. As such, posthtml popularity was classified as popular.
We found that posthtml demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.