npmpackage.info

Gathering detailed insights and metrics for posthtml

posthtml

PostHTML is a tool to transform HTML/XML with JS plugins

0.16.6

2,949

MIT

JavaScript

24.54 kB

3.2

Installations

npm install posthtml

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Min. Node Version

>=12.0.0

Node Version

16.14.0

NPM Version

8.3.1 Pull Requests

Open

3

Total

235

Closed

51

Merged

181

Issues

Open

15

Total

139

Closed

124

Releases

v0.16.7-beta.0

Updated on Oct 20, 2023

v0.16.7-0

Updated on Oct 20, 2023

v0.16.6

Updated on Feb 25, 2022

v0.16.5

Updated on Jul 28, 2021

v0.16.4

Updated on Jun 11, 2021

v0.16.3

Updated on Jun 10, 2021

View All 21 releases

Languages

JavaScript

HTML

Shell

JavaScript (91.8%)

HTML (7.57%)

Shell (0.62%)

Developer

posthtml

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2,949 Stars

629 Commits

116 Forks

48 Watchers

15 Branches

56 Contributors

Updated on Jul 11, 2025

Maintainers

View All 56 Contributors

Package Meta Information

Latest Version

0.16.6

Package Id

posthtml@0.16.6

Unpacked Size

24.54 kB

Size

8.06 kB

File Count

NPM Version

8.3.1

Node Version

16.14.0

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

posthtml-parser posthtml-render

Dev Dependencies

@commitlint/cli @commitlint/config-angular c8 chai chai-as-promised chai-subset conventional-changelog-cli husky jsdoc-to-markdown lint-staged mocha standard

PostHTML

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.

Dependencies

Name	Status	Description
posthtml-parser		Parser HTML/XML to PostHTMLTree
posthtml-render		Render PostHTMLTree to HTML/XML

Create to your project

1npm init posthtml

Install

1npm i -D posthtml

Usage

API

Sync

1import posthtml from 'posthtml'
2
3const html = `
4  <component>
5    <title>Super Title</title>
6    <text>Awesome Text</text>
7  </component>
8`
9
10const result = posthtml()
11  .use(require('posthtml-custom-elements')())
12  .process(html, { sync: true })
13  .html
14
15console.log(result)

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

1import posthtml from 'posthtml'
2
3const html = `
4  <html>
5    <body>
6      <p class="wow">OMG</p>
7    </body>
8  </html>
9`
10
11posthtml(
12  [
13    require('posthtml-to-svg-tags')(),
14    require('posthtml-extend-attrs')({
15      attrsTree: {
16        '.wow' : {
17          id: 'wow_id',
18          fill: '#4A83B4',
19          'fill-rule': 'evenodd',
20          'font-family': 'Verdana'
21        }
22      }
23    })
24  ])
25  .process(html/*, options */)
26  .then((result) =>  console.log(result.html))

1<svg xmlns="http://www.w3.org/2000/svg">
2  <text
3    class="wow"
4    id="wow_id"
5    fill="#4A83B4"
6    fill-rule="evenodd" font-family="Verdana">
7      OMG
8  </text>
9</svg>

Directives

1import posthtml from 'posthtml'
2
3const php = `
4  <component>
5    <title><?php echo $title; ?></title>
6    <text><?php echo $article; ?></text>
7  </component>
8`
9
10const result = posthtml()
11  .use(require('posthtml-custom-elements')())
12  .process(html, {
13    directives: [
14      { name: '?php', start: '<', end: '>' }
15    ]
16  })
17  .html
18
19console.log(result)

1<div class="component">
2  <div class="title"><?php echo $title; ?></div>
3  <div class="text"><?php echo $article; ?></div>
4</div>

CLI

1npm i posthtml-cli

1"scripts": {
2  "posthtml": "posthtml -o output.html -i input.html -c config.json"
3}

1npm run posthtml

Gulp

1npm i -D gulp-posthtml

1import tap from 'gulp-tap'
2import posthtml from 'gulp-posthtml'
3import { task, src, dest } from 'gulp'
4
5task('html', () => {
6  let path
7
8  const plugins = [ require('posthtml-include')({ root: `${path}` }) ]
9  const options = {}
10
11  src('src/**/*.html')
12    .pipe(tap((file) => path = file.path))
13    .pipe(posthtml(plugins, options))
14    .pipe(dest('build/'))
15})

Check project-stub for an example with Gulp

Grunt

1npm i -D grunt-posthtml

1posthtml: {
2  options: {
3    use: [
4      require('posthtml-doctype')({ doctype: 'HTML 5' }),
5      require('posthtml-include')({ root: './', encoding: 'utf-8' })
6    ]
7  },
8  build: {
9    files: [
10      {
11        dot: true,
12        cwd: 'html/',
13        src: ['*.html'],
14        dest: 'tmp/',
15        expand: true,
16      }
17    ]
18  }
19}

Webpack

1npm i -D html-loader posthtml-loader

v1.x

webpack.config.js

1const config = {
2  module: {
3    loaders: [
4      {
5        test: /\.html$/,
6        loader: 'html!posthtml'
7      }
8    ]
9  },
10  posthtml: (ctx) => ({
11    parser: require('posthtml-pug'),
12    plugins: [
13      require('posthtml-bem')()
14    ]
15  })
16}
17
18export default config

v2.x

webpack.config.js

1import { LoaderOptionsPlugin } from 'webpack'
2
3const config = {
4  module: {
5    rules: [
6      {
7        test: /\.html$/,
8        use: [
9          {
10            loader: 'html-loader',
11            options: { minimize: true }
12          },
13          {
14            loader: 'posthtml-loader'
15          }
16        ]
17      }
18    ]
19  },
20  plugins: [
21    new LoaderOptionsPlugin({
22      options: {
23        posthtml(ctx) {
24          return {
25            parser: require('posthtml-pug'),
26            plugins: [
27              require('posthtml-bem')()
28            ]
29          }
30        }
31      }
32    })
33  ]
34}
35
36export default config

Rollup

1$ npm i rollup-plugin-posthtml -D
2# or
3$ npm i rollup-plugin-posthtml-template -D

1import { join } from 'path';
2
3import posthtml from 'rollup-plugin-posthtml-template';
4// or
5// import posthtml from 'rollup-plugin-posthtml';
6
7import sugarml from 'posthtml-sugarml';  // npm i posthtml-sugarml -D
8import include from 'posthtml-include';  // npm i posthtml-include -D
9
10export default {
11  entry: join(__dirname, 'main.js'),
12  dest: join(__dirname, 'bundle.js'),
13  format: 'iife',
14  plugins: [
15    posthtml({
16      parser: sugarml(),
17      plugins: [include()],
18      template: true  // only rollup-plugin-posthtml-template
19    })
20  ]
21};

Parser

1import pug from 'posthtml-pug'
2
3posthtml().process(html, { parser: pug(options) }).then((result) => result.html)

Name	Status	Description
posthtml-pug		Pug Parser
sugarml		SugarML Parser

Plugins

In case you want to develop your own plugin, we recommend using posthtml-plugin-starter to get started.

Maintainers

Ivan Demidov

Ivan Voischev

Contributors

Backers

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

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

4

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

2

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

3.2

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to posthtml

Other packages similar to posthtml

posthtml

Installations

Developer Guide

Yes

CommonJS

>=12.0.0

16.14.0

8.3.1

Pull Requests

3

235

51

181

Issues

15

139

124

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

PostHTML

Dependencies

Create to your project

Install

Usage

API

CLI

Gulp

Grunt

Webpack

v1.x

v2.x

Rollup

Parser

Plugins

Maintainers

Contributors

Backers

10

10

10

4

2

0

0

0

0

0

0

0

3.2

/10