Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

htmlfy

Package Overview
Dependencies
Maintainers
1
Versions
10
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

htmlfy

HTML formatter yo!. Prettify, minify, and more!

  • 0.5.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
146K
increased by22.64%
Maintainers
1
Weekly downloads
 
Created
Source

htmlfy

HTML formatter yo! Prettify, minify and more!

htmlfy is a fork of html-formatter. Most 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.
  • Refactored the code, including naming changes.

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:

{
  ignore: {},
  strict: false,
  tab_size: 2
}

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>
*/

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.

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>
*/

Trim

Trim leading and trailing whitespace from 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 effect, since we already trim whitespace for all other elements.

Keywords

FAQs

Package last updated on 29 Nov 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc