Nondeterministic Programming Methodology

    TypeScript icon, indicating that this package has built-in type declarations

    0.16.5 • Public • Published

    NPM Deps Tests Coverage Standard Code Style Twitter


    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

    Create to your project

    npm init posthtml


    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-starter 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
    posthtml-sri npm Adds subresource integrity (SRI) attributes.


    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.

    IMG & SVG

    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
    posthtml-external-link npm Add rel="external noopenner nofollow" and target="_blank" to all external links


    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.



    Thank you to all our backers! 🙏 [Become a backer]




    npm i posthtml


    DownloadsWeekly Downloads






    Unpacked Size

    97.7 kB

    Total Files


    Last publish


    • voischev
    • scrum