Treating formatted output as tested behavior
A parser can confirm syntax and a formatter can produce consistent layout, but neither proves that selectors, markup, code paths, schemas, queries, or configuration behave correctly in the target system.
Code Format Workbench | CSS, HTML, JavaScript, and More
FormattingRuns in Your Browser (No Uploads)
Format, minify, or syntax-check focused CSS, HTML, JavaScript, JSON, GraphQL, YAML, XML, and Go source in one local workspace. Every mode names its parser and byte boundary, surfaces syntax failures without executing source code, and distinguishes formatting from validation so a clean layout is never presented as proof that a program compiles or behaves the same.
What to do next
Continue with a related workflow or open the next tool that usually follows this task.
Workflow guide
Format and minify code safely before deployment
Formatting and minification should produce reviewable, reproducible artifacts, not hide syntax errors or change data tokens. This workflow classifies the source and destination first, removes secrets, runs a language-specific parser, records exact settings and byte changes, compares semantic boundaries, and verifies the candidate in the real browser, compiler, loader, schema, and test suite before replacing the original.
OpenRelated toolDiff Checker for Text, Code, and Unified Patches
Compare bounded text locally with exact line hunks, code-point highlights, and unified patch export.
OpenRelated toolJSON Formatter | Beautify or Minify Exact JSON Text
Beautify or minify strict JSON locally while preserving duplicate keys and number text.
OpenRelated toolJSON Validator | Locate Strict Syntax Errors
Validate strict JSON locally with exact syntax locations and duplicate-key warnings.
OpenHow to Use This Tool
Choose the source language, then select only an operation actually offered for that language. Use syntax check for CSS structure, format for readable review, or minify for a candidate build artifact.
Paste a focused file or fragment after removing credentials, personal data, private URLs, and proprietary content that should not appear in screenshots, clipboard history, or downloads.
Set indentation and print width for formatting. For JavaScript, select classic script or ES module to match the destination and choose semicolon and quote preferences before running.
Run the task and read parser errors, byte metrics, changed status, CSS structure counts, and every engine notice. A successful parse is not proof of runtime, rendering, schema, or business correctness.
Copy or download the exact displayed output. Any source, operation, or option change clears the prior result so stale output is not presented as current evidence.
Compare the result with the original and validate it in the real compiler, browser, template engine, API, configuration loader, linter, tests, visual snapshots, and accessibility workflow before replacing a production file.
When to Use This Tool
Prepare a readable review diff
Normalize a focused CSS, HTML, JavaScript, GraphQL, YAML, XML, or Go change before code review, then compare the semantic diff in the project's formatter and tests.
Estimate a production asset reduction
Create conservative CSS, HTML, JavaScript, or JSON minified output for measurement while keeping source files and running the actual build, source-map, license, rendering, and behavior checks.
Catch parser-level mistakes before commit
Reject an unclosed CSS block, malformed GraphQL operation, duplicate YAML key, mismatched XML element, invalid JSON token, or Go syntax error before a configuration or source file reaches a deployment pipeline.
Preserve exact JSON tokens in test data
Compact an API fixture without rounding a large identifier or silently resolving duplicate JSON keys, then verify the exact bytes consumed by the target parser.
Reproduce a formatter mismatch locally
Compare browser output with Prettier, Terser, CSSO, an HTML build step, XML validation, or gofmt in CI to isolate version and configuration differences.
Common Mistakes
Shipping minified output without regression tests
Minification can expose assumptions about automatic semicolon insertion, HTML whitespace, CSS cascade order, source maps, build directives, and comments consumed by licenses or downstream tools. Compare behavior before replacing production assets.
Assuming HTML recovery and whitespace are invisible
HTML parsing is intentionally error-tolerant and whitespace between inline elements can be visible. The HTML modes use conservative settings, but the exact template engine and rendered page still need a visual and accessibility check.
Minifying a module as a classic script
A classic script and an ES module have different parsing, strict-mode, import, export, and top-level behavior. Select the same source type used by the destination before minifying JavaScript.
Ignoring data-format semantics while changing whitespace
Duplicate JSON keys are ambiguous, YAML comments and aliases carry review context, XML must be well formed, and large JSON integer tokens can be rounded if they are parsed into JavaScript numbers. Review format-specific diagnostics rather than treating every text format alike.
Pasting secrets because the formatter is local
Local processing prevents normal source upload to this application, but copied results, screenshots, browser extensions, crash reports, and downloaded files can still expose secrets. Remove credentials and private data before handling code outside its approved environment.
Examples
Review one stylesheet through three CSS tasks
PostCSS rejects an unclosed block, css-tree counts rules and declarations for syntax inspection, Prettier formats valid source, and CSSO performs structural minification without regex placeholders.
Input
.card{width:calc(100% - 2rem);color:#ff0000}Output
Formatted CSS, compact CSS, or a syntax-only report with rule and declaration countsFormat or minify an HTML fragment
Prettier formats a fragment with an HTML recovery parser. Conservative minification removes ordinary comments while leaving preformatted text and embedded script or style contents untouched.
Input
<main><!-- note --><p>Hello <strong>team</strong></p><pre>keep space</pre></main>Output
Readable HTML or conservatively collapsed HTML with pre content preservedProtect JavaScript tokens that regex minifiers break
Prettier applies explicit semicolon and quote settings. Terser parses script or module syntax, performs safe default compression, keeps identifier names unmangled, and preserves comments beginning with /*!.
Input
/*! license */ const endpoint = 'https://example.com/a//b';Output
Formatted JavaScript or parser-backed minified JavaScript with the URL and license comment intactMinify JSON without changing a large integer token
Strict JSON validation runs before whitespace removal, and source tokens are compacted directly so an integer larger than Number.MAX_SAFE_INTEGER is not rounded by JSON.parse and JSON.stringify.
Input
{ "requestId": 900719925474099312345, "ok": true }Output
{"requestId":900719925474099312345,"ok":true}Prepare a GraphQL query for review
The GraphQL reference parser rejects malformed documents before Prettier lays out variables, fields, and nested selections.
Input
query User($id:ID!){user(id:$id){id name}}Output
A validated, consistently indented GraphQL operationFormat configuration without erasing review notes
The YAML parser rejects duplicate mapping keys, and Prettier preserves comments and flow-style choices while normalizing spacing and indentation.
Input
# deployment target
service: api
ports: [80,443]Output
Comment-preserving YAML with normalized spacingReject malformed XML before formatting
Fast XML Parser first requires matching elements and a well-formed document. XML Formatter then applies the selected indentation without silently inventing a missing closing tag.
Input
<?xml version="1.0"?><root><item id="1">A</item></root>Output
Validated XML with a declaration, root element, and two-space indentationApply real gofmt in the browser
The Go mode loads a browser-compatible WebAssembly build of canonical gofmt only when requested, so imports, blank lines, tabs, and token spacing follow Go tooling rather than brace-counting heuristics.
Input
package main
import "fmt"
func main(){fmt.Println("hello")}Output
Canonical gofmt output with a separated import block and normalized function bodyParser-specific engines, conservative compression, and bounded local execution
Formatting uses Prettier's language plugins for CSS, HTML, JavaScript, GraphQL, and YAML. CSS is structurally parsed by PostCSS and checked for css-tree parse errors first; GraphQL uses the reference parser; YAML rejects parser errors and duplicate keys. XML is validated as well formed before XML Formatter runs, and Go uses a lazily loaded WebAssembly build of gofmt.
CSS minification uses CSSO structural optimization after strict parsing. HTML Minifier uses conservative whitespace collapse, keeps optional tags and attribute quotes, and leaves embedded JavaScript and CSS untouched. JavaScript minification uses one Terser compression pass with name mangling disabled and /*! license comments preserved.
JSON minification validates strict JSON with jsonc-parser and then removes only space, tab, carriage return, and line feed tokens outside strings. It does not materialize values as JavaScript numbers, so large integer and exponent spellings remain exact. Duplicate object keys are preserved and counted as a review warning.
HTML is error-tolerant by specification, so its modes explicitly report use of a recovery parser rather than claiming XML-like well-formedness. CSS validation is also labeled syntax-only: browser support, lint conventions, rendered layout, cascade effects, schema semantics, and runtime behavior require their actual destination tools.
Each language panel keeps its own input and options while mounted, and changing source or settings invalidates the previous output. Asynchronous runs use generation tokens so a slower parser result cannot overwrite a newer edit. Copy and download operate on the exact displayed UTF-8 output.
Input is limited to 262,144 Unicode code points and 524,288 UTF-8 bytes, output to 1,048,576 bytes, and NUL characters are rejected. Heavy formatters and minifiers load on demand. Analytics records only fixed task names, safe options, aggregate byte and diagnostic metrics, and fixed error codes after consent; source and output are excluded.
Frequently Asked Questions
Which operations are available for each language?
CSS supports format, minify, and syntax check. HTML and JavaScript support format and minify. JSON supports exact-token minification. GraphQL, YAML, XML, and Go support formatting. The workbench does not pretend that every language has equivalent validation or compression semantics.
Is CSS syntax check the same as browser compatibility validation?
No. The CSS report checks parseable structure and reports rules, at-rules, declarations, and custom properties. It does not verify browser support, unknown properties, selector intent, cascade behavior, rendering, accessibility, or a project's lint policy.
How aggressive are the minifiers?
Terser uses safe default compression with one pass and does not mangle identifier names. HTML Minifier uses conservative whitespace handling and does not minify embedded JavaScript or CSS. CSSO can restructure equivalent CSS, so all minified assets still need the destination build and regression tests.
Why does JSON minification avoid JSON.parse and JSON.stringify?
JSON syntax is validated with jsonc-parser, then only JSON whitespace outside string tokens is removed. This preserves the exact spelling of large integers, decimals, exponents, and escaped strings. Duplicate keys remain in place and produce a warning because their interpretation is application-dependent.
Does Go mode really use gofmt?
Go mode uses @wasm-fmt/gofmt, a WebAssembly build of Go's canonical formatter. The module is loaded only when Go is run. A syntax error is rejected; package compilation, imports on disk, type checking, tests, and module resolution remain outside the browser formatter.
What are the privacy and processing limits?
Input is capped at 262,144 Unicode code points and 524,288 UTF-8 bytes, and output is capped at 1,048,576 bytes. Normal processing stays in the browser. Consent-aware analytics may receive the parent tool, language, operation, safe setting names, timing, byte counts, changed status, and diagnostic count, but never source or result text.
How This Tool Was Verified
Maintained and tested by SimpleWebUtilsReviewed
Method: The review loaded the unmodified “Minify a JavaScript release file without breaking URL and regex tokens” sample into Code Format Workbench. We exercised the path from “Identify the source grammar and its real destination” to “Compare exact output, size, and executable behavior”, checked the displayed or downloaded result against the example, and separately examined “Deleting the source after getting a smaller file” and “Treating HTML recovery as XML validation”.
Expected result: The Terser pass reduced measured bytes while preserving the license comment, URL, escaped regex, template literal, and exported behavior with identifier mangling disabled.
Open the tested workflowRelated workflow guides
Use these focused guides when you need a practical workflow before opening the tool.
Workflow guide
Format and minify code safely before deployment
Formatting and minification should produce reviewable, reproducible artifacts, not hide syntax errors or change data tokens. This workflow classifies the source and destination first, removes secrets, runs a language-specific parser, records exact settings and byte changes, compares semantic boundaries, and verifies the candidate in the real browser, compiler, loader, schema, and test suite before replacing the original.
Workflow guideConvert CSS colors and verify text contrast
Use a color converter to create reviewable sRGB values, but make the final decision in context: preserve the source token, resolve transparency against the real backdrop, test every state, and keep profile-free CMYK estimates out of press-ready files.
Workflow guideCompare text revisions and verify a unified diff
A useful diff workflow starts with exact input, not filters. Preserve the source files, compare line structure and final newlines, explain every raw addition and removal, use equivalence options only as a diagnostic view, and validate any exported patch against a disposable copy before it reaches a repository or deployment.
Workflow guideConvert JSON and YAML configuration files safely
Use this workflow when an API example, application config, or deployment manifest needs to move between JSON and YAML without silently changing a key or numeric value.
Workflow guideFormat SQL for code review and verify query behavior
SQL formatting can expose joins, predicates, grouping, and subqueries, but readable output is not evidence that a statement is valid or safe. This workflow identifies the target database and version, preserves and redacts the source, applies one explicit formatter grammar, reviews exact token and comment changes, and then verifies schema resolution, permissions, result sets, plans, transactions, migrations, tests, and rollback in the real toolchain.
Related Tools
Continue with another maintained workflow
Diff Checker for Text, Code, and Unified Patches
Compare bounded text locally with exact line hunks, code-point highlights, and unified patch export.
Text
JSON Formatter | Beautify or Minify Exact JSON Text
Beautify or minify strict JSON locally while preserving duplicate keys and number text.
Formatting
JSON Validator | Locate Strict Syntax Errors
Validate strict JSON locally with exact syntax locations and duplicate-key warnings.
Formatting
Markup Conversion Workbench | CSS, JavaScript, and HTML
Prefix CSS, format CSS as SCSS, transpile JavaScript, and convert HTML into JSX, Markdown, or Pug locally.
Formatting
SQL Formatter | Format Queries by Database Dialect
Format bounded SQL locally with an explicit database dialect, casing, and indentation.
Formatting