Skip to content
PostHTML is a tool to transform HTML/XML with JS plugins
Branch: master
Clone or download
Scrum Merge pull request #278 from posthtml/Scrum-patch-1
[docs]: Broken links in README
Latest commit bb372a8 Feb 19, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github style: change my login ) Jun 18, 2018
docs Clarify code a little Oct 18, 2018
lib style: change function name ) Feb 11, 2018
test test(options): if tree not object Feb 9, 2018
.editorconfig chore(dotfiles): update .editorconfig, .gitignore, .npmignore && .mve… Aug 13, 2016
.gitignore no message Oct 5, 2016
.npmignore chore(npmignore): rm Aug 26, 2016
.travis.yml chore(changelog): fix version Feb 16, 2018
LICENSE Add LICENSE Nov 28, 2017 docs: remove posthtml-email-remove-unused-css Feb 18, 2019
logo.svg chore(*): add logo.svg Sep 30, 2015
package-lock.json chore(release): again Feb 16, 2018
package.json chore(package): support Object assign fro old node Feb 2, 2018

NPM Deps Tests Coverage Standard Code Style 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>

⚠️ 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 for getting started.


Name Status Description
posthtml-md npm Easily use context-sensitive markdown within HTML
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


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 you tags
posthtml-highlight npm Syntax highlight code elements


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


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 equals
posthtml-webp npm Add WebP support for images
posthtml-favicons npm Generate Favicons and add related tags


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


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 Voischev

Anton Winogradov

Alexej Yaroshevich



See PostHTML Guidelines and CONTRIBUTING.



You can’t perform that action at this time.