Free Online SQL Query Formatter and Beautifier

Overview

A high-performance, single-file browser utility designed to transform messy, unformatted, or minified SQL queries into clean, readable, and perfectly indented code. The tool prioritizes speed, privacy, and readability for database administrators and web developers.

Core Features

• Instant Formatting: Real-time formatting as the user types or clicks the 'Format' button.
• Customizable Indentation: Choose between 2-space or 4-space indentation to match internal coding standards.
• Keyword Casing: Option to toggle between UPPERCASE and lowercase for SQL keywords (e.g., SELECT, FROM, JOIN).
• Syntax Clarity: Automatic conversion of raw strings into structured, block-level SQL statements.
• One-Click Clipboard: Easily copy the formatted output to the system clipboard.
• Downloadable Output: Export the formatted SQL directly as a .sql file.
• Privacy-First: Since it runs locally in the browser, no data ever leaves the user's machine.

UI/UX Design Specifications

• Aesthetic: A premium, minimalist 'SaaS' look. The interface utilizes a clean light-mode palette with high-contrast elements.
• Layout:
  • Header: Simple, clear title with a brief tool description.
  • Toolbar: A sticky top bar containing formatting preferences (Indent size selector, Keyword casing toggle).
  • Input/Output Section: A dual-pane layout (side-by-side on desktop, stacked on mobile) featuring a modern text-editor style input field on the left and a highlighted output display on the right.
  • Actions: A distinct, primary-colored action button bar at the bottom containing 'Format Code', 'Clear', 'Copy to Clipboard', and 'Download' functions.
• Typography: Use a clean, sans-serif font stack (Inter or System UI) for UI elements and a monospaced font (Fira Code or Courier New) for the code editor.

Color Palette (Light Mode Only)

• Primary Background: #FFFFFF (Pure White)
• Secondary Background/Cards: #F9FAFB (Cool Gray)
• Primary Action Color: #2563EB (Vibrant Blue)
• Text Primary: #111827 (Near-Black)
• Text Secondary: #6B7280 (Muted Gray)
• Border Color: #E5E7EB (Light Gray)

Technical Implementation Directives

• Single File: All HTML, CSS, and Vanilla JavaScript must be contained within one .html file. CSS should be injected via a <style> block and JS via a <script> block.
• Dependencies: Use a lightweight CDN-hosted library for SQL formatting logic (e.g., sql-formatter).
• State Management: All state (e.g., current indent settings) must be handled by in-memory JS variables. NO localStorage, sessionStorage, or cookies allowed.
• Performance: Use requestAnimationFrame or debounce techniques for formatting triggers to ensure the UI stays responsive during large paste operations.
• Responsiveness: Use CSS Grid and Flexbox to ensure the editor panels collapse gracefully on mobile devices (e.g., 100% width on mobile, 50% width on tablet/desktop).
• Interactions: Use smooth transitions (e.g., transition: all 0.2s ease-in-out) for hover effects on buttons and panels.