HTML Source Code Formatter

Paste your HTML code in the input area, customize formatting options, and get beautifully formatted, syntax-highlighted HTML code.

Input HTML Code

Paste your unformatted HTML here

Characters: 0

Formatted Output

Formatted HTML with syntax highlighting

Characters: 0

Code copied to clipboard!

Indent Size:

Use Double Quotes:

Wrap Long Attributes:

Try an example

Click the button below to load an example HTML snippet and see how the formatter works.

`; htmlInput.value = exampleHTML; updateCharCount(); // Auto-format the example const indentSize = parseInt(indentSizeInput.value); const useDoubleQuotes = attributeQuotesCheck.checked; const wrapAttributes = wrapAttributesCheck.checked; const formatted = formatHTML(exampleHTML, indentSize, useDoubleQuotes, wrapAttributes); const highlighted = applySyntaxHighlighting(formatted); htmlOutput.innerHTML = highlighted; updateCharCount(); }); // Update character count on input htmlInput.addEventListener('input', updateCharCount); // Initialize updateCharCount(); // Add initial placeholder text to output htmlOutput.textContent = 'Formatted HTML will appear here after you click the "Format HTML" button.'; updateCharCount();