html_beautify() / beautify.html()

Overview

The HTML beautifier is available as a named export from the js-beautify package:

const beautify = require('js-beautify').html;
const beautify = require('js-beautify').html_beautify; // legacy alias

For ESM imports:

import beautify from 'js-beautify';

beautify.html(code, options);

The HTML beautifier internally uses the JavaScript and CSS beautifiers to reformat embedded <script> and <style> blocks.

Function signature

beautify.html(sourceCode: string, options?: object): string

Parameters

sourceCode

string

required

The HTML source code string to beautify.

options

object

Configuration options object. All keys use underscores.

Show options

indent_size

number

default:"4"

Number of spaces per indentation level.

indent_char

string

default:" "

Character used for indentation. Overridden to \t when indent_with_tabs is true.

indent_with_tabs

boolean

default:"false"

Indent with tabs instead of spaces.

eol

string

default:"auto"

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.

end_with_newline

boolean

default:"false"

Ensure the output ends with a newline character.

preserve_newlines

boolean

default:"true"

Preserve existing blank lines in the source.

max_preserve_newlines

number

default:"10"

Maximum number of consecutive blank lines to preserve. Only applies when preserve_newlines is true.

indent_inner_html

boolean

default:"false"

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_body_inner_html

boolean

default:"true"

Indent the contents of the <body> element independently of indent_head_inner_html. Only takes effect when indent_inner_html is false.

indent_head_inner_html

boolean

default:"true"

Indent the contents of the <head> element independently of indent_body_inner_html. Only takes effect when indent_inner_html is false.

indent_handlebars

boolean

default:"true"

Indent Handlebars block expressions ({{#if}}, {{#each}}, etc.) and their content.

indent_scripts

string

default:"normal"

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_line_length

number

default:"0"

Wrap lines that exceed this many characters. Set to 0 to disable wrapping.

wrap_attributes

string

default:"auto"

Controls attribute wrapping on HTML tags. Accepted values: auto, force, force-aligned, force-expand-multiline, aligned-multiple, preserve, preserve-aligned.

wrap_attributes_min_attrs

number

default:"2"

Minimum number of attributes on a tag before forced-wrap modes take effect.

wrap_attributes_indent_size

number

Number of spaces to indent wrapped attributes. Defaults to indent_size. Ignored when wrap_attributes is aligned.

inline

array

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.

inline_custom_elements

boolean

default:"true"

Treat custom elements (hyphenated tag names) as inline elements.

unformatted

array

default:"[]"

List of tags whose opening/closing tags and content are left completely unformatted. Defaults to empty (no additional tags).

content_unformatted

array

default:"[\"pre\", \"textarea\"]"

List of tags whose content (but not the tags themselves) is left unformatted. The tags are still indented correctly.

extra_liners

array

default:"[\"head\", \"body\", \"/html\"]"

List of tags that should have an extra blank line prepended before them.

templating

array

default:"[\"auto\"]"

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.

unformatted_content_delimiter

string

default:""

Keep text content together between occurrences of this string. Useful for custom delimiters in template languages.

indent_empty_lines

boolean

default:"false"

Keep indentation whitespace on otherwise empty lines.

Return value

result

string

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.

JavaScript API

CLI Reference

Python API

html_beautify() / beautify.html()

Overview

Function signature

Parameters

Return value

Examples

Directives

Build docs developers (and LLMs) love

JavaScript API

CLI Reference

Python API

Documentation Index

​Overview

​Function signature

​Parameters

​Return value

​Examples

​Directives

Build docs developers (and LLMs) love

Overview

Function signature

Parameters

Return value

Examples

Directives