Online code formatter powered by Prettier. Supports JavaScript, HTML, CSS, SQL formatting and safe minification. Protects string literals from being broken.
TL;DR: Free online code formatter powered by Prettier. Supports JavaScript, HTML, CSS, and SQL formatting with safe minification. Protects string literals from being broken, runs locally.
For local tools, open DevTools → Network and search your input — it should not appear in requests.
Usage Guide
Online code formatter for JavaScript, HTML, CSS, and SQL. Choose 2/4-space or tab indentation; Format and Minify follow the selected language and show character vs UTF-8 byte deltas. Powered by Prettier / sql-formatter — runs locally in the browser.
1. How to use
- Paste code and pick the language (JavaScript / HTML / CSS / SQL).
- Set indent: 2 spaces, 4 spaces, or Use tabs.
- Format for readability, or Minify with the language-matched compressor and read the size delta.
- On syntax errors, messages include line/column so you can jump back to the source.
2. Format vs minify
- Format: adds indentation and line breaks for reading, review, and docs.
- Minify: strips spare whitespace (and language-safe comment handling) to compare size or shrink a snippet.
- The panel shows both character and UTF-8 byte counts — with CJK comments, bytes track transfer cost more closely.
3. When to use the online version
- Quick cleanup: forum snippets, minified production fragments, messy paste from a teammate.
- Size contrast: Format then Minify to see the readable vs ship-ready footprint.
- Temporary environments: machines without an IDE or Prettier.
4. Online vs IDE plugin
For long-lived repos, install Prettier (or similar) with a committed project config. This tool is “few-knob instant formatting”: indent width and tabs/spaces are adjustable; quotes and semicolons stay on Prettier defaults. If output differs from your .prettierrc, the project config wins.
FAQ
JavaScript, HTML, and CSS go through Prettier; SQL uses sql-formatter. Minify picks the compressor for the active language, so HTML is never fed to the JS minifier, and the result panel shows a character and byte count for comparison.
Indentation switches between 2 spaces, 4 spaces, and tabs; quotes and semicolons stay on Prettier's defaults. For .prettierrc-level control, configure Prettier in your IDE or CI instead.
Yes. Parse failures carry line and column numbers when the engine provides them (for example line 3, column 7), and the page highlights that spot so you can jump back and fix it. After switching languages, click Format once more.
No, and it does not aim to. This page is for tidying pasted snippets on the fly; team projects should treat editor and CI config as the source of truth. Minified code is also hard to debug, so keep the pre-minify original.
No. Formatting and minification run entirely in your browser, and nothing survives after the page closes. If a snippet contains secrets or personal data, mind secondary exposure through screen sharing, clipboards, and downloaded files.
Related Tools
Related Articles
Online Code Formatter: Beautify JavaScript, HTML, CSS, and SQL
Use a browser-local code formatter for JavaScript, HTML, CSS, and SQL — indent options, parse error line numbers, Format vs Minify size deltas, and how it splits work with IDE Prettier.
HTTP Status Codes Reference: Quick Lookup Guide
Complete HTTP status code reference. Understand 1xx, 2xx, 3xx, 4xx, 5xx categories, common scenarios, and correct usage in API development.
ASCII vs Unicode vs UTF-8: Character Encoding Finally Explained
ASCII has 128 characters, Unicode covers 140k+, UTF-8 is Unicode's variable-length encoding. Learn the difference, byte vs character length, and why most encoding bugs happen.