What the code beautifier does
Minified or messy code is hard to read. This tool reformats code into a clean, consistent style using Prettier, one of the most widely used code formatters. It supports JavaScript, TypeScript, JSON, CSS, SCSS, HTML, Markdown and YAML, and updates the result as you type.
Formatting runs in your browser. The formatter files for a language load the first time you use it, which can take a moment.
How to use it
- Choose a language.
- Paste your code.
- Set the indent (2 or 4 spaces) and the line width (80, 100 or 120 columns). For JavaScript and TypeScript you can also turn semicolons and single quotes on or off.
- Copy the formatted code.
Example
Compressed JavaScript before and after:
const add=(a,b)=>{return a+b};function greet(name){if(!name){return "Hello"}return `Hello ${name}`}
→
const add = (a, b) => {
return a + b;
};
function greet(name) {
if (!name) {
return 'Hello';
}
return `Hello ${name}`;
}Good uses
- Reading minified code or a long JSON response you copied from the network tab.
- Cleaning a snippet before you paste it into documentation or a bug report.
- Matching a team style when you do not have the editor set up.
- Reformatting both sides before comparing them in a diff checker.
If you get an error
The formatter can only format valid code. A syntax error, such as a missing bracket or an unclosed tag, is reported instead of output. Fix the first reported problem and try again. Formatting does not rename variables or change behaviour; it only changes layout.
Related tools
- Code Minifier: Minify JavaScript, CSS, HTML, or JSON by stripping comments and unnecessary whitespace.
- SQL Formatter & Beautifier: Format SQL queries with clause-per-line layout and indentation, or minify them. Runs in your browser.
- JSON Formatter & Validator: Format, validate, and beautify JSON with clear error messages for developers.
- Diff Checker: Compare two blocks of text and instantly see line-by-line additions, deletions, and unchanged content.