Code Tools Toolkit

Code Tools

Format and minify JavaScript, CSS, HTML, SQL, XML, and YAML. Plus Markdown live preview and syntax-aware beautifiers.

JavaScript Input

#javascript#css#html#sql#xml#yaml#format#minify#markdown#beautify

What's included in Code Tools Toolkit

11 tools, all free and client-side — no login or data upload required.

JavaScript Formatter

Beautify and format messy or minified JavaScript code with configurable indentation and code style.

Beautify minified third-party JS for debugging
Normalize code style before code review
Format script snippets for documentation

JavaScript Minifier

Minify and compress JavaScript files by removing whitespace, comments, and shortening variable names.

Reduce JS bundle size for faster page loads
Minify inline scripts for HTML email templates
Compress scripts for CDN deployment

CSS Formatter

Expand and format compressed CSS stylesheets into readable, properly indented code for easy editing.

Unminify vendor CSS for debugging
Normalize stylesheet formatting across team members
Format generated CSS from preprocessors

CSS Minifier

Minify CSS by stripping whitespace, comments, and redundant rules to reduce stylesheet file size.

Reduce CSS file size for production deployment
Minify critical CSS for above-the-fold inlining
Compress stylesheets for email HTML templates

HTML Formatter

Indent and format HTML markup with proper nesting — great for cleaning up template or CMS-generated code.

Clean up HTML exported from design tools
Format email templates for readability
Normalize markup from CMS editors

HTML Minifier

Remove whitespace, comments, and optional tags from HTML to reduce page size and improve load time.

Minify HTML for faster initial page render
Compress HTML email templates
Reduce size of static site HTML output

SQL Formatter

Format raw or minified SQL queries with proper keyword capitalization, indentation, and clause spacing.

Prettify complex multi-join queries for review
Format SQL from ORM query logs
Prepare SQL snippets for documentation

SQL Minifier

Compact SQL queries by removing comments and excess whitespace — useful for embedding queries in code.

Inline SQL in application code as single-line strings
Compress migration scripts for embedding
Reduce query verbosity for logging

XML Formatter

Beautify XML documents with proper indentation and tag structure for readability and debugging.

Format SOAP request/response payloads for debugging
Prettify XML config files from legacy systems
Indent Maven or Ant build files

YAML Formatter

Validate and format YAML files with consistent indentation — catches syntax errors before deployment.

Validate Kubernetes manifests before applying
Format GitHub Actions workflow files
Debug CI/CD pipeline YAML configuration

Markdown Preview

Write Markdown in a live editor and see a rendered HTML preview update in real time.

Preview README files before pushing to GitHub
Draft and preview technical documentation
Write Markdown blog posts with live feedback

About Code Tools Toolkit

The Code Tools Toolkit formats, minifies, and previews the languages developers work with every day. Beautify minified third-party JavaScript to debug production issues, unminify vendor CSS for inspection, format SQL queries from ORM logs for readability, and preview Markdown documents live as you write.

Each formatter understands the syntax of its language, so it indents nested blocks correctly, aligns CSS properties, wraps long SQL clauses, and preserves comments where they matter. Minifiers remove whitespace, comments, and redundant syntax to reduce file size for production deployment, with configurable aggressiveness where appropriate.

Everything runs in the browser — no uploads, no build servers, no API keys. You can safely format proprietary source code, internal SQL queries, and private CSS without any data leaving your machine.

How to use Code Tools Toolkit

1
Pick your language
Select the tab for JavaScript, CSS, HTML, SQL, XML, YAML, or Markdown. Each tab exposes both a formatter and (for compressible formats) a minifier.
2
Paste the code
Drop code into the input area. The tool parses it, catches syntax errors, and produces formatted output.
3
Choose format or minify
Toggle between beautify mode (for readability) and minify mode (for production deployment). For Markdown, the preview pane renders live.
4
Copy the result
Copy the formatted or minified code. Input and output are discarded when you close the page.

Frequently asked questions

Which JavaScript dialect does the formatter support?

The formatter handles modern JavaScript including ES2023 features, TypeScript syntax, JSX, and object/array destructuring. It preserves comments and uses 2-space indentation by default.

Will the CSS minifier break calc() or custom properties?

No. The minifier is syntax-aware: it preserves calc() expressions, CSS custom properties (--var), media queries, and vendor prefixes while stripping comments, whitespace, and duplicate rules.

Can the HTML formatter handle templating syntax like Handlebars or EJS?

Partially. Standard HTML is formatted correctly, but templating delimiters may be reformatted in ways that alter rendering. For template files, format the plain HTML portions and leave templating expressions intact.

Does the SQL formatter support dialects like PostgreSQL and MySQL?

Yes. The formatter recognizes keywords from PostgreSQL, MySQL, SQL Server, SQLite, and standard ANSI SQL. Dialect-specific functions (like PostgreSQL's jsonb operators) are preserved as-is.

Can I preview GitHub-flavored Markdown?

Yes. The Markdown Preview renders GFM extensions including tables, strikethrough, task lists, fenced code blocks, and autolinks, closely matching how GitHub displays README files.

How small can the minifiers make my files?

Typical reductions: 20–40% for JavaScript, 15–25% for CSS, 10–20% for HTML. For maximum compression, combine minification with gzip or brotli at the server level for an additional 60–80% reduction.