Formatter Hub: five formatters, one workbench

Online formatters often come with ads, extra steps and vague error messages, and it is never clear where the pasted data goes.

The goal was a tool that works like this: paste, see the result at once, know exactly where an error is, and be sure the data stays in the browser.

I merged the five tools into one workbench: input on the left, output on the right, and a draggable divider between them. Formatting uses Prettier, sql-formatter and native JSON, and each formatter loads only on its own page.

• Formatting as you type; turn it off and run with Ctrl/⌘ + Enter
• Errors show line and column, the line is marked in the editor, and one click jumps to it
• A collapsible tree view and key sorting for JSON, property sorting for CSS, and a keyword-case option for SQL
• YAML to JSON conversion
• Open a file, drop one on the editor, paste from the clipboard, copy, download, or move the output back into the input
• Input and settings are remembered on this device only; phones get Input and Output tabs

I replaced the old copy-pasted screens and regex-based formatters with a simpler architecture. The tool is live and the data never leaves the browser.

• 91 end-to-end and 16 unit tests
• Pure, tested formatting modules for each language
• No theme flash on load, with dark mode support