tessl/npm-js-beautify
A comprehensive code beautification library for JavaScript, CSS, and HTML with extensive formatting options and cross-platform support
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
html.mddocs/
HTML Beautification
HTML code formatting with comprehensive support for various HTML elements, attributes, and embedded JavaScript/CSS. Includes advanced template language support and highly configurable element handling for modern web development workflows.
Core Imports
// Import HTML beautifier
const { html_beautify } = require('js-beautify');
const beautify = require('js-beautify');
// Or use the short alias
const { html } = require('js-beautify');ESM:
import beautify from 'js-beautify';
// Use beautify.html() for HTML beautificationCapabilities
HTML Beautify Function
Beautifies HTML source code with extensive control over element formatting, attribute wrapping, and embedded content handling.
/**
* Beautify HTML source code with optional JS/CSS beautification
* @param {string} html_source - HTML code to beautify
* @param {Object} options - Formatting options (optional)
* @param {boolean} [options.indent_inner_html=false] - Indent <head> and <body> sections
* @param {boolean} [options.indent_body_inner_html=true] - Indent content inside <body>
* @param {boolean} [options.indent_head_inner_html=true] - Indent content inside <head>
* @param {boolean} [options.indent_handlebars=true] - Indent Handlebars templates
* @param {string} [options.wrap_attributes='auto'] - Attribute wrapping strategy: 'auto', 'force', 'force-aligned', 'force-expand-multiline', 'aligned-multiple', 'preserve', 'preserve-aligned'
* @param {number} [options.wrap_attributes_min_attrs=2] - Minimum number of attributes to trigger wrapping
* @param {number} [options.wrap_attributes_indent_size] - Indent size for wrapped attributes (defaults to indent_size)
* @param {string[]} [options.extra_liners] - List of tags that should have an extra newline before them
* @param {string[]} [options.inline] - List of tags to be considered inline tags
* @param {boolean} [options.inline_custom_elements=true] - Treat custom elements as inline
* @param {string[]} [options.void_elements] - List of void HTML elements
* @param {string[]} [options.unformatted] - List of tags that should not be reformatted
* @param {string[]} [options.content_unformatted] - List of tags whose content should not be reformatted
* @param {string} [options.unformatted_content_delimiter] - Keep text content together between this string delimiter
* @param {string} [options.indent_scripts='normal'] - Script tag indentation mode: 'normal', 'keep', 'separate'
* @param {Function} js_beautify - Custom JavaScript beautifier function (optional)
* @param {Function} css_beautify - Custom CSS beautifier function (optional)
* @returns {string} Beautified HTML code
*/
function html_beautify(html_source, options, js_beautify, css_beautify);
/**
* Get default options for HTML beautifier
* @returns {Object} Default options object with all HTML-specific options
*/
html_beautify.defaultOptions();Usage Examples:
const beautify = require('js-beautify');
// Basic HTML beautification
const uglyHTML = '<div><p>Hello</p><span>World</span></div>';
const beautiful = beautify.html(uglyHTML, { indent_size: 2 });
// Result:
// <div>
// <p>Hello</p>
// <span>World</span>
// </div>
// Attribute wrapping
const longAttributes = '<input type="text" class="form-control" placeholder="Enter your name" required>';
const wrapped = beautify.html(longAttributes, {
wrap_attributes: 'force',
wrap_attributes_min_attrs: 2,
indent_size: 2
});
// Result:
// <input
// type="text"
// class="form-control"
// placeholder="Enter your name"
// required>
// With embedded JS/CSS beautification
const embedded = '<script>function test(){return true;}</script><style>body{margin:0;}</style>';
const formatted = beautify.html(embedded, { indent_size: 2 });
// Automatically beautifies embedded JavaScript and CSSDefault Options
Returns the default configuration options for HTML beautification.
/**
* Get default options for HTML beautifier
* @returns {Object} Default options object with all HTML-specific options
*/
html_beautify.defaultOptions();Attribute Wrapping Modes
Auto (Default)
Wraps attributes intelligently based on line length and attribute count.
Force
Forces attributes to be wrapped when minimum attribute count is reached:
<input
type="text"
class="form-control"
required>Force-Aligned
Forces wrapping with aligned attributes:
<input type="text"
class="form-control"
required>Force-Expand-Multiline
Expands multiline attributes with each on its own line:
<input
type="text"
class="form-control large-input"
placeholder="Enter your full name here"
required>Aligned-Multiple
Aligns multiple attributes per line:
<input type="text" class="form-control"
placeholder="Enter name" required>Preserve / Preserve-Aligned
Preserves existing attribute formatting.
Element Classification
Inline Elements
Elements treated as inline (default includes standard HTML inline elements):
// Default inline elements include:
['a', 'abbr', 'area', 'audio', 'b', 'bdi', 'bdo', 'br', 'button', 'canvas', 'cite',
'code', 'data', 'datalist', 'del', 'dfn', 'em', 'embed', 'i', 'iframe', 'img',
'input', 'ins', 'kbd', 'keygen', 'label', 'map', 'mark', 'math', 'meter', 'noscript',
'object', 'output', 'progress', 'q', 'ruby', 's', 'samp', 'select', 'small',
'span', 'strong', 'sub', 'sup', 'svg', 'template', 'textarea', 'time', 'u', 'var',
'video', 'wbr', 'text']Void Elements
Self-closing elements that don't have closing tags:
// Default void elements include:
['area', 'base', 'br', 'col', 'embed', 'hr', 'img', 'input', 'keygen',
'link', 'menuitem', 'meta', 'param', 'source', 'track', 'wbr',
'!doctype', '?xml', 'basefont', 'isindex']Extra Liners
Elements that get extra newlines before them:
// Default extra liners:
['head', 'body', '/html']Content Formatting Control
Unformatted Elements
Elements whose tags should not be reformatted (empty by default).
Content Unformatted
Elements whose content should not be reformatted:
// Default content unformatted:
['pre', 'textarea']Example:
<pre>
This spacing
will be preserved
</pre>Unformatted Content Delimiter
Custom delimiter to preserve content formatting:
const html = '<div>{{! This content will be preserved }}</div>';
const formatted = beautify.html(html, {
unformatted_content_delimiter: '{{!',
indent_size: 2
});Script and Style Handling
Script Indentation Modes
Normal (Default)
Scripts are indented normally with the HTML:
<script>
function test() {
return true;
}
</script>Keep
Preserves original script indentation:
<script>
function test() {
return true;
}
</script>Separate
Scripts are unindented and separated:
<script>
function test() {
return true;
}
</script>Template Language Support
Supported Template Languages
The templating option supports:
auto- Automatically detect (default for HTML)none- No template supportangular- Angular templatesdjango- Django templateserb- ERB templates (Ruby)handlebars- Handlebars templatesphp- PHP templatessmarty- Smarty templates
Example with Handlebars:
<div class="{{className}}">
{{#if showContent}}
<p>{{content}}</p>
{{/if}}
</div>Custom Elements Support
When inline_custom_elements is enabled (default), custom elements are treated as inline:
<my-component>
<my-child-component></my-child-component>
</my-component>Advanced Features
Embedded Content Beautification
HTML beautifier automatically beautifies embedded JavaScript and CSS:
<!-- Input -->
<script>function test(){return 1+2;}</script>
<style>body{margin:0;padding:0;}</style>
<!-- Output -->
<script>
function test() {
return 1 + 2;
}
</script>
<style>
body {
margin: 0;
padding: 0;
}
</style>Directive Support
Supports beautify directives for fine-grained control:
<!-- beautify ignore:start -->
<div>This content will not be formatted</div>
<!-- beautify ignore:end -->
<!-- beautify preserve:start -->
<div>
This content will be parsed but formatting preserved
</div>
<!-- beautify preserve:end -->