Beautify HTML, CSS, JavaScript, JSON & SQL — entirely in your browser.
How to use CodeMint
CodeMint is a free, browser-based code formatter and beautifier built for developers, designers, and anyone who works with code. Paste messy, minified, or loosely indented code into the left panel, select your language, choose 2- or 4-space indentation, and click Format to get clean, consistently structured output on the right — ready to copy or download. Every operation happens entirely inside your browser: your source code, credentials, and logic never leave your device.
CodeMint supports five languages: HTML, CSS, JavaScript, JSON, and SQL. It uses js-beautify for HTML, CSS, and JavaScript, the browser's native JSON.parse for JSON (which also validates syntax), and a built-in client-side formatter for SQL. No server, no account, no file size limits.
CodeMint is part of privotools, a collection of client-side utility tools built around one principle: your data stays on your device.
Click the language tab at the top of the editor: HTML, CSS, JavaScript, JSON, or SQL. CodeMint uses a different formatting engine for each language, so selecting the right tab ensures correct output.
Select 2 or 4 spaces using the Indent buttons above the editor. Two spaces is standard for web projects (HTML, CSS, JavaScript). Four spaces follows Python's PEP 8 and is common in back-end languages. When in doubt, match your existing codebase.
Paste any code — minified, messy, or normally formatted — into the Input panel on the left. CodeMint works with partial snippets as well as complete files. No file upload is needed; everything stays in your browser tab.
Press the Format button, or use the keyboard shortcut Ctrl+Enter (⌘+Enter on Mac). The formatted output appears in the right panel immediately. For JSON, if your input has a syntax error, a descriptive error message appears instead of incorrect output.
Click Copy to copy the formatted code to your clipboard, or Download to save it as a file with the correct extension (.html, .css, .js, .json, or .sql). The Clear button resets both panels when you are ready to format something new.
CodeMint currently formats five languages. Each is handled by a dedicated engine optimised for that language's syntax rules:
| Language | Engine | What gets formatted |
|---|---|---|
| HTML | js-beautify | Tag indentation, attribute alignment, nested block structure, and embedded CSS and JavaScript blocks |
| CSS | js-beautify | Rule indentation, selector grouping, property line breaks, and brace placement |
| JavaScript | js-beautify | ES5 and ES6+ syntax, arrow functions, template literals, destructuring, object and array notation, and function bodies |
| JSON | Native JSON.parse |
Key-value pairs, nested objects and arrays — with automatic syntax validation. Invalid JSON returns a descriptive error. |
| SQL | Built-in formatter | Keyword capitalization (SELECT, FROM, WHERE, JOIN, etc.), clause line breaks, and WHERE condition indentation |
When you first open CodeMint, your browser downloads the page, stylesheet, and the js-beautify library from Cloudflare's CDN. This is the only network activity that occurs. From that point on, every formatting operation runs entirely inside your browser tab — no server receives your code, no API call is made, no analytics log records your input.
When you click Format (or press Ctrl+Enter), your code is passed
to the appropriate client-side engine: js-beautify for HTML, CSS, or JavaScript; the browser's
built-in JSON.parse for JSON; or CodeMint's own SQL formatter for SQL. The result
is written directly into the output panel. Nothing crosses a network boundary.
You can verify this at any time by opening your browser's Network tab (press F12, then click the Network tab) and watching for requests while you click Format. You will see none. This matters most for developers who routinely paste API keys, database connection strings, auth tokens, or proprietary business logic into formatting tools. CodeMint is designed so that this is never a risk.
HTML formatting in CodeMint uses js-beautify's HTML engine, which understands the
block vs inline distinction between elements. Block elements like <div>,
<section>, and <article> get their own indented block.
Inline elements like <span>, <strong>, and
<a> stay on the same line as their surrounding content wherever possible.
Embedded <style> and <script> blocks are formatted
with the CSS and JavaScript engines respectively.
HTML formatting is particularly useful for working with template output — HTML generated by a CMS, a server-side framework, or a build tool is often compact and unindented. Formatting it makes the structure immediately clear.
CSS formatting ensures every property sits on its own line, selectors are correctly indented, and braces are consistently placed. This is especially useful for minified CSS files (common in production builds) where all rules have been collapsed onto a single line. CodeMint restores the full structure so you can read and edit individual rules without risk of touching adjacent declarations. Media queries, pseudo-selectors, and nested rules are all correctly indented.
JavaScript formatting handles the full range of modern ES6+ syntax including arrow functions, template literals, destructuring assignments, spread operators, async/await, and class syntax. The formatter preserves the logical structure of your code while normalising indentation and brace placement. This is particularly valuable for debugging minified scripts — a single-line bundle of 10,000+ characters becomes a readable file in which individual functions, conditionals, and loops are clearly separated and indented.
JSON formatting in CodeMint uses the browser's native JSON.parse() followed by
JSON.stringify() with pretty-print options. This has an important advantage over
regex-based formatters: it performs full syntax validation. If your JSON has a missing comma,
duplicate keys, a trailing comma (not valid in JSON), or mismatched brackets, the formatter
will report the exact parse error rather than silently producing incorrect output.
This makes CodeMint's JSON formatter useful as both a formatter and a lightweight JSON validator. Paste any JSON string — a config file, an API response, a package.json — and you will either get a clean formatted output or a precise error message indicating exactly what needs to be fixed.
SQL formatting in CodeMint handles the most common formatting tasks: uppercasing reserved keywords (SELECT, FROM, WHERE, JOIN, GROUP BY, ORDER BY, HAVING, LIMIT, etc.), placing each major clause on its own line, and indenting AND/OR conditions within WHERE and HAVING clauses. The result is a query where the logical structure — what is selected, from where, filtered by what, grouped and ordered how — is immediately visible at a glance.
SQL formatting is particularly valuable before adding a query to documentation, sharing it in a code review, or pasting it into a wiki or README. A well-formatted SQL query is self-documenting in a way that a dense single-line query is not.
Consistent formatting pays off most when it becomes a habit at predictable points in your workflow:
The choice between 2-space and 4-space indentation is one of the longest-running debates in software development, and the honest answer is that neither is objectively better — what matters is consistency within a project. That said, there are practical patterns worth knowing:
| Indent size | Common in | Why |
|---|---|---|
| 2 spaces | HTML, CSS, JavaScript, JSON, Ruby, Go | Conserves horizontal space in deeply nested structures; common in front-end and web projects |
| 4 spaces | Python (PEP 8), Java, C#, PHP | Widely used in back-end and systems languages; makes block boundaries more visually distinct |
| Tabs | Go (gofmt), C, Makefiles | Allows each developer to set their own visual width without changing the file; Go enforces tabs via gofmt |
If you are unsure, 2 spaces is a reasonable default for web projects (HTML, CSS, JavaScript). For back-end Python, follow PEP 8 and use 4 spaces. If you are matching an existing codebase, match whatever it already uses — consistency beats any preference.
Unformatted code is a friction cost that compounds quietly. A minified production file, a snippet pasted from documentation with inconsistent indentation, or a SQL query written as a single long line — each one slows down reading, reviewing, and debugging. The logic may be correct, but the structure makes it harder to verify.
Consistent formatting has a direct, measurable effect on the speed of code review. When indentation is uniform and structure is predictable, reviewers focus on what the code does rather than parsing where one block ends and another begins. For teams, this compounds across every pull request. For solo developers, it means returning to your own code a week later and reading it as if it were written by someone who cared.
There is also a security dimension. Minified or obfuscated third-party scripts are increasingly used as a delivery mechanism for malicious code. Formatting a script before executing it — even briefly scanning the output — is a basic sanity check that minification makes impractical without a tool like CodeMint.
CodeMint is built for anyone who works with code and needs a quick, private formatting option without installing anything.
JSON.parse(), which means it validates structure as it formats. If you receive a malformed JSON payload from an API or config file, paste it into CodeMint first — the error message will tell you exactly where the problem is.Yes. CodeMint is completely free with no subscription, sign-up, or hidden fees. The tool is part of privotools, supported by Google AdSense advertising.
No. All formatting runs entirely inside your browser. Once the page and libraries are loaded, no network request is made during formatting. Your source code — including any API keys, tokens, database credentials, or proprietary logic — never leaves your device. Open your browser's Network tab (F12) and click Format to verify: no outgoing requests will appear.
CodeMint currently supports HTML, CSS, JavaScript (ES5 and ES6+), JSON, and SQL. HTML, CSS, and JavaScript use the js-beautify library. JSON uses native browser parsing, which also validates syntax. SQL uses a built-in formatter with keyword capitalization and clause line breaks.
Yes. Formatting minified code is one of CodeMint's most common use cases. Paste any minified HTML, CSS, or JavaScript and click Format to get a cleanly indented, human-readable version. Variable names are preserved — only whitespace and formatting are adjusted.
CodeMint supports 2-space and 4-space indentation. Select your preference using the Indent toggle above the editor before clicking Format. The setting persists for your current session.
Yes. When you format with the JSON tab selected, CodeMint uses the browser's native JSON.parse() to parse your input before formatting it. If the JSON is invalid — missing comma, trailing comma, mismatched bracket, or incorrect value type — you will see a descriptive error message instead of incorrect output. This makes CodeMint useful as both a formatter and a lightweight JSON validator.
Partially. An internet connection is needed to initially load the page and the js-beautify library from the CDN. Once loaded, all formatting runs without further network activity — everything is processed by your own device with no server dependency. If you lose your connection after the page has loaded, formatting will continue to work normally.
A formatter adjusts whitespace, indentation, and layout to make code visually consistent — it does not change what the code does. A linter checks for potential bugs, unused variables, style violations, and other code quality issues — it evaluates the logic and structure of the code, not just its appearance. CodeMint is a formatter. For linting, tools like ESLint (JavaScript), Stylelint (CSS), and HTMLHint (HTML) analyse code quality rather than formatting.
CodeMint uses js-beautify, which is a different engine from Prettier. Both produce clean, indented code, but Prettier applies more opinionated style rules (specific quote styles, semicolon insertion, line-length wrapping) while js-beautify focuses on indentation and structure normalisation. CodeMint is a convenient in-browser option when you need quick formatting without a local development environment. For team-wide enforcement with version-controlled configuration, a locally installed Prettier or EditorConfig setup is the better long-term choice.
Not currently. CodeMint is designed as a single-file editor for quick formatting tasks. For batch formatting across an entire codebase, a command-line tool like Prettier (prettier --write .) or a code editor extension is more appropriate.
For a deeper guide to code formatting practices, read How to Format Code Online: HTML, CSS, JavaScript, JSON, and SQL on the privotools blog.
privotools is a collection of free, browser-based utility tools built around a single principle: your files and data stay on your device. Every tool processes data entirely client-side — no uploads, no servers, no accounts required. Other tools include PixLite (image compressor), WordLens (word counter and text analyzer), KeyForge (password generator), and DevKit (seven developer utilities including JSON formatter, Base64 encoder/decoder, SHA hash generator, URL encoder/decoder, JWT decoder, Unix timestamp converter, and regex tester).