htmlfy

HTML formatter yo! Prettify, minify and more!

htmlfy is a fork of html-formatter. A lot of the processing logic has been preserved, and full credit for that goes to the original author. I've made the following major enhancements.

Fully typed.
Converted to ESM.
Added configuration options.
Added support for custom HTML elements (web components)
Lots of refactoring.
Made it go brrr fast.

Install

npm install htmlfy

API

Most projects will only need to use prettify and/or minify.

Prettify

Turn single-line or ugly HTML into highly formatted HTML. This is a wrapper for all other functions, except trimify, and then it adds indentation.

import { prettify } from 'htmlfy'

const html = `<main class="hello   there world"><div>Welcome to htmlfy!  </div></main>`
console.log(prettify(html))
/*
<main class="hello there world">
  <div>
    Welcome to htmlfy!
  </div>
</main>
*/

Minify

Turn well-formatted or ugly HTML into a single line of HTML.

This feature is not a replacement for compressors like htmlnano, which focus on giving you the smallest data-size possible; but rather, it simply removes tabs, returns, and redundant whitespace.

import { minify } from 'htmlfy'

const html = 
`<main class="hello there world">
  <div>
    Welcome to htmlfy!
  </div>
</main>`
console.log(minify(html))
/*
<main class="hello there world"><div>Welcome to htmlfy!</div></main>
*/

Closify

This is done when using prettify, but you can use it in a one-off scenario if needed.

Ensure void elements are "self-closing".

import { closify } from 'htmlfy'

const html = `<br><input type="text">`
console.log(closify(html))
/*
<br /><input type="text" />
*/

Entify

This is done when using prettify, but you can use it in a one-off scenario if needed.

Enforce entity characters for textarea content. This also performs basic minification on textareas before setting entities. When running this function as a standalone, you'll likely want to pass minify as true for full minification of the textarea. The minification does not process any other tags.

import { entify } from 'htmlfy'

const html = `<main class="hello   there world"><div>Welcome to htmlfy!  </div></main><textarea  >

Did   you know that 3 >   2?

This is another paragraph.   


</textarea><textarea class="  more  stuff  ">    </textarea>`
console.log(entify(html, true))
/*
<main class="hello   there world"><div>Welcome to htmlfy!  </div></main><textarea>Did you know that 3 &gt; 2?&#13;&#13;This is another paragraph.</textarea><textarea class="more stuff"></textarea>
*/

Trimify

Trim leading and trailing whitespace for whatever HTML element(s) you'd like. This is a standalone function, which is not run with prettify by default.

import { trimify } from 'htmlfy'

const html = `<div>
Hello World
</div>`
console.log(trimify(html, [ 'div' ]))
/* <div>Hello World</div> */

Default Import

If needed, you can use a default import for htmlfy.

import * as htmlfy from 'htmlfy'

console.log(htmlfy.prettify('<main><div>Hello World</div></main'))

Common JS Import

Although meant to be an ESM module, you can import using require.

const { prettify } = require('htmlfy')

Configuration

These configuration options can only be passed to prettify.

Default config:

{
  content_wrap: 0,
  ignore: [],
  ignore_with: '_!i-£___£%_',
  strict: false,
  tab_size: 2,
  tag_wrap: 0,
  trim: []
}

Content Wrap

Wrap text content at a certain character-width breakpoint. Default is 0, which does not wrap.

import { prettify } from 'htmlfy'

const html = '<div>Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.</div>'
console.log(prettify(html, { content_wrap: 40 }))
/*
<div>
  Lorem ipsum dolor sit amet consectetur
  adipiscing elit. Quisque faucibus ex
  sapien vitae pellentesque sem placerat.
  In id cursus mi pretium tellus duis
  convallis.
</div>
*/

Ignore

Tell htmlfy to not process some elements and leave them as-is.

import { prettify } from 'htmlfy'

const html = `
<main><div>Hello World</div></main>
<style>
body {
  width: 100
}
</style>`
console.log(prettify(html, { ignore: [ 'style' ] }))
/*
<main>
  <div>
    Hello World
  </div>
</main>
<style>
body {
  width: 100;
}
</style>
*/

Ignore With

You can pass in your own string, for ignoring elements, if the default is actually being used in your ignored elements.

prettify(html, { ignore: [ 'p' ], ignore_with: 'some-string-that-wont-be-in-your-ignored-elements' })

Strict

If set to true, removes comments and ensures void elements are not self-closing.

import { prettify } from 'htmlfy'

const html = `<main><br /><div><!-- Hello World --></div></main>`
console.log(prettify(html, { strict: true }))
/*
<main>
  <br>
  <div></div>
</main>
*/

Tab Size

Determines the number of spaces, per tab, for indentation. For sanity reasons, the valid range is between 1 and 16.

import { prettify } from 'htmlfy'

const html = `<main class="hello   there world"><div>Welcome to htmlfy!  </div></main>`
console.log(prettify(html, { tab_size: 4 }))
/*
<main class="hello there world">
    <div>
        Welcome to htmlfy!
    </div>
</main>
*/

Tag Wrap

Wrap and prettify attributes within opening tags and void elements if they're overall length is above a certain character width. Default is 0, which does not wrap.

In the below example, the <input> element is well over 40 characters long, so it's wrapped and prettified.

import { prettify } from 'htmlfy'

const html = `<form><input id="email-0" type="email" title="We need your email for verification." name="email" required /></form>`
console.log(prettify(html, { tag_wrap: 40 }))
/*
<form>
  <input
    id="email-0"
    type="email"
    title="We need your email for verification."
    name="email"
    required
  />
</form>
*/

Trim

Trim leading and trailing whitespace within textarea elements, since all whitespace is preserved by default.

import { prettify } from 'htmlfy'

const html = '<textarea>    Hello World    </textarea>'
console.log(prettify(html, { trim: [ 'textarea' ]}))
/*<textarea>Hello&nbsp;World</textarea>*/

For compatibility and possible future expansion, we require declaring an array with the value 'textarea', as opposed to using something like { trim: true }. Passing in additional HTML element values has no real effect, since we already trim whitespace for all other elements.

Current Tags

0.7.5 ... latest (a year ago)
0.6.7-next.0 ... next (a year ago)