MultiKit

Code Formatter Online: Format JavaScript, TypeScript, HTML, CSS and More

  • Free
  • No sign-up
  • Runs in your browser
  • Version 1.1.1
  • Last updated 2026-10-25
Report a problem

Paste messy code and get it back laid out the way Prettier would write it, with consistent indentation, spacing and line breaks. It runs in your browser, so your code is never uploaded.

Not all options apply to every language. Semicolons, quotes and trailing commas affect JavaScript and TypeScript; indent and line width apply to all.

Safe never changes spacing next to a tag, even if that splits its closing > onto its own line. Prettier-looking reads better but, rarely, can add or remove a space next to a tag written with none on purpose.

Everything you enter is processed in your browser and is never sent to a server.

How to use

  1. Paste your code, or open a file. The language is detected for you; change it with the Language list if it guesses wrong.
  2. Choose the indent (2 spaces, 4 spaces or tabs) and the line width. For JavaScript and TypeScript you can also turn semicolons and single quotes on or off, and choose trailing commas.
  3. The formatted code appears on the right as you type, or press Format. If the code has a syntax error, the line and column are shown instead.
  4. Copy the result or download it as a file. Use Send to for other tools, or Use result as input to format it again with other options.

Examples

const users=[{name:'Ada',age:36},{name:'Lin',age:28}]
→ const users = [
  { name: "Ada", age: 36 },
  { name: "Lin", age: 28 },
];
Spaces are added, quotes are made double and a trailing comma is added where the list runs over several lines.
body{margin:0;font:16px/1.5 sans-serif}.card{display:flex}
→ body {
  margin: 0;
  font: 16px/1.5 sans-serif;
}
.card {
  display: flex;
}
Each rule and each property goes on its own line.
const a = {
  b: ,
};
→ Line 2: Unexpected token
When the code cannot be parsed, nothing is changed and the place of the error is shown.

How it works

The formatting is done by Prettier, the open-source code formatter, running in your browser. It does not patch the spacing of what you wrote. It parses the code into a syntax tree, throws away the original layout, and prints the tree again with its own rules and your options, so the same code always comes out the same way whatever it looked like before. Comments are kept, and Prettier keeps a blank line between statements where you had one.

Each language has its own parser, and a parser is loaded only when it is used: the babel parser for JavaScript, JSX and JSON, the TypeScript parser, the PostCSS parser for CSS, SCSS and Less, and parsers for HTML and Vue, Markdown, YAML, GraphQL and Handlebars. HTML and Vue also format the style and script blocks inside them. The tool is tested with each language, with the options, and with code that has syntax errors.

The language is guessed from the code, for example JSON that parses, a document that starts with HTML tags, or type annotations that point to TypeScript, and from the file name when you open a file. It is a guess, so change it if it is wrong.

Sources

Frequently asked questions

How do I format code online?
Paste the code, check the language, and read the result on the right. The code is laid out by Prettier, a code formatter used by many projects, with your choice of indentation and line width.
Which languages are supported?
JavaScript (with JSX), TypeScript (with TSX), JSON, JSON5, HTML, Vue, CSS, SCSS, Less, Markdown, YAML, GraphQL and Handlebars. Other languages such as Python, Java or PHP are not supported by Prettier itself. For SQL, use the SQL Formatter tool.
Does formatting change what my code does?
No. Prettier only changes layout: spacing, line breaks, indentation, quotes and where parentheses and commas are optional. It parses the code and prints it again, and it stops with an error if the code is not valid, so it never guesses at broken code.
Why does a long HTML tag sometimes end with its closing > alone on the next line?
That is Prettier's default, and the safe choice: for an inline element such as <a> or <span>, a space next to the tag can change how the page renders, so when the tag has to wrap onto several lines, Prettier moves the > rather than ever add or remove a space. HTML tag wrapping on this page lets you switch to a plainer style instead, which reads better but, rarely, can add or remove a space next to a tag that was written with none on purpose.
Why does it show an error instead of formatting?
The code has a syntax error, or the language is wrong. The message shows the line and column. Check that the Language list matches your code, then fix the error and the result appears.
Can I use my own style, such as no semicolons?
Yes: semicolons, single quotes, trailing commas, the indent and the line width can be changed. These choices follow Prettier's options, so a project that uses Prettier with the same options will format the same way.
Is my code uploaded?
No. Prettier runs in your browser. Your code is not sent to a server.
What is the difference from the JSON Formatter or SQL Formatter?
The JSON Formatter also repairs and sorts JSON, and the SQL Formatter understands SQL dialects. This tool formats many languages with one set of options. It handles JSON too, and Send to passes results between these tools.
Version history
  • 1.1.1 — Clarifies the search title with the tool's main task and whether it is free or runs online.
  • 1.1.0 — Adds an HTML tag wrapping option: Prettier's default never changes spacing around a tag, even if that means a closing > lands alone on its own line; Prettier-looking formats more plainly but can rarely add or remove a space.
  • 1.0.0 — First release.

Last updated: