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 init posthtml
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-starter to get started.
Ivan Demidov |
Ivan Voischev |
Thank you to all our backers! 🙏 [Become a backer]
FAQs
HTML/XML processor
The npm package posthtml receives a total of 715,698 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
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.