I Create An HTML Beautifier ( Source Code )
2 min readFeb 10, 2025
Today I created an HTML beautifier tool using HTML, CSS, and javascript.
So I decide to share my source code with you.
you can tell me some suggestions too if I add something to my tools, or design-related anything you suggest to me.
Here is the source code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Beautifier</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-beautify/1.14.7/beautify-html.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
background-color: #f4f4f4;
}
.container {
width: 90%;
max-width: 600px;
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
textarea {
width: 100%;
height: 200px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-family: monospace;
}
button {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
border: none;
background: #007bff;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background: #0056b3;
}
</style>
</head>
<body>
<div class="container">
<h2>HTML Beautifier</h2>
<textarea id="htmlInput" placeholder="Paste your HTML code here..."></textarea>
<button onclick="beautifyHTML()">Beautify HTML</button>
</div>
<script>
function beautifyHTML() {
let input = document.getElementById("htmlInput").value;
let formattedHTML = html_beautify(input, { indent_size: 2, space_in_empty_paren: true });
document.getElementById("htmlInput").value = formattedHTML;
}
</script>
</body>
</html>If you like my work clap for me, and share this code with other publications too.
If you want more advanced source code and learning join my free newsletter on Beehive.
See you in the next post.
