Overview
The HTML beautifier is available as a named export from thejs-beautify package:
const beautify = require('js-beautify').html;
const beautify = require('js-beautify').html_beautify; // legacy alias
import beautify from 'js-beautify';
beautify.html(code, options);
<script> and <style> blocks.
Function signature
beautify.html(sourceCode: string, options?: object): string
Parameters
The HTML source code string to beautify.
Configuration options object. All keys use underscores.
Show options
Show options
Number of spaces per indentation level.
Character used for indentation. Overridden to
\t when indent_with_tabs is true.Indent with tabs instead of spaces.
Line terminator character(s).
auto uses the first newline found in the input file, or \n if none is found. Accepts \n, \r\n, or \r.Ensure the output ends with a newline character.
Preserve existing blank lines in the source.
Maximum number of consecutive blank lines to preserve. Only applies when
preserve_newlines is true.Indent the contents of both
<head> and <body> elements. When false, their direct children are placed at the root indentation level. Setting this to true overrides indent_head_inner_html and indent_body_inner_html.Indent the contents of the
<body> element independently of indent_head_inner_html. Only takes effect when indent_inner_html is false.Indent the contents of the
<head> element independently of indent_body_inner_html. Only takes effect when indent_inner_html is false.Indent Handlebars block expressions (
{{#if}}, {{#each}}, etc.) and their content.Sets the indentation level of content inside
<script> tags. Accepted values: keep (match surrounding HTML), separate (use an independent indent level), normal (indent relative to the script tag).Wrap lines that exceed this many characters. Set to
0 to disable wrapping.Controls attribute wrapping on HTML tags. Accepted values:
auto, force, force-aligned, force-expand-multiline, aligned-multiple, preserve, preserve-aligned.Minimum number of attributes on a tag before forced-wrap modes take effect.
Number of spaces to indent wrapped attributes. Defaults to
indent_size. Ignored when wrap_attributes is aligned.List of tag names to treat as inline elements. Defaults to the standard HTML inline element list:
a, abbr, b, br, button, code, em, i, img, input, label, s, select, small, span, strong, textarea, and others.Treat custom elements (hyphenated tag names) as inline elements.
List of tags whose opening/closing tags and content are left completely unformatted. Defaults to empty (no additional tags).
List of tags whose content (but not the tags themselves) is left unformatted. The tags are still indented correctly.
List of tags that should have an extra blank line prepended before them.
Templating languages to recognize and pass through. In HTML context,
auto enables all supported languages: django, erb, handlebars, php. Accepted values: auto, none, angular, django, erb, handlebars, php, smarty.Keep text content together between occurrences of this string. Useful for custom delimiters in template languages.
Keep indentation whitespace on otherwise empty lines.
Return value
The beautified HTML source code as a string.
Examples
const beautifyHtml = require('js-beautify').html;
const ugly = '<html><head><title>Test</title></head><body><p>Hello <strong>world</strong></p></body></html>';
const pretty = beautifyHtml(ugly, {
indent_size: 2,
wrap_line_length: 120,
});
console.log(pretty);
// <html>
// <head>
// <title>Test</title>
// </head>
// <body>
// <p>Hello <strong>world</strong></p>
// </body>
// </html>
Use
content_unformatted: ['pre', 'textarea', 'script'] to prevent the beautifier from modifying the content of those elements, which is useful when their whitespace is significant.Directives
You can control beautifier behavior inline with HTML comments:<!-- beautify ignore:start -->
<div class="some weird spacing"></div>
<!-- beautify ignore:end -->
<!-- beautify preserve:start -->
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<!-- beautify preserve:end -->
ignore— The beautifier treats the enclosed block as literal text and does not parse or reformat it.preserve— The beautifier parses the enclosed block but keeps its existing formatting unchanged.