OnlineConverTools
Sign in

Code Formatter

Format and beautify JavaScript, TypeScript, JSX, JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown, and GraphQL

About Code Formatter

Code Formatter beautifies 13 languages in your browser and works out which one you pasted. JavaScript, TypeScript, JSX, HTML, CSS, SCSS, LESS, YAML, Markdown, and GraphQL go through Prettier 3; XML through Prettier's XML plugin after a well-formedness check; SQL through sql-formatter, with 20 dialects; JSON through the site's own re-indenter, which keeps every number, escape, and key order as written. Prettier applies its own style, so quotes, semicolons, and line wrapping can change. When the engine reports a syntax error, nothing is formatted and the output shows the message with its position whenever the engine gives one.

Example

Auto-detect reads this as GraphQL; the line under the output says Formatted as GraphQL (detected).

Input

query{user(id:1){name,friends(first:2){name}}}

Output

query {
  user(id: 1) {
    name
    friends(first: 2) {
      name
    }
  }
}

How to format code online

  1. 1Paste your code into "Input".
  2. 2Leave "Auto-detect" in the Language list, or pick the language; for SQL, a "SQL dialect" list appears.
  3. 3Click "Format".
  4. 4Check the line under the output, which names the language used, then click "Copy" or "Download".

Formats and limits

Languages
JavaScript, TypeScript, JSX (React), JSON, HTML, XML, CSS, SCSS, LESS, SQL, YAML, Markdown, GraphQL
SQL dialects
20: Standard SQL, MySQL, MariaDB, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, Amazon Redshift, ClickHouse, DuckDB, Trino / Presto, Spark SQL, Hive, IBM Db2, IBM Db2 for i, SingleStore, TiDB, N1QL (Couchbase)
Style
Prettier with a print width of 80 and 2-space indentation (XML text content kept as written); JSON indented by 2 spaces; SQL keywords in capitals
Detection
Mostly reads the first 4,000 characters (JSON is checked on the whole text); a wrong guess is fixed by choosing the language

Where your code is processed

Formatting happens in the browser: each formatter (Prettier with the plugin a language needs, or sql-formatter) is fetched the first time you format that language, and your code is never uploaded. If formatting fails, the first line of the error, such as Line 3, column 12: Unexpected token, goes to our error log with the tool name and your browser's name and version, cleaned of quoted text, long numbers, and addresses.

Frequently asked questions

Can it detect the language automatically?

Yes, from the text itself: its first characters (a tag, a brace, a SQL or GraphQL keyword) and marks only one language has, such as type annotations for TypeScript or $variables for SCSS. If the guess is wrong, pick the language and click "Format" again.

Will formatting change my code?

No for JSON: only whitespace changes, and numbers such as 1.10 or 20-digit IDs are copied as written. Yes in style for the others: Prettier can switch quote marks, add semicolons, and wrap long lines, and SQL keywords are capitalized.

Does it show where a syntax error is?

Yes, when the engine reports a position: the output starts with the line and column and the message, then shows the lines around it with a caret. Nothing is formatted. A few errors come without a position and are shown as a message only.

Which SQL dialects are supported?

20, chosen in the "SQL dialect" list that appears for SQL, among them MySQL, PostgreSQL, SQLite, SQL Server (T-SQL), Oracle (PL/SQL), BigQuery, Snowflake, ClickHouse, and DuckDB. SQL Formatter uses the same engine with a shorter list.

Tips and tricks

  • ✓Paste a minified JavaScript, CSS, or HTML file to make it readable before you debug it.
  • ✓For JSON with 4-space or tab indentation, or sorted keys, use JSON Formatter, which has those options.

Related tools