mazipan / mazipan/html-tools

feat: add SQL Formatter tool

Open
#133 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
HTML
Stars
5
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Summary

Add a sql-formatter.html tool that prettifies and minifies SQL queries in the browser with keyword uppercasing and consistent indentation.

Motivation

"SQL formatter online" and "SQL beautifier" are high-volume developer searches. Backend developers, data analysts, and anyone writing raw queries constantly need to clean up machine-generated or compressed SQL for readability. The Code category already has JSON, YAML, and Markdown formatters — SQL is the natural next addition.

Proposed UX

  • Input / Output split pane (same layout as json-formatter.html)
  • Format button: uppercase keywords, indent clauses (SELECT / FROM / WHERE / JOIN / GROUP BY / ORDER BY / HAVING / LIMIT each on their own line with consistent indentation), align AND/OR under WHERE
  • Minify button: collapse to a single line, single-space separated
  • Dialect selector: Standard SQL · MySQL · PostgreSQL · SQLite · T-SQL (affects keyword set and quoting style — backtick vs double-quote identifiers)
  • Indentation control: 2 spaces / 4 spaces / tab
  • Keyword case toggle: UPPERCASE / lowercase / Capitalize
  • Copy output · Download .sql · Clear

Implementation notes

  • Category: Code
  • Slug: sql-formatter
  • Icon: 🗄️
  • Library: sql-formatter (MIT, ~100 KB) — well-maintained, supports all major dialects, has an ESM build. Use sibling-module pattern (sql-formatter.js) for the bare-specifier import.
  • Follow src/_tool-template.html and run bun run generate:sections, bun run generate:index, bun run generate:favicon after adding to tools.json

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with src/_tool-template.html and json-formatter.html, then inspect tools.json and the sibling-module pattern for the sql-formatter.js import. Add the sql-formatter tool with the specified formatting, minifying, dialect, indentation, case, copy, download, and clear controls, then run bun run generate:sections, bun run generate:index, and bun run generate:favicon.

Written by the indexing model from the issue text.

Assessment

Tech stack
html, sql
Domain
frontend, tooling
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
58/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.