simpletool.io Browse tools

Tag: Code Style

  • CSS Formatter: Beautify CSS, SCSS, LESS in Browser [2026]

    CSS Formatter: Beautify CSS, SCSS, LESS in Browser [2026]

    TL;DR: A CSS formatter (or “CSS beautifier”) reformats minified, copied, or messy CSS into consistently-indented, readable rules. Use it on copied CSS from a CDN, AI-generated styles, or styles dumped from DevTools. Our free CSS formatter uses Prettier 3 in your browser with full support for modern CSS — custom properties, native nesting, container queries, @layer, OKLCH — plus SCSS, LESS, and PostCSS.

    Reading minified CSS is a productivity tax. Tailwind’s compiled stylesheet is one giant line; a copied snippet from CodePen often arrives as a single rule with no breaks; CSS dumped from DevTools’ “Copy all declarations” comes back without the selectors that gave each rule meaning. A formatter restores hierarchy: each rule on its own line, properties indented, @media blocks visible at a glance.

    Our CSS formatter runs Prettier 3 in your browser with the same parser used by VS Code’s “Format Document” command. It handles plain CSS, SCSS, LESS, PostCSS, and modern CSS features (CSS variables, native nesting, :has(), container queries, @layer, OKLCH, color-mix()). Outputs clean, idiomatic CSS that round-trips through any tool. This guide covers when to format vs minify, the SCSS-specific rules, and the gotchas with copied browser DevTools styles.

    Prettier CSS options that matter

    Option Default Notes
    printWidth 80 Affects wrapping of long selectors and value lists
    tabWidth 2 Standard for modern CSS; 4 for legacy stacks
    singleQuote false Strings in url() and content: values
    endOfLine “lf” “crlf” only for Windows-only repos
    Property sort off Optional — alphabetical, or by Idiomatic CSS groupings

    Prettier’s CSS formatter is deliberately small on options. Modern CSS toolchains add property sorting via separate plugins — stylelint-config-prettier + stylelint-order — rather than baking it into the formatter.

    SCSS, LESS, and PostCSS

    The same Prettier engine handles three preprocessor dialects:

    • SCSS: nested selectors, @mixin, @include, @if/@else, @function, dollar-prefixed variables. Indentation follows nesting depth.
    • LESS: mixins as classes, @variable syntax, guards. Slightly different rules than SCSS.
    • PostCSS: raw CSS plus plugin-specific syntax. Prettier formats whatever is valid CSS-AST — plugin syntax (e.g., @apply from Tailwind) passes through.

    Pick the parser explicitly when auto-detection fails. .scss file extension defaults to SCSS; .less defaults to LESS; .css defaults to plain CSS. Paste-mode without an extension defaults to plain CSS, which can produce odd output for SCSS code (mixin syntax becomes invalid CSS).

    How to format CSS in your browser

    1. Open the CSS formatter
    2. Paste your CSS or drop in a .css/.scss/.less file
    3. Pick the parser if auto-detect doesn’t catch it
    4. Adjust print width and indent style if needed
    5. Click Format — output appears with syntax highlighting
    6. Copy or download as .css

    Modern CSS that older formatters break

    Older CSS beautifiers (cssbeautify, online-beautify) corrupt several modern features:

    • Native nesting: .card { .title { color: red; } } — older formatters flatten or fail to parse. Prettier handles nesting correctly.
    • Container queries: @container (width > 400px) { … } — preserved with all syntax variants.
    • :has() selector: the parent selector is preserved without quote-mangling.
    • OKLCH and color-mix(): new colour formats pass through unchanged.
    • @layer: cascade layer ordering is preserved exactly — never reordered, since order has semantic meaning.
    • CSS custom properties: long fallback chains (var(--a, var(--b, red))) are preserved verbatim.

    Common gotchas

    • Tailwind utility class output is not formatted. Tailwind generates a flat list of single-rule classes; formatting won’t help. Format your custom CSS only — let Tailwind manage its own output.
    • DevTools “Copy all declarations” loses selectors. The clipboard gets color: red; padding: 8px; with no .btn { … } wrapper. Format won’t recover the selector — re-copy with the selector context.
    • Property order is preserved by default. CSS cascade-sensitive code relies on order for shorthand-then-override patterns (margin: 0; margin-top: 8px;). Don’t enable property sorting if you have that pattern.
    • SCSS @mixin formatting is opinionated. Prettier always inlines short mixin calls; long ones wrap. Your style guide may differ. Override locally with // prettier-ignore comments above specific blocks.
    • Don’t format minified CSS and re-deploy. Format your source files; let your build step minify the output. Formatted production CSS is 30% bigger and slower.
    • Older Prettier versions handle modern CSS poorly. Always use Prettier 3+ for native nesting, container queries, and the OKLCH colour space. Prettier 2.x will silently produce wrong output for these.

    When NOT to use a browser CSS formatter

    For a real codebase, install Prettier locally (npm i -D prettier), commit a .prettierrc, and let editors format on save. That eliminates style drift across collaborators. Use this browser tool for one-off snippets, copy-paste from CodePen / DevTools / AI assistants, third-party stylesheets you need to inspect, and quick previews of how Prettier would render styles in a project that doesn’t have it set up yet. For Stylelint integration, install stylelint-config-prettier alongside Prettier locally.

    Frequently asked questions

    Does this support SCSS, LESS, and PostCSS?

    Yes. Prettier 3 handles plain CSS, SCSS, LESS, and PostCSS. Auto-detection picks the parser from the file extension; you can override manually for paste-mode (file extension is unknown).

    Will the formatter sort my properties alphabetically?

    Not by default. Prettier preserves property order — important because some CSS relies on order for shorthand-then-override patterns. Property sorting is a separate Stylelint plugin (stylelint-order); install it locally if you want sorted output.

    Does it support modern CSS features like nesting and container queries?

    Yes. Prettier 3 handles native CSS nesting, container queries, :has(), @layer, OKLCH, color-mix(), and relative-colour syntax. Older formatters break these — always use Prettier 3+ for modern stylesheets.

    Can I unformat (minify) CSS with this tool?

    No — opposite operations. For minification, use the CSS Minifier. The typical pipeline: format while editing, minify before deploying.

    Is my CSS uploaded?

    No. Prettier runs in your browser via WebAssembly. Stylesheets never reach our servers — useful for proprietary or pre-release styles.

    Why does my SCSS look wrong after formatting?

    Most likely the parser was set to plain CSS instead of SCSS. SCSS-specific syntax (@mixin, @include, dollar variables) is invalid CSS. Switch the parser to SCSS and reformat.

    Related tools and guides

     

  • JavaScript Formatter: Beautify JS with Prettier [2026]

    JavaScript Formatter: Beautify JS with Prettier [2026]

    TL;DR: A JavaScript formatter (also called a beautifier) reformats messy or minified JS into consistently-indented, readable code. Our free JavaScript formatter runs Prettier 3 in your browser — the same engine 80%+ of professional JS teams ship — with full TypeScript and JSX support, configurable print width, semis, and quote style. No upload, paste any size.

    Inconsistent formatting is the silent productivity tax of every codebase. Two engineers who disagree about semicolons or trailing commas will spend more time arguing about diffs than fixing bugs. The industry settled this argument in 2017 when Prettier shipped: pick a config once, run the formatter on save, and the rest is mechanical. By 2026, Prettier is the default formatter in VS Code, the default in Next.js / Remix / Vite scaffolds, and a hard requirement on most engineering teams.

    Our JavaScript formatter runs Prettier 3 in your browser via WebAssembly. It handles JavaScript (ES2024), TypeScript, JSX, TSX, JSON, and Markdown code blocks. Use it to beautify a one-liner you copied from a build output, to reformat code from a tutorial that uses different indentation than your project, or to apply Prettier without installing anything. This guide covers every option, the differences vs Beautify.js, and when to use a formatter vs a minifier.

    Prettier options that matter (and the defaults to start with)

    Option Default When to change
    printWidth 80 100 or 120 if your team uses wide monitors
    tabWidth 2 4 only if you write Java/C# style or for accessibility
    useTabs false true for accessibility (screen readers can adjust width)
    semi true false if your team writes Standard JS / no-semi style
    singleQuote false true for most codebases (preferred by Airbnb / Standard)
    trailingComma “all” “es5” if targeting old browsers (rare in 2026)
    bracketSpacing true false to compress (against the Prettier philosophy)
    arrowParens “always” “avoid” if your style guide forbids parens around single arrow args

    The defaults are deliberately opinionated. Prettier’s design philosophy is “you don’t get to choose 30 micro-options” — pick a print width and a quote style and stop bikeshedding. Most teams adjust at most 3 fields.

    Prettier vs Beautify.js vs ESLint –fix

    • Prettier: opinionated, fast, only handles formatting (no logic). Makes formatting a non-decision.
    • Beautify.js: the older formatter (jsbeautify). More configurable, less consistent. Still acceptable for one-off cleanup but hasn’t been the team standard since 2018.
    • ESLint –fix: a linter that can reformat. Powerful but slower than Prettier and requires you to author the rules. Most teams run ESLint and Prettier — Prettier handles whitespace, ESLint handles correctness (unused vars, missing await).
    • Editor-only: VS Code’s built-in formatter is OK for ad-hoc edits but doesn’t enforce a project-wide style.

    Use Prettier for production code; use this browser tool for one-off snippets where installing Prettier locally is overkill.

    How to format JavaScript in your browser

    1. Open the JavaScript formatter
    2. Paste your code (works for JS, TS, JSX, TSX, JSON)
    3. Pick parser (auto-detect usually works) and adjust print width, semis, quotes
    4. Click Format — output appears with syntax highlighting
    5. Click Copy or Download

    TypeScript and JSX formatting (the parser matters)

    Prettier auto-detects in most cases, but ambiguity is real: <Foo>bar</Foo> is JSX in a .jsx file and a TypeScript type assertion in a .ts file. Tell the formatter explicitly which parser to use:

    • babel — JS with JSX (default for most React code)
    • typescript — TS without JSX
    • babel-ts — TS with JSX (TSX files)
    • json — JSON / JSON5 / package.json
    • flow — Facebook’s Flow type annotations (declining usage)

    Picking the wrong parser produces silent failures — Prettier returns the input unchanged. If formatting “did nothing”, switch the parser.

    Common gotchas

    • Don’t format generated code. If a file ends in .min.js, don’t re-format it — variable names are mangled, formatting won’t recover them, and you’ll bloat your repo with un-debuggable output.
    • Prettier won’t fix logic. Missing semicolons in ASI-trap positions (return\n[1,2,3]) get a semicolon inserted — the code’s behaviour stays “broken”. Use ESLint’s no-unreachable for those.
    • Magic strings inside string templates aren’t formatted. Code inside template literals (`code goes here`) is treated as a string. To format embedded code, extract it.
    • JSON allows trailing commas only with parser “json5”. Standard JSON doesn’t permit them. The default json parser strips trailing commas.
    • Prettier 3 changed defaults from Prettier 2. trailingComma default went from "es5" to "all". If you regenerate a file with v3 and check it in, expect comma-only diff noise.
    • Auto-format on save can fight version control. If two devs use different Prettier versions, every save generates noise. Pin a version with "prettier": "3.x" in your package.json and commit the .prettierrc.

    When NOT to use a browser formatter

    For a real codebase, install Prettier locally (npm i -D prettier), commit a .prettierrc, and configure your editor to format on save. That gives every collaborator the same output and removes formatting from code review entirely. Use this browser tool for one-off snippets, code from a tutorial that disagrees with your style, copy-paste from build logs, or quick previews of how Prettier would render code in a project that doesn’t have it set up yet.

    Frequently asked questions

    Does this support TypeScript and JSX?

    Yes. The formatter ships Prettier 3 with all the standard parsers: babel (JS+JSX), typescript (TS), babel-ts (TSX), json, and flow. Auto-detect picks the right parser from the file extension when you upload, or you can override the parser manually for paste-mode.

    Can I save my Prettier config?

    Settings persist in your browser’s localStorage between sessions. There’s also a “Copy as .prettierrc” button that exports your settings as a JSON file ready to drop into a project root.

    What’s the difference between formatting and minifying?

    Opposite jobs. Formatting adds whitespace and indentation for readability (build-time → editor view). Minifying removes whitespace and renames variables to shrink file size (editor → build → CDN). Use a formatter while you’re writing code; use a minifier as the last step before deploy.

    Can I format minified code back into readable code?

    Partially. Whitespace and indentation are restored; structure is recovered. But variable names that were mangled to a, b, c stay mangled — that information is gone unless you have the original source map. Use this for “what does this function do?”-grade reverse engineering, not for full source recovery.

    Is my code uploaded?

    No. Prettier runs in your browser via WebAssembly. Code is never uploaded to our servers — safe for proprietary, pre-release, or sensitive code.

    What’s the size limit?

    Effectively your browser’s available memory. Prettier handles files of several MB without trouble; very large files (10K+ lines) can take 2–5 seconds. For batch formatting of many files, use Prettier locally via npx prettier --write instead.

    Related tools and guides

     

  • HTML Formatter: Beautify HTML with Prettier [2026]

    HTML Formatter: Beautify HTML with Prettier [2026]

    TL;DR: An HTML formatter (or “HTML beautifier”) takes minified, copied, or messy HTML and reformats it with consistent indentation, line wrapping, and attribute alignment. Use it on copied HTML you need to read or edit, AI-generated markup, or scraped pages. Our free HTML formatter uses Prettier 3 in your browser with full support for HTML5, Vue, Svelte, Angular, and Handlebars templates.

    Reading minified HTML is like reading a one-line essay — every tag and attribute is jammed together with no visual structure. Try to debug a layout issue or insert a new element and you spend more time finding your place than fixing the bug. A formatter restores the structure: each block-level element on its own line, nested elements indented, long attribute lists wrapped, and closing tags aligned with their opens.

    Our HTML formatter runs Prettier 3 in your browser. It auto-detects HTML5, Vue single-file components, Svelte, Astro, Angular, and Handlebars templates. Configurable: indent width, attribute-per-line wrap threshold, void-element style (<br /> vs <br>), and whether to wrap long lines. Paste any size, get clean output, copy or download.

    Prettier HTML options that matter

    Option Default When to change
    printWidth 80 100–120 if you have many attributes per element
    tabWidth 2 4 only if matching legacy code
    htmlWhitespaceSensitivity “css” “strict” if rendering depends on inline whitespace
    singleAttributePerLine false true for very wide attribute lists
    bracketSameLine false true to keep > at end of last attribute line
    endOfLine “lf” “crlf” only for Windows-only repos

    The whitespace-sensitivity setting (the option you’ll actually want to think about)

    HTML treats whitespace inconsistently. Inside a <p>, multiple spaces collapse to one. Inside a <pre>, every space is preserved. Between two inline elements (<span>a</span> <span>b</span>), the space between affects layout. Prettier’s htmlWhitespaceSensitivity option controls how aggressively the formatter rearranges whitespace:

    • “css” (default): respect CSS display defaults. Block-level elements get their own lines; inline elements stay on the same line where whitespace would matter. Best for most modern pages.
    • “strict”: never break a line where doing so would add or remove whitespace that affects rendering. Safest but produces longer lines.
    • “ignore”: format aggressively, ignoring the impact on rendering. Use only if you control the CSS and know your inline elements have white-space rules that override the default.

    Most pages format cleanly with the default. If you see layout shifts after formatting, switch to “strict” and reformat.

    How to format HTML in your browser

    1. Open the HTML formatter
    2. Paste your HTML or drop in a .html file
    3. Pick the parser (auto-detect usually works): html, vue, angular, handlebars, svelte
    4. Adjust print width and tab width to match your project
    5. Click Format — output appears with syntax highlighting
    6. Copy or download

    Templating-language support

    Prettier handles plain HTML, but real codebases often have templating syntax mixed in. Prettier 3 supports:

    • Vue: single-file components (.vue) with <template>, <script>, <style> blocks formatted independently.
    • Svelte: .svelte files including {#if} / {#each} blocks and reactive declarations.
    • Angular: *ngIf, *ngFor, and binding syntax ([prop], (event)) preserved.
    • Handlebars / Mustache: {{…}} and {{#each}} blocks indented like HTML elements.
    • Astro: via the prettier-plugin-astro plugin.

    For JSX (React), use the JavaScript Formatter instead — JSX lives in JS files and the JS parser handles both.

    Common gotchas

    • Whitespace inside <pre> and <textarea> is preserved. Prettier doesn’t touch their content. If yours looks wrong, the issue was already in your source.
    • Self-closing void elements: Prettier 3 outputs <br> (HTML5 default) not <br /> (XHTML). To force XHTML style, post-process or use a different tool — there’s no built-in option in Prettier 3.
    • Comments above tags get attached to them. Prettier may move comments slightly to keep them tied to the right element. Usually fine; occasionally surprising.
    • Custom Web Components are formatted like regular HTML elements. A <my-button> with attributes wraps the same way <button> does. No special handling needed.
    • Don’t format AI-generated HTML and ship it without checking. AI tools sometimes produce <div>…<span>…</div> with mismatched tags; the formatter happily produces beautifully indented broken HTML. Validate with the W3C validator after formatting.
    • Inline event handlers stay inline. Inline on* attributes (on​click, on​load) aren’t reformatted. Use external script tags for anything non-trivial.

    When NOT to use a browser HTML formatter

    For a real codebase, install Prettier locally (npm i -D prettier), commit a .prettierrc, and configure your editor to format on save. That eliminates formatting drift between developers. Use this browser tool for one-off snippets, copied HTML from a CMS or AI assistant, scraped markup you need to inspect, and pages built without a build pipeline. Don’t run the formatter on minified production HTML and re-deploy — keep source and minified output as separate artefacts.

    Frequently asked questions

    What’s the difference between an HTML formatter and a beautifier?

    Same thing, different name. “Formatter” is the modern term (Prettier, dprint); “beautifier” is older (jsbeautify, HTML Tidy). Both reformat messy or minified markup into readable, indented output.

    Can I format Vue, Svelte, or Astro components?

    Yes. Prettier 3 handles Vue single-file components, Svelte files, Angular templates, and Astro components natively. Auto-detection picks the parser from file extension; you can override manually for paste-mode input.

    Will formatting change how my page renders?

    With the default htmlWhitespaceSensitivity: "css", no — Prettier respects CSS display rules and only adds whitespace where it doesn’t affect rendering. Edge cases involving custom white-space CSS may need htmlWhitespaceSensitivity: "strict" to be safe.

    Can I unformat (minify) HTML with this tool?

    No — formatting and minifying are opposite operations. For minification, use the HTML Minifier. Format while editing; minify before deploying.

    Is my HTML uploaded?

    No. Prettier runs in your browser via WebAssembly. Pasted markup never reaches our servers — useful for proprietary or pre-release pages.

    Can I save my Prettier config?

    Yes. Settings persist in your browser’s localStorage between sessions. There’s also a “Copy as .prettierrc” button that exports your settings as JSON ready to drop into a project root.

    Related tools and guides