Code Formatters

ArrayKit's code formatters tidy the code, queries and config files you paste so they are easier to read, review and commit. Lay out queries for MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle with the SQL Formatter, beautify JavaScript, TypeScript and JSX or minify JavaScript with the JS / TS Formatter, and clean up stylesheets and markup with the CSS / SCSS Formatter, HTML Formatter and XML Formatter. For config, YAML ↔ JSON, INI to JSON and dotenv to JSON convert in both directions, and the TOML Formatter & Converter formats TOML and turns it into JSON and back. The GraphQL Formatter, OpenAPI / Swagger Formatter, Dockerfile Formatter and MongoDB Query Formatter handle API definitions, container files and database queries, and the SVG Optimizer strips editor clutter from icons. For documentation, Markdown Preview renders GitHub-flavored Markdown as you type, HTML to Markdown converts pages and snippets, and the Mermaid Diagram Renderer draws flowcharts and sequence diagrams as SVG. To check your work, try a pattern in the Regex Tester, compare two versions with Text Diff, test a color pair with the Contrast Checker, and convert colors and CSS lengths with the CSS Color Converter and CSS Unit Converter. They are built for front-end, back-end and DevOps engineers and technical writers. Everything runs in your browser, so your code stays on your device and nothing is uploaded.

  • 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 JavaScript, TypeScript and JSX/TSX with Prettier options, or minify plain JavaScript.
  • 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.
  • MongoDB Query Beautifier — Beautify and indent MongoDB queries and find() statements in your browser.
  • MongoDB Aggregation Beautifier — Beautify and indent MongoDB aggregation pipelines in your browser.
  • MongoDB Explorer — Explore a MongoDB document or collection sample and infer its field schema and types.
  • OpenAPI / Swagger Formatter — Format and validate OpenAPI / Swagger specs (JSON or YAML) and count paths and operations.
  • CSS Unit Converter — Convert between px, rem, em, pt and % live with a configurable root font size.
  • Glob to Regex — Convert a glob or wildcard pattern into an equivalent JavaScript regex.
  • HTML to Markdown — Paste HTML and convert it to clean Markdown live, with GFM tables, lists and code blocks.
  • TOML Formatter & Converter — Format and validate TOML, and convert TOML ↔ JSON.
  • logfmt to JSON — Convert logfmt key=value logs to JSON and back.
  • dotenv to JSON — Convert a .env file to JSON and JSON back to .env, with quoting and comments handled.
  • CSV to Markdown Table — Convert CSV or TSV data into a Markdown table, with alignment and header options.
  • INI to JSON — Convert INI config files to JSON and JSON back to INI, with sections and comments.
  • Markdown Table Generator — Build a table in an editable grid and export Markdown, HTML, AsciiDoc and LaTeX.
  • Data Size Converter — Convert between bits, bytes, KB, MB, GB and KiB, MiB, GiB, with decimal and binary units.
  • Java Properties ↔ JSON — Convert Java .properties files to JSON and JSON back to .properties, in your browser.

Guides

  • HEX, RGB and HSL Color Codes, Explained — How HEX, RGB and HSL color codes work, how to convert between them step by step, what alpha and 8-digit hex mean, and which WCAG contrast ratios text needs.
  • Markdown Syntax, Explained — A Markdown cheat sheet and guide: headings, lists, links, images, code, tables and task lists, plus the line-break and escaping rules that trip people up.
  • Regular Expressions (Regex), Explained — Regular expressions explained: character classes, greedy vs lazy quantifiers, groups, flags and lookarounds, a regex cheat sheet, and catastrophic backtracking.
  • Text Diff, Explained — How a text diff works: line, word and character diffs, the longest common subsequence, reading added and removed lines, and the whitespace traps to avoid.

Frequently asked questions

What can I do with ArrayKit's code formatters?
Beautify or minify code, lay out SQL, lint a Dockerfile, and format GraphQL, MongoDB queries, OpenAPI specs and TOML. You can also convert config between YAML, TOML, INI, .env, Java .properties, logfmt and JSON, preview Markdown and MDX, turn HTML or CSV into Markdown, build Markdown tables and render Mermaid diagrams. For quick checks there are the Regex Tester, Glob to Regex, Text Diff, Contrast Checker and MongoDB Explorer, plus converters for CSS colors, CSS units and data sizes.
Which languages can I beautify or minify?
You can beautify and minify CSS, SCSS and LESS, HTML, XML and GraphQL, and beautify JavaScript, TypeScript, JSX and TSX, with minify for plain JavaScript. The SQL Formatter handles MySQL, PostgreSQL, SQL Server, SQLite, BigQuery and Oracle. Dockerfiles, MongoDB queries and OpenAPI specs get their own tools in the Dockerfile Formatter, MongoDB Query Formatter and OpenAPI / Swagger Formatter, and the SVG Optimizer shrinks SVG markup. JSON has its own formatter and viewer in the JSON tools.
Is it safe to paste private or proprietary code?
Yes. Every formatter and converter runs in your browser, so source code, SQL, config files and the values in a .env file are processed on your device and never uploaded to a server. You can format proprietary code without it leaving your machine.
Will formatting change how my code works?
Beautifying is meant to change only how code looks: indentation, line breaks, spacing and quote style. Minifying strips whitespace and comments to make files smaller, and for JavaScript it also compacts the code. Some options change content on purpose: sorting CSS properties reorders them, and removing duplicate declarations keeps only the last value of each property, which can drop a deliberate fallback. Compare the result with Text Diff and test it before you ship.
How do I convert config files between YAML, TOML, INI, .env and JSON?
Pick the matching converter: YAML ↔ JSON and the TOML Formatter & Converter work in both directions, INI to JSON turns [sections] into nested objects and back, and dotenv to JSON converts .env files to JSON and back while handling quoted values, comments and export prefixes. Java Properties ↔ JSON can nest dotted keys such as db.host, and logfmt to JSON turns key=value log lines into JSON objects and back.