HTML formatter yo!
Prettier html, minified html, and a few more goodies.
htmlfy is a fork of html-formatter. Some of the processing logic has been preserved, and full credit for that goes to the original author.
I've made the following enhancements:
- Fully typed
- Converted to ESM
- Configuration options
- Support for custom HTML elements (web components)
- Refactoring galore
- Made it go brrr fast
npm install htmlfy
Turn single-line or ugly HTML into highly formatted HTML. You can pass a configuration object as the second argument.
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>
*/Turn well-formatted or ugly HTML into a single line of HTML. You can pass a configuration object as the second argument. This function is called internally when you use prettify.
This feature is not a replacement for compressors like htmlnano, which focus on giving you the smallest data-size possible.
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>
*/A standalone function that ensures void elements are "self-closing".
import { closify } from 'htmlfy'
const html = `<br><input type="text">`
console.log(closify(html))
/*
<br /><input type="text" />
*/It also normalizes non-void elements which happen to be self-closing for whatever reason.
import { closify } from 'htmlfy'
const html = `<form class="hello" />`
console.log(closify(html))
/*
<form class="hello"></form>
*/A standalone function that enforces entity characters for textarea content. You can pass true as the minify to minify the tags themselves. Note that this does not run the HTML through the minify function.
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 > 2? This is another paragraph. </textarea><textarea class="more stuff"> </textarea>
*/A standalone function that trims leading and trailing whitespace for whatever HTML elements you'd like.
import { trimify } from 'htmlfy'
const html = `<div>
Hello World
</div>`
console.log(trimify(html, ['div']))
/* <div>Hello World</div> */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'))Although meant to be an ESM module, you can import using require.
const { prettify } = require('htmlfy')These configuration options can be passed to prettify or minify. Note that as of now, only the ignore and ignore_with are relevant for minify.
Default config:
{
content_wrap: 0,
ignore: [],
ignore_with: '_!i-£___£%_',
strict: false,
tab_size: 2,
tag_wrap: 0,
trim: []
}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>
*/Tell htmlfy to not process some elements' content and leave them as-is. Note this still minifies the tags themselves.
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>
*/You can pass in your own string, for ignoring elements, if the default is actually being used in the elements you want to ignore.
prettify(html, { ignore: ['p'], ignore_with: 'some-string-that-wont-be-in-your-ignored-elements' })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>
*/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>
*/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 leading and trailing whitespace within elements. Good for when you are ignoring certain elements, but still want to remove this whitespace.
import { prettify } from 'htmlfy'
const html = '<textarea> Hello World </textarea>'
console.log(prettify(html, { trim: ['textarea'], ignore: ['textarea']}))
/*<textarea>Hello World</textarea>*/
