JavaScript Formatter

About JavaScript Formatter

How Does JavaScript Formatting Work?

Code formatters restructure source code by adding whitespace and line breaks without changing how the code executes. There are two main approaches to formatting JavaScript:

Brace-counting (this tool): The formatter scans your code character by character, tracking the nesting depth. Every time it encounters an opening brace { or bracket [, it increases the indent level and inserts a newline. Closing braces and brackets decrease the indent. Semicolons and commas trigger line breaks too. String literals (single-quoted, double-quoted, and template literals) are preserved exactly as-is so nothing inside them gets altered.

AST-based (Prettier, Biome): These tools parse the entire file into an abstract syntax tree - a data structure where each node represents a language construct like a variable declaration, function call, or conditional. The formatter then walks the tree and regenerates code from scratch with consistent spacing. This handles complex syntax like destructuring, arrow functions, and ternary chains more reliably, but requires a full parser.

Character	Action
{ or [	Newline after, increase indent level
} or ]	Decrease indent level, newline before
;	Newline after (end of statement)
,	Newline after (in object/array contexts)
String literals ('...', "...", `...`)	Preserved exactly - no modifications inside strings

For JSON input, the tool detects it automatically. It runs the text through JSON.parse() followed by JSON.stringify() with your chosen indentation, which produces perfectly formatted output every time.

Worked Example: Minified to Formatted

Take this minified one-liner (163 characters):

const config={name:"App",version:"2.0",settings:{theme:"dark",lang:"en"},features:["auth","reports"]};console.log(config.name);

After formatting with 2-space indentation, it becomes:

const config = {
  name: "App",
  version: "2.0",
  settings: {
    theme: "dark",
    lang: "en"
  },
  features: [
    "auth",
    "reports"
  ]
};
console.log(config.name);

The formatted version is 220 characters - about 35% larger - but the structure is immediately visible. You can see the nesting of settings inside config, the array contents of features, and where each statement ends. The code runs identically either way.

Which Indentation Style Should You Use?

A survey by Artem Sapegin of the 100 most depended-upon npm packages found that 2-space indentation dominates JavaScript. The three most popular style guides - Airbnb, Google, and Standard - all specify 2 spaces. Prettier also defaults to 2 spaces.

Style	Who Uses It	Pros	Cons
2 spaces	Airbnb, Google, Standard, React, Vue, Node.js core	More code visible on screen, dominant in JS ecosystem	Harder to visually distinguish deep nesting
4 spaces	WordPress, some PHP-origin projects	Clear visual hierarchy, easy to spot nesting levels	Deep nesting pushes code far right
Tabs	WordPress JS, Go (by convention), some C projects	User-configurable width in editors, smaller files	Rare in the JS ecosystem, inconsistent display in some tools

If you're starting a new JavaScript project, 2 spaces is the safest default. It matches what most open-source packages use and what most contributors expect. The Airbnb style guide is the most popular JavaScript style configuration on GitHub and the most commonly used base for ESLint setups.

When to Use This Tool

Online formatters fill the gap between no tooling and a full local setup. Here are the most common scenarios:

Scenario	How It Helps
Reading minified production code	Production bundles strip all whitespace. Minification typically reduces file size by 30-70% (according to DebugBear). This tool reverses that, making bundled JS readable for debugging.
Inspecting third-party scripts	CDN scripts and analytics snippets are usually minified. Formatting them reveals what the script actually does before you trust it on your site.
Debugging API responses	REST APIs often return compact JSON with no whitespace. Paste the response here to see the structure with proper nesting.
Code review on machines without your editor	On a shared computer or a device without VS Code, this tool formats code without installing anything.
Cleaning up pasted code	Code copied from Stack Overflow, GitHub issues, or Slack often has mixed indentation. One click fixes it.

Formatter vs Linter vs Minifier

These three tool types are complementary but do very different things. Mixing them up can cause confusion, especially when setting up a project for the first time.

Tool Type	What It Does	Changes Logic?	Examples
Formatter (this tool)	Adds indentation and line breaks for readability	No - whitespace only	Prettier, Biome (format mode), this tool
Linter	Checks code quality, catches bugs, enforces style rules	Auto-fix can change code (e.g. adding missing semicolons, converting var to const)	ESLint, Biome (lint mode)
Minifier	Removes whitespace, comments, and shortens variable names	Basic: no. Advanced (Terser level 3): yes - dead code elimination, inlining	Terser, esbuild, SWC

The recommended setup for most JavaScript projects is Prettier for formatting plus ESLint for linting, with eslint-config-prettier to turn off any ESLint rules that conflict with Prettier. Biome is a newer alternative written in Rust that combines both formatting and linting into a single tool with much faster execution. As of early 2026, Biome is gaining adoption but Prettier still dominates with over 80 million weekly npm downloads.

This Tool vs Prettier

Prettier is the standard for local JavaScript formatting. With over 80 million weekly npm downloads and 51,000+ GitHub stars, it's the most widely used code formatter in the JavaScript ecosystem. But it requires Node.js and a config file. This tool fills a different niche.

	This Tool	Prettier
Setup	None - paste and click	npm install, .prettierrc config file
Languages	JavaScript + JSON	JS, TS, HTML, CSS, Markdown, GraphQL, and more
Parsing approach	Brace-counting (pattern-based)	Full AST parser
Edge case handling	Good for most code	Handles all valid syntax
Line length wrapping	No (preserves original line structure)	Yes (re-wraps lines at configurable width, default 80)
CI integration	No	Yes (pre-commit hooks, GitHub Actions)
Best for	Quick one-off formatting, reading minified code	Project-wide consistent styling

For quick formatting tasks, this tool is faster than installing Prettier. For project-wide formatting integrated into your editor and CI pipeline, Prettier is the better choice. The two are not competitors - they serve different use cases.

How Does JSON Formatting Differ?

When this tool detects valid JSON input, it switches to a different formatting strategy. Instead of brace-counting, it runs the input through JSON.parse() to build a native JavaScript object, then serialises it back with JSON.stringify(obj, null, indent). This guarantees perfect output because the JSON specification (ECMA-404, maintained by Ecma International) has a much simpler grammar than full JavaScript - no function declarations, no comments, no template literals.

JSON formatting is useful when working with REST API responses, configuration files (package.json, tsconfig.json), or data exports. A typical API response arrives as a single line of compact JSON with no whitespace. Formatting it reveals the structure immediately. For example, a 2KB single-line API response might contain 15 nested objects and 40 key-value pairs that are nearly impossible to read without indentation.

One thing to note: JSON.stringify sorts nothing. Object keys appear in insertion order, which is the order they appear in the original JSON. If you need alphabetical key sorting, a dedicated tool like the JSON Formatter offers that along with syntax highlighting and validation messages.

Common Formatting Mistakes

A few patterns trip up developers regularly when formatting or reading formatted code:

Inconsistent indentation in a team. If half the team uses 2 spaces and the other half uses 4, git diffs become noisy with whitespace-only changes. Pick one standard and enforce it with a .editorconfig or Prettier config committed to the repository root.

Formatting generated or vendor code. Build output, compiled files, and vendored libraries should not be formatted. Add them to .prettierignore or equivalent to avoid unnecessary churn in pull requests.

Confusing formatting with linting. A formatter only changes whitespace and line breaks. It will not catch unused variables, missing error handling, or type mismatches. Use ESLint or Biome alongside your formatter for code quality checks.

Reformatting inside string literals. A naive formatter might break strings that contain code or templates. This tool preserves all string content - single-quoted, double-quoted, and backtick template literals - without modification.

Not formatting before committing. Running a formatter as a pre-commit hook (via Husky or lint-staged) means every commit has consistent style. Without it, formatting inconsistencies creep in gradually until someone runs a bulk format that creates a massive diff touching every file.

Browser DevTools vs This Tool

Chrome, Firefox, and Safari all have built-in pretty-print buttons in their Sources/Debugger panels. These work well for inspecting scripts loaded by the current page, but they have limitations. Browser pretty-printers format the code in place within the DevTools panel - you cannot easily copy the formatted output, adjust the indent size, or format code from a different source like a clipboard paste or a file on disk.

This tool complements DevTools by giving you a standalone formatting surface. Paste any code from any source, pick your indentation, and copy the result. It is particularly handy for formatting code snippets from documentation, chat messages, or email that are not loaded in a browser tab.

For the reverse operation, the JavaScript Minifier compresses code by removing whitespace and comments. For JSON specifically, the JSON Formatter offers validation and syntax highlighting. And if you need to format other web languages, the HTML Prettifier handles HTML and the SQL Formatter covers database queries.

All processing runs locally in your browser using JavaScript string operations. Your code is never uploaded or sent anywhere.

Sources

• Prettier - Formatting Options
• Airbnb JavaScript Style Guide
• Google JavaScript Style Guide
• MDN - JSON.stringify
• ECMA-404 - The JSON Data Interchange Syntax
• Biome - Formatter Documentation