Super Title

# posthtml > HTML/XML processor Latest version **0.16.7** (published 2025-10-14) · MIT license · 0 weekly downloads ## Install ```sh npm install posthtml pnpm add posthtml yarn add posthtml bun add posthtml ``` ## Health **Score 55/100 (C)** — status: stable. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support; pre 1.0. ## Facts | | | |---|---| | Version | 0.16.7 | | Published | 2025-10-14 | | First published | 2015-06-29 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=12.0.0 | | Dependencies | 2 | | Unpacked size | 22.9 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2960 | | Author | Ivan Voischev | | Maintainers | voischev, scrum | | Keywords | html, xml, postproccessor, parser, transform, transformations, manipulation, preprocessor, processor | ## Links - npm: https://www.npmjs.com/package/posthtml - Repository: https://github.com/posthtml/posthtml - Issues: https://github.com/posthtml/posthtml/issues - npm.io page: https://npm.io/package/posthtml ## Dependencies (2) - [posthtml-parser](https://npm.io/package/posthtml-parser.md) ^0.11.0 - [posthtml-render](https://npm.io/package/posthtml-render.md) ^3.0.0 ## Alternatives - [babylon](https://npm.io/package/babylon.md) — 5.1M weekly downloads - [csscolorparser](https://npm.io/package/csscolorparser.md) — 3.7M weekly downloads - [expr-eval-fork](https://npm.io/package/expr-eval-fork.md) — 1.5M weekly downloads - [@leeoniya/ufuzzy](https://npm.io/package/@leeoniya/ufuzzy.md) — 247.7K weekly downloads - [xml-parser](https://npm.io/package/xml-parser.md) — 78.4K weekly downloads ## Recent versions - 0.16.7 (latest) — 2025-10-14 - 0.16.7-beta.0 (beta) — 2023-10-20 - 0.16.7-0 — 2023-10-20 - 0.16.6 — 2022-02-25 - 0.16.5 — 2021-07-28 - 0.16.4 — 2021-06-11 - 0.16.3 — 2021-06-10 - 0.16.2 — 2021-06-08 - 0.16.1 — 2021-06-04 - 0.16.0 — 2021-06-03 - 0.15.2 — 2021-04-13 - 0.15.1 — 2020-11-26 - 0.15.0 — 2020-11-24 - 0.14.0 — 2020-11-16 - 0.13.4 — 2020-10-15 - … 41 more at https://npm.io/package/posthtml/versions ## README # 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](https://github.com/posthtml/posthtml/tree/master/docs). ### Dependencies | Name | Description | |:----:|:-----------:| |[posthtml-parser](https://github.com/posthtml/posthtml-parser)| Parser HTML/XML to PostHTMLTree | |[posthtml-render](https://github.com/posthtml/posthtml-render)| Render PostHTMLTree to HTML/XML | ## Create to your project ```bash npm init posthtml ``` ## Install ```bash npm i -D posthtml ``` ## Usage ### API **Sync** ```js import posthtml from 'posthtml' const html = ` Super Title Awesome Text ` const result = posthtml() .use(require('posthtml-custom-elements')()) .process(html, { sync: true }) .html console.log(result) ``` ```html

Super Title

Awesome Text

``` > :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** ```js import posthtml from 'posthtml' const html = `

OMG

` 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)) ``` ```html ``` **Directives** ```js import posthtml from 'posthtml' const php = ` <?php echo $title; ?> ` const result = posthtml() .use(require('posthtml-custom-elements')()) .process(html, { directives: [ { name: '?php', start: '<', end: '>' } ] }) .html console.log(result) ``` ```html

``` ### [CLI](https://npmjs.com/package/posthtml-cli) ```bash npm i posthtml-cli ``` ```json "scripts": { "posthtml": "posthtml -o output.html -i input.html -c config.json" } ``` ```bash npm run posthtml ``` ### [Gulp](https://gulpjs.com) ```bash npm i -D gulp-posthtml ``` ```js 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](https://github.com/posthtml/project-stub) for an example with Gulp ### [Grunt](https://gruntjs.com) ```bash npm i -D grunt-posthtml ``` ```js 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, } ] } } ``` ### [Webpack](https://webpack.js.org) ```bash npm i -D html-loader posthtml-loader ``` #### v1.x **webpack.config.js** ```js const config = { module: { loaders: [ { test: /\.html$/, loader: 'html!posthtml' } ] }, posthtml: (ctx) => ({ parser: require('posthtml-pug'), plugins: [ require('posthtml-bem')() ] }) } export default config ``` #### v2.x **webpack.config.js** ```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 ``` ### [Rollup](https://rollupjs.org/) ```bash $ npm i rollup-plugin-posthtml -D # or $ npm i rollup-plugin-posthtml-template -D ``` ```js 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 }) ] }; ``` ## Parser ```js import pug from 'posthtml-pug' posthtml().process(html, { parser: pug(options) }).then((result) => result.html) ``` | Name |Description| |:-----|:----------| |[posthtml-pug](https://github.com/posthtml/posthtml-pug)|Pug Parser| |[sugarml](https://github.com/posthtml/sugarml)|SugarML Parser| ## Plugins In case you want to develop your own plugin, we recommend using [posthtml-plugin-starter][plugin] to get started. - [posthtml-plugins](http://maltsev.github.io/posthtml-plugins) - [awesome-posthtml](https://github.com/posthtml/awesome-posthtml) [plugin]: https://github.com/posthtml/posthtml-plugin-starter ## Maintainers

Ivan Demidov

Ivan Voischev

## Contributors

## Backers Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/posthtml#backer)]

[chat]: https://badges.gitter.im/posthtml/PostHTML.svg [chat-url]: https://gitter.im/posthtml/posthtml?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge" --- _Source: https://npm.io/package/posthtml · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._