Code Formatter — Beautify Free Online
Format and beautify JSON, HTML, CSS, JavaScript, TypeScript, and SQL code online for free. Powered by Prettier. Paste code, choose a language, set indent size, and get clean readable output instantly. Runs entirely in your browser.
Input
Formatted Output
Pro — batch format files, custom Prettier config, diff view, Git integration, API
API access · Priority queue · Team workspace
How It Works
Paste Your Code
Paste your code into the Input editor on the left. Select the correct language from the tabs — JSON, HTML, CSS, JavaScript, TypeScript, or SQL. Use the Sample button to load a demonstration snippet for the selected language and immediately see how the formatter transforms it before you paste your own code.
Configure Options
Choose indentation (2 spaces, 4 spaces, or tabs), print width (80, 100, or 120 characters), and whether to use single or double quotes for JavaScript and TypeScript. For JSON, enable Minify to produce compact output instead of beautified output. All options apply immediately when you click Format.
Copy or Download
The formatted code appears instantly in the right panel. Copy it to clipboard or download it as a file with the correct extension for the language (.json, .html, .css, .js, .ts, .sql). The stats bar shows input and output character counts plus the size difference, so you can see how much whitespace was added or removed.
Code Formatter Features
Professional-grade formatting powered by Prettier, running entirely in your browser
Powered by Prettier
Prettier is the industry-standard opinionated code formatter used by millions of developers, maintained by Meta, Google, and open-source contributors. It produces consistent, reproducible output regardless of how the input was originally written. The same formatter runs in VS Code, GitHub, and your CI pipeline — now available directly in your browser.
6 Languages Supported
Format JSON, HTML, CSS, JavaScript (ES2022+, JSX), TypeScript (including generics, decorators, and type annotations), and SQL. Each language uses the appropriate Prettier parser and plugin. JSON uses native browser parsing for maximum speed. SQL uses a built-in keyword tokeniser that adds newlines before major clauses for readability.
Configurable Options
Set indent size (2 spaces, 4 spaces, or hard tab), print width (80, 100, or 120 characters — the target line length before Prettier wraps), and quote style for JS/TS (single or double). These options mirror the standard Prettier config file options so the output matches your project's .prettierrc settings exactly.
JSON Minifier
Toggle Minify mode for JSON to produce compact, whitespace-free output — ideal for API request bodies, embedded configuration strings, localStorage values, and reducing JSON data size before storage or transmission. The minifier uses JSON.parse + JSON.stringify so the output is guaranteed valid and semantically identical to the input.
Code Never Leaves Browser
Prettier runs entirely client-side as a JavaScript bundle. Your code is never transmitted to any server. This makes it safe to format proprietary source code, configuration files with embedded secrets, SQL queries against internal databases, internal API response structures, and any other sensitive code that must stay on your device.
Download with Correct Extension
Download formatted code as a file with the appropriate extension for the selected language: .json, .html, .css, .js, .ts, or .sql. The stats bar shows input size, output size, and the character count difference to confirm the formatting was applied correctly.
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| Languages supported | 6 | All + GraphQL, YAML, Markdown |
| Batch format files | — | |
| Custom .prettierrc config | — | |
| Side-by-side diff view | — | |
| Git integration | — | |
| REST API access | — |
Frequently Asked Questions
Prettier — the industry-standard opinionated code formatter used by millions of developers and projects worldwide. JSON formatting falls back to native JSON.parse + JSON.stringify for maximum speed and compatibility. SQL formatting uses a built-in tokeniser. All formatting runs entirely in your browser.
The Minify checkbox is available for JSON — it removes all whitespace and produces a single-line compact output, which is ideal for API payloads, configuration files, and reducing JSON data size. For JavaScript and CSS minification (removing whitespace, shortening variable names, dead code elimination), use a dedicated minifier tool — Prettier is a formatter, not a minifier.
No. Prettier runs entirely in your browser as a WebAssembly/JavaScript bundle. No code is sent to any server. This makes it safe to format proprietary code, API keys in configuration files, internal business logic, passwords in config files, and any other sensitive source code.
Prettier is opinionated — it enforces a consistent style rather than just re-indenting your code. It may change quote style, add or remove trailing commas, adjust line breaks in function arguments, and reformat ternary expressions. The output is semantically identical (same runtime behaviour) but formatted according to widely adopted style conventions. You can adjust print width and quote style in the options above.