HTML Formatter | Instant HTML Cleanup

This JavaScript snippet powers a lightweight HTML formatter web app designed to make your coding workflow easier and faster. If you've ever struggled with messy HTML, this tool provides an intuitive interface to clean up and beautify your code in a few clicks. ✨

Core Features 📝

  • Input & Output Tabs: Users can switch between input and output views with a single click. The app automatically adapts to smaller screens by showing the input tab first.
  • HTML Beautification: The core functionality relies on html_beautify, formatting raw HTML into a readable structure.
  • Clipboard Integration: After formatting, the result can be copied directly to the clipboard, saving time on manual copying.
  • Status Feedback: Informative messages guide users in case of errors or missing configuration, ensuring clarity.

How It Works 📌

The code starts by defining references to essential DOM elements such as buttons, input/output areas, and status messages. A switchView function toggles between input and output sections by adding or removing CSS classes.

Event listeners handle user interactions:

  • Clicking tabs switches the displayed view.
  • The Format HTML button reads the input, checks for valid configuration, and uses html_beautify to format the HTML.
  • The Copy button selects and copies the formatted code to the clipboard, providing success or error alerts depending on the outcome.

Error Handling & UX Considerations 🖥️

  • If the input is empty, the user is prompted to paste HTML first.
  • If the beautify library or configuration fails to load, the app provides a descriptive error message.
  • Any formatting errors are caught and logged to the console for debugging.
  • The interface is responsive, defaulting to the input view on smaller screens for better usability.

Conclusion 🎯

This small but effective app streamlines HTML formatting for developers, making messy code neat and easy to read. With tabbed navigation, clipboard integration, and error handling, it’s perfect for anyone who wants to maintain clean, professional HTML code quickly.