FormatBento

Code formatters & beautifiers

FormatBentoHTML

HTML formatter & minifier

Beautify tangled markup with Prettier, including the CSS and JavaScript inside it, or minify a page without changing how it looks.

Mode
Empty
Output

The formatted code lands in this compartment. Ctrl + Enter formats from the keyboard.

Syntax error


						
					

				

			


			

				

					Beautify
					

					

					

					
					
					
					
				

				

					Minify
					
					
					
				

			

			

				
Ready. Paste code, open a file or press Sample.

				Runs in your browser · nothing is uploaded
			


		

	


	

		

			
Beautify or minify

			
Beautify runs Prettier's HTML printer. With whitespace set to respect CSS display, it only breaks lines where a browser would not render a space, so inline text keeps its look; Ignore gives tidier output when spacing between inline elements does not matter.

			
Minify is deliberately conservative. It removes comments (keeping IE conditional comments and server-side includes) and collapses runs of whitespace to one space. Whitespace next to block-level tags is dropped; between inline elements one space always stays. Content of <pre>, <textarea>, <script>, <style> and anything styled white-space: pre is left untouched. JSON-LD is compacted; inline CSS and JavaScript go through csso and terser only if you ask.

			
		

	


	

		
Questions

		

			

				Why did Prettier put a tag's > on the next line?
				
To avoid adding a space a browser would render between inline elements. Set whitespace to Ignore if that spacing does not matter.

			

			

				Can I format a fragment instead of a whole page?
				
Yes. Paste any snippet; nothing such as html or body tags is added around it.

			

			

				Will minified HTML break my layout?
				
It should not: only whitespace CSS ignores is removed. If your CSS turns block elements into inline ones, untick Trim around block tags.