[{"data":1,"prerenderedAt":54},["ShallowReactive",2],{"tool-guide:web-code-formatter":3},{"overview":4,"whatIs":5,"useCases":6,"steps":12,"commonMistakes":18,"relatedStandards":24,"example":34,"limitations":38,"faq":41},"Web Code Formatter uses language-aware parsers to format or conservatively minify HTML, CSS, and modern JavaScript while keeping the source inside the browser.","Consistent code formatting is essential for readability, code reviews, and team collaboration. While tools like Prettier run in a build pipeline, sometimes you need to quickly format a snippet from a Stack Overflow answer, a browser DevTools extract, or a minified production file. This tool formats HTML, CSS, and JavaScript using dedicated language-aware parsers that understand the syntax of each language: HTML formatting respects void elements, attribute quoting, and self-closing tags; CSS formatting handles selectors, properties, media queries, and custom properties; JavaScript formatting handles modern ES2024+ syntax including optional chaining, nullish coalescing, and template literals. Minification mode removes whitespace and line breaks to produce compact output, but preserves identifiers (no variable renaming) for readability. This is useful for quick size reduction or preparing inline styles and scripts, not as a replacement for production bundlers like esbuild or Terser that perform tree shaking and dead code elimination.",[7,8,9,10,11],"Formatting minified code — paste minified CSS or JavaScript from production to read and debug it.","Cleaning up code snippets — format code from documentation, forums, or email before incorporating it into your project.","Preparing inline styles — minify CSS before embedding it in HTML style attributes or JavaScript template literals.","Code review preparation — format HTML\u002FCSS\u002FJS consistently before sharing in pull requests or code reviews.","Documentation formatting — beautify code examples for README files, blog posts, or technical documentation.",[13,14,15,16,17],"Select the language: HTML, CSS, or JavaScript.","Choose format (beautify) or minify mode.","Paste syntactically valid source code.","Run the formatter. If there are syntax errors, the parser reports them with line and column information.","Copy the formatted or minified output.",[19,20,21,22,23],"Formatting changes HTML whitespace semantics — whitespace inside \u003Cpre>, \u003Ccode>, and inline elements can be significant. The formatter may add or remove whitespace that changes how the browser renders the content.","Conservative minification vs production bundling — this tool removes whitespace but does not rename variables, tree-shake dead code, or split bundles. For production, use esbuild, Terser, or a bundler.","Mixed languages in one input — pasting an HTML file with embedded \u003Cscript> and \u003Cstyle> blocks may not format correctly. Format each language section separately.","Syntax errors prevent formatting — the formatter requires valid syntax. Fix errors first, then format.","Relying on formatting for validation — the formatter checks syntax but does not validate semantics, accessibility, or browser compatibility.",[25,28,31],{"title":26,"url":27},"Prettier — Opinionated Code Formatter","https:\u002F\u002Fprettier.io\u002Fdocs\u002Fen\u002F",{"title":29,"url":30},"HTML Living Standard","https:\u002F\u002Fhtml.spec.whatwg.org\u002F",{"title":32,"url":33},"MDN — CSS reference","https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FCSS\u002FReference",{"label":35,"input":36,"output":37},"Format a compact HTML fragment","\u003Cmain>\u003Ch1>Cache\u003C\u002Fh1>\u003Cp>Local tools\u003C\u002Fp>\u003C\u002Fmain>","\u003Cmain>\n  \u003Ch1>Cache\u003C\u002Fh1>\n  \u003Cp>Local tools\u003C\u002Fp>\n\u003C\u002Fmain>",[39,40],"Formatting can change whitespace that is semantically significant inside preformatted HTML content.","JavaScript minification preserves identifiers and disables compression transforms, favoring reviewability over the smallest bundle.",[42,45,48,51],{"question":43,"answer":44},"Which web languages are supported?","HTML, CSS, and JavaScript. Each uses a dedicated parser for correct indentation, attribute handling, and syntax-aware formatting.",{"question":46,"answer":47},"Is the code sent to a server for formatting?","No. All parsing and formatting runs locally in your browser. Your source code never leaves your device.",{"question":49,"answer":50},"Can I minify JavaScript for production?","The minifier removes whitespace and line breaks but preserves identifiers. For production-grade minification with variable renaming and tree shaking, use a bundler like esbuild or Terser.",{"question":52,"answer":53},"Does this support TypeScript or SCSS?","This tool formats plain HTML, CSS, and JavaScript. TypeScript and CSS preprocessors (SCSS, Less) have additional syntax that requires their own parsers.",1788868140815]