Code Formatters

ArrayKit's Code Formatters tools help developers clean up, convert and validate code without leaving the browser. Whether you need to beautify a messy stylesheet, minify a bundle, reformat a query or check a pattern, this category covers the everyday formatting tasks that keep code readable and consistent. The JS / TS Formatter and CSS / SCSS Formatter apply Prettier-style rules, while the SQL Formatter handles MySQL, PostgreSQL and more. Convert structured data with YAML to JSON, render docs with Markdown Preview, and debug patterns using the Regex Tester. There are also tools for HTML, XML, GraphQL, Dockerfiles and MongoDB queries. These tools are built for frontend and backend engineers, students and anyone wrangling configuration or markup. Everything runs entirely in your browser, so your code is processed locally and nothing is uploaded to a server.

• YAML ↔ JSON — Convert YAML to JSON and back.
• Markdown Preview — Render Markdown to HTML with a live preview.
• Regex Tester — Test regular expressions live with matches, groups and flags.
• CSS Color Converter — Convert between HEX, RGB and HSL with a live swatch.
• Text Diff — Compare two texts line-by-line and see additions and removals.
• MDX Converter — Render MDX as formatted text, convert HTML → MDX, and escape text to literal MDX.
• CSS / SCSS Formatter — Beautify or minify CSS/SCSS/LESS, sort properties and remove duplicates.
• JS / TS Formatter — Beautify or minify JavaScript, TypeScript and JSX/TSX with Prettier options.
• HTML Formatter — Beautify or minify HTML, format inline CSS/JS, and preview the result.
• XML Formatter — Beautify, minify and validate XML, and convert XML ↔ JSON.
• SQL Formatter — Format SQL for MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle.
• GraphQL Formatter — Format or minify GraphQL queries and schemas, validate syntax and extract operations.
• Dockerfile Formatter — Format a Dockerfile and get best-practice / lint suggestions.
• MongoDB Query Formatter — Format MongoDB shell queries and aggregation pipelines.
• Contrast Checker — Check WCAG colour contrast ratio and AA/AAA pass for any two colours.
• Mermaid Diagram Renderer — Render Mermaid diagrams (flowcharts, sequence, gantt) to SVG in your browser.
• SVG Optimizer — Minify SVG — strip comments, metadata and editor cruft, and collapse whitespace.

Frequently asked questions

Are these Code Formatters tools safe to use?

Yes. Every Code Formatters tool runs entirely in your browser, so the code you paste is processed locally and never leaves your device. Nothing is uploaded to a server, which makes them safe to use even with proprietary or sensitive source files.

Do the Code Formatters tools work offline?

Once the page has loaded, the formatting, minifying and converting all happen on your machine. Because the processing is local and nothing is sent to a server, the tools keep working even when your connection drops.

Which languages and formats can I format with these tools?

The category covers a wide range: CSS, SCSS and LESS, JavaScript, TypeScript and JSX, HTML, XML, SQL across several dialects, GraphQL, Dockerfiles and MongoDB queries. You can also convert YAML to JSON, preview Markdown and MDX, and optimize SVG.

Can I both beautify and minify my code?

Yes. Formatters like the CSS / SCSS, JS / TS, HTML and XML tools support both beautifying for readability and minifying for production. You can also sort properties, remove duplicates and validate syntax depending on the tool.

Will formatting change what my code does?

Beautifying and minifying only adjust whitespace, indentation and layout, so the behaviour of your code stays the same. Conversion tools like YAML to JSON or XML to JSON restructure the data into an equivalent format without altering its meaning.

Do I need to install anything to use the Code Formatters tools?

No installation is required. The tools run in your browser as soon as the page loads, and all processing happens locally on your device, so you can format and convert code right away.