--- title: "Code Formatter & Beautifier Online | FormatBento" description: "Format JavaScript, TypeScript, JSON, CSS, HTML, Vue, Markdown, YAML, GraphQL, SQL and XML in your browser with Prettier. Auto-detects; nothing is uploaded." url: https://formatbento.me/ --- PrettierSQLXMLin your browser # Code formatter & beautifier Paste JavaScript, TypeScript, JSON, CSS, HTML, Vue, Markdown, YAML, GraphQL, SQL or XML. It detects the language and formats the code in your browser; nothing is uploaded. ## How to use it Paste code into the left compartment, drop a file on it, or press **Sample** to cycle through examples in every language. With **Format on paste** on, pasted code is formatted straight away; otherwise press **Format** or `Ctrl` + `Enter`. Changing an option re-formats the current code. **Download** saves the result with the right extension, using the opened file's name when there is one. ### Language notes - **JavaScript, JSX, TypeScript and TSX**: Prettier's Babel and TypeScript parsers. TypeScript is parsed without JSX so `value` casts work; pick TSX for components. - **JSON**: Prettier's JSON printer keeps key order and comments. If the JSON is actually broken (single quotes, trailing commas, missing brackets), [JSONMender](https://jsonmender.me/) repairs it first. - **HTML, Vue and Markdown**: Scripts, styles and fenced code blocks inside them are formatted too, with the plugin for their language. - **SQL and XML**: Formatted with sql-formatter (standard SQL, upper-case keywords) and FormatBento's own lossless XML printer. Their pages add dialects, keyword case, minifying and attribute wrapping. ## One compartment per language Dedicated formatters with the options each language really needs. - [SQL formatter](https://formatbento.me/sql-formatter/): .sql Twenty dialects from PostgreSQL to BigQuery, keyword and function case, tabular indents and spacing between queries. SELECT name, COUNT(*) FROM orders WHERE shop_id = $1 - [XML formatter](https://formatbento.me/xml-formatter/): .xml Validate, pretty-print or minify. CDATA, comments and xml:space stay intact. - [YAML formatter](https://formatbento.me/yaml-formatter/): .yaml Validate and tidy multi-document YAML with anchors, aliases and comments kept. - [HTML formatter](https://formatbento.me/html-formatter/): .html Prettier for markup, plus a minifier that never touches pre, textarea or inline spacing. - [JavaScript beautifier](https://formatbento.me/javascript-beautifier/): .js Unminify bundles with Prettier, or minify with terser and compare sizes. - [CSS formatter & minifier](https://formatbento.me/css-formatter/): .css Beautify CSS, SCSS and Less. Minify CSS with csso, or with a whitespace-only pass that understands nesting. .bento { display: grid; gap: 2px; } - [GraphQL formatter](https://formatbento.me/graphql-formatter/): .graphql Format queries and schemas, or compact a query onto one line. - [Markdown formatter](https://formatbento.me/markdown-formatter/): .md Aligned tables, consistent list markers and optional prose wrapping. - [Everything stays in this tab](https://formatbento.me/about/): local only Each formatter is JavaScript that runs in your browser. It is downloaded the first time you use a language; your code never leaves the page. ## Recommended Two free tools for the jobs that come after tidy code. Disposable cloud browser ### WebTraceCheck Formatted the markup and want to see it in another browser? WebTraceCheck opens any page in Chrome, Firefox, Edge, Brave or Chromium on an isolated Linux desktop that is deleted after each session. There is free daily time and nothing to install. Its free website audit and technical SEO check are handy once a page is ready to ship. [Try WebTraceCheck](https://webtracecheck.com/) Temporary email & Temp Mail API ### CleanTempMail Testing a sign-up form or the emails your app sends? CleanTempMail gives you an instant inbox with no sign-up, a random or custom address on hundreds of domains, and deletes mail automatically after 3 days. For CI pipelines, the Temp Mail API gives automated tests their own inboxes, paid once per request quota with no subscription. [Get a temporary inbox](https://cleantempmail.com/) ## Questions **Is my code uploaded anywhere?** No. Prettier, sql-formatter and the XML printer run as JavaScript in this tab. The formatter for a language is downloaded from this site the first time you use it; after that nothing is fetched. The site counts page views with Cloudflare Web Analytics, which sets no cookies and never receives what you paste. **How does auto-detect decide the language?** JSON is tried with a strict parser first, markup is judged by its first tag, SQL by its opening keyword and GraphQL by operations and type definitions. Everything else is scored on signals such as type annotations, selectors and key: value lines. Opened files use their extension. When it guesses wrong, pick the language from the menu. **Is the output the same as running Prettier myself?** Yes. This is Prettier 3's own standalone build with its official plugins, so the same options give the same output as the command line. A .prettierrc file is not read, so set print width, quotes and the rest here; your choices are remembered in this browser. **Which options apply to which languages?** Print width, tab width and tabs apply everywhere. Semicolons and trailing commas affect JavaScript and TypeScript, including scripts inside HTML and Vue. Single quotes also apply to CSS and YAML strings, and bracket spacing to objects in JavaScript, JSON, YAML and GraphQL. **Why do I get an error instead of formatted code?** A formatter has to parse code before it can print it, so it needs valid syntax. The error panel shows the line and column, the offending line with a caret under the problem, and a button that puts the cursor there. If the language guess was wrong, picking the right one usually fixes it.