Take the 2-minute tour ×

How can I format/tidy/beautify HTML in JavaScript? I have tried doing a search/replace for angle brackets (<, >) and indenting accordingly. But of course it does not take into account when the is JS or CSS etc inside the HTML.

Perhaps there maybe a HTML formatter/tidier/ beautifier library out there already to do this.

The reason I want to do this is I have made a content editor (CMS) which has both WYSIWYG and source code views. The problem the code written by the WYSIWYG editor is normally a single line. So I would like a JavaScript that could format this into a more readable form on demand.

Here what I have so far:

function getIndent(level) {
    var result = '',
        i = level * 4;
    if (level < 0) {
        throw "Level is below 0";
    while (i--) {
        result += ' ';
    return result;

function style_html(html) {
    html = html.trim();
    var result = '',
        indentLevel = 0,
        tokens = html.split(/</);
    for (var i = 0, l = tokens.length; i < l; i++) {
        var parts = tokens[i].split(/>/);
        if (parts.length === 2) {
            if (tokens[i][0] === '/') {
            result += getIndent(indentLevel);
            if (tokens[i][0] !== '/') {

            if (i > 0) {
                result += '<';

            result += parts[0].trim() + ">\n";
            if (parts[1].trim() !== '') {
                result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n";

            if (parts[0].match(/^(img|hr|br)/)) {
        } else {
            result += getIndent(indentLevel) + parts[0] + "\n";
    return result;
share|improve this question

7 Answers 7

up vote 44 down vote accepted

You may find this to be useful:


It is the source code powering the site http://jsbeautifier.org/

share|improve this answer
Umm… it does both: github.com/einars/js-beautify/blob/master/beautify-html.js -- try pasting pure html code into jsbeautifier.org –  ghoppe Oct 19 '10 at 23:18
I stand corrected, sorry :) –  Petah Sep 28 '11 at 11:17

Is this what you want:


Here's the link to the decompressing javascript:


share|improve this answer
Its not ideal, it doesn't format it as I would expect, and it doesn't indent. –  Petah Oct 19 '10 at 8:33
Just a few extra lines and it will... :) –  Steve Oct 20 '10 at 0:02

There is tidy-html5 that does exactly what you want. It's a portable application that takes invalid HTML as an input, and outputs nicely formatted markup.

It has been compiled to javascript.

See the demo and download tidy.js.

share|improve this answer

You could have a look at David Pireks approach - even though I think this is far from perfect.. (dependent on jQuery)

share|improve this answer
Just tried it now, the code seems to have syntax errors. –  Petah Oct 18 '10 at 19:12

Writing the HTML on one line would download faster to the browser, so I am not sure I would want it formatted. Maybe an option for a formatted version or an optimized version.

As for the question... you could do an AJAX call after so many actions and send the code to the server to be formatted and shown in a different box on the screen. Basically it would be a real time version of this site, http://infohound.net/tidy/

share|improve this answer
Yes it would be ever so slightly faster (like 0.0001 of a second). But considering a WYSIWYG editor is aimed at clients that know only a little about HTML, formatted HTML makes it a lots easier. Also in regards to sending the data to the server for formatting, that is far from ideal. –  Petah Oct 20 '10 at 12:15

jQuery creator John Resig wrote a fast and lightweight HTML parser in javascript. If you're looking for a solution which you can add directly to your CMS then you could write a simple beautifier using this parser as a base. All you'd need to do is reoutput the elements adding spaces and line breaks as you like, using the built in api:

HTMLParser(htmlString, {
  start: function(tag, attrs, unary) {},
  end: function(tag) {},
  chars: function(text) {},
  comment: function(text) {}

An added benefit of this approach is that you could use the same HTMLParser to read HTML back into your WYSIWYG, or otherwise interact with your user's HTML tree. HTMLParser also comes prebuilt with an HTMLtoDOM method.

share|improve this answer

I believe that both chrome and firebug's debugging code display engines are written in JS. That's probably heavier duty than you really want to be messing with though.

share|improve this answer

Your Answer


