HTML/XML processor
Last updated 15 days ago by scrum .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install posthtml 
SYNC missed versions from official npm registry.

NPM Deps Tests Coverage Standard Code Style Twitter Chat


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 npm Parser HTML/XML to PostHTMLTree
posthtml-render npm Render PostHTMLTree to HTML/XML


npm i -D posthtml




import posthtml from 'posthtml'

const html = `
    <title>Super Title</title>
    <text>Awesome Text</text>

const result = posthtml()
  .process(html, { sync: true })

<div class="component">
  <div class="title">Super Title</div>
  <div class="text">Awesome Text</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.


import posthtml from 'posthtml'

const html = `
      <p class="wow">OMG</p>

      attrsTree: {
        '.wow' : {
          id: 'wow_id',
          fill: '#4A83B4',
          'fill-rule': 'evenodd',
          'font-family': 'Verdana'
  .process(html/*, options */)
  .then((result) =>  console.log(result.html))
<svg xmlns="">
    fill-rule="evenodd" font-family="Verdana">


import posthtml from 'posthtml'

const php = `
    <title><?php echo $title; ?></title>
    <text><?php echo $article; ?></text>

const result = posthtml()
  .process(html, {
    directives: [
      { name: '?php', start: '<', end: '>' }

<div class="component">
  <div class="title"><?php echo $title; ?></div>
  <div class="text"><?php echo $article; ?></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 = {}

    .pipe(tap((file) => path = file.path))
    .pipe(posthtml(plugins, options))

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



const config = {
  module: {
    loaders: [
        test: /\.html$/,
        loader: 'html!posthtml'
  posthtml: (ctx) => ({
    parser: require('posthtml-pug'),
    plugins: [

export default config



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: [

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: [
      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 npm Pug Parser
sugarml npm 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 npm Easily use context-sensitive markdown within HTML
posthtml-toc npm Table of contents
posthtml-lorem npm Add lorem ipsum placeholder text to any document
posthtml-retext npm Extensible system for analysing and manipulating natural language
prevent-widows npm Prevent widows from appearing at the end of paragraphs
posthtml-richtypo npm Process HTML node text with Richtypo


Name Status Description
posthtml-doctype npm Set !DOCTYPE
posthtml-head-elements npm Include head elements from JSON file
posthtml-include npm Include HTML
posthtml-modules npm Include and process HTML
posthtml-extend npm Extend Layout (Pug-like)
posthtml-extend-attrs npm Extend Attrs
posthtml-expressions npm Template Expressions
posthtml-inline-assets npm Inline external scripts, styles, and images
posthtml-static-react npm Render custom elements as static React components
posthtml-custom-elements npm Use custom elements
posthtml-web-component npm Web Component server-side rendering, Component as a Service (CaaS)
posthtml-spaceless npm Remove whitespace between HTML tags
posthtml-cache npm Add a nanoid to links in your tags
posthtml-highlight npm Syntax highlight code elements
posthtml-pseudo npm Add pseudo selector class names to elements
posthtml-noopener npm Add rel="noopener noreferrer" to links that open in new tab
posthtml-noscript npm Insert noscript content when JavaScript is disabled
posthtml-hash npm Hash static CSS/JS assets
posthtml-insert-at npm Append/prepend HTML to a selector
posthtml-plugin-remove-duplicates npm Remove duplicated tags
posthtml-plugin-link-preload npm Add preload/prefetch tags (or return equivalent headers)
posthtml-prism npm Code syntax highlighting with Prism
posthtml-url-parameters npm Add parameters to URLs
posthtml-safe-class-names npm Replace escaped characters in class names and CSS selectors
posthtml-fetch npm Fetch and render remote content
posthtml-mso npm Makes it easy to write Outlook conditionals in HTML emails
posthtml-postcss-merge-longhand npm Merge longhand inline CSS into shorthand
posthtml-markdownit npm Transform Markdown using markdown-it
posthtml-extra-attributes npm Add new attributes to elements in your HTML


Name Status Description
posthtml-bem npm Support BEM naming in html structure
posthtml-postcss npm Use PostCSS in HTML document
posthtml-px2rem npm Change px to rem in Inline CSS
posthtml-css-modules npm Use CSS modules in HTML
posthtml-postcss-modules npm CSS Modules in html
posthtml-classes npm Get a list of classes from HTML
posthtml-prefix-class npm Prefix class names
posthtml-modular-css npm Make CSS modular
posthtml-inline-css npm CSS Inliner
posthtml-collect-styles npm Collect styles from html and put it in the head
posthtml-collect-inline-styles npm Collect inline styles and insert to head tag
posthtml-style-expantion npm PostHTML plugin expand link rel="stylesheet".
posthtml-style-to-file npm Save HTML style nodes and attributes to CSS file
posthtml-color-shorthand-hex-to-six-digit npm Enforce all hex color codes to be 6-char long
posthtml-minify-classnames npm Rewrites classnames and ids inside of html and css files to reduce file size.


Name Status Description
posthtml-img-autosize npm Auto setting the width and height of <img>
posthtml-to-svg-tags npm Convert html tags to svg equivalents
posthtml-webp npm Add WebP support for images
posthtml-favicons npm Generate Favicons and add related tags
posthtml-inline-svg npm Inline svg icons in HTML
posthtml-inline-favicon npm Inline favicons in HTML


Name Status Description
posthtml-aria-tabs npm Write accessible tabs with minimal markup
posthtml-alt-always npm Always add alt attribute for images that don't have it
posthtml-schemas npm Add microdata to your HTML


Name Status Description
posthtml-shorten npm Shorten URLs in HTML
posthtml-uglify npm Shorten CSS in HTML
posthtml-minifier npm Minify HTML
posthtml-remove-attributes npm Remove attributes unconditionally or with content match
posthtml-remove-tags npm Remove tags with content match
posthtml-remove-duplicates npm Remove duplicate elements from your html
posthtml-transformer npm Process HTML by directives in node attrs, such as inline scripts and styles, remove useless tags, concat scripts and styles etc.
htmlnano npm HTML Minifier
posthtml-link-noreferrer npm Add rel="noopener" and rel="noreferrer" to all links that contain the attribute target="_blank"
posthtml-lazyload npm Add native lazyload attribute
posthtml-postcss-treeshaker npm Tree shake styles for classes and ids in style tag


Name Status Description
posthtml-load-plugins npm Autoload Plugins
posthtml-load-options npm Autoload Options (Parser && Render)
posthtml-load-config npm Autoload Config (Plugins && Options)
posthtml-w3c npm Validate HTML with W3C Validation
posthtml-hint npm Lint HTML with HTML Hint
posthtml-tidy npm Sanitize HTML with HTML Tidy


Name Status Description
koa-posthtml npm Koa Middleware
hapi-posthtml npm Hapi Plugin
express-posthtml npm Express Middleware
electron-posthtml npm Electron Plugin
metalsmith-posthtml npm Metalsmith Plugin


Ivan Demidov

Ivan Voischev


See PostHTML Guidelines and CONTRIBUTING.




Current Tags

  • 0.13.1                                ...           latest (15 days ago)

39 Versions

  • 0.13.1                                ...           15 days ago
  • 0.13.0                                ...           2 months ago
  • 0.12.3                                ...           3 months ago
  • 0.12.2                                ...           3 months ago
  • 0.12.1                                ...           3 months ago
  • 0.12.0                                ...           9 months ago
  • 0.11.6                                ...           10 months ago
  • 0.11.5                                ...           10 months ago
  • 0.11.4                                ...           a year ago
  • 0.11.3                                ...           2 years ago
  • 0.11.2                                ...           2 years ago
  • 0.11.1                                ...           2 years ago
  • 0.11.0                                ...           3 years ago
  • 0.10.1                                ...           3 years ago
  • 0.10.0                                ...           3 years ago
  • 0.9.2                                ...           3 years ago
  • 0.9.1                                ...           4 years ago
  • 0.9.0                                ...           4 years ago
  • 0.8.7                                ...           4 years ago
  • 0.8.6                                ...           4 years ago
  • 0.8.5                                ...           4 years ago
  • 0.8.4                                ...           4 years ago
  • 0.8.3                                ...           4 years ago
  • 0.8.2                                ...           4 years ago
  • 0.8.1                                ...           4 years ago
  • 0.8.0                                ...           5 years ago
  • 0.7.0                                ...           5 years ago
  • 0.6.0                                ...           5 years ago
  • 0.5.0                                ...           5 years ago
  • 0.4.1                                ...           5 years ago
  • 0.4.0                                ...           5 years ago
  • 0.3.0                                ...           5 years ago
  • 0.2.1                                ...           5 years ago
  • 0.2.0                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
Today 76
This Week 4,544
This Month 21,759
Last Day 4,468
Last Week 26,964
Last Month 107,903
Dependencies (2)
Dev Dependencies (9)
Dependents (246)

Copyright 2014 - 2017 © |