Common Code workflows
A formatter changes source layout; a minifier rewrites supported syntax to reduce size; a compiler turns Sass, Less or Pug into the language a browser reads. These are different operations, and none of them proves that a program behaves correctly.
Prepare source code
Format HTML, CSS or JavaScript for review, then use a language-aware minifier when preparing an asset for delivery. Review minifier options before applying assumptions about your runtime.
- HTML Formatter — Beautify HTML, with embedded CSS and JavaScript.
- CSS Formatter — Beautify CSS, SCSS and Less stylesheets.
- JavaScript Formatter — Beautify JavaScript, JSX and TypeScript with Prettier.
- JavaScript Minifier — Minify JavaScript with Terser, with source maps.
- CSS Minifier — Minify CSS and merge duplicate rules.
Turn markup into components
Convert HTML attributes and SVG markup into JSX, then review the result before using it in your component.
- HTML to JSX — Turn HTML into valid React JSX.
- SVG to JSX — Turn an SVG into a React icon component.
- TypeScript Formatter — Beautify TypeScript and TSX with Prettier.
Compile a stylesheet
Compile a self-contained Sass, SCSS or Less stylesheet to CSS, format it for review and minify it for delivery.
- SCSS to CSS — Compiles a self-contained stylesheet using the real Sass or Less compiler in a cancellable worker.
- Less to CSS — Compiles a self-contained stylesheet using the real Sass or Less compiler in a cancellable worker.
- CSS Formatter — Beautify CSS, SCSS and Less stylesheets.
- CSS Minifier — Minify CSS and merge duplicate rules.
Formatting does not verify behavior
A parser can check supported syntax, but a formatter cannot prove that a program is correct or that it is safe to run. Keep your compiler, linter and application tests in the workflow.
Some formatters download an engine
Python, C and C++ formatting use WebAssembly builds of Ruff and clang-format. The engine downloads on first use and then runs on this device.
Frequently asked questions
Can minification change how my code behaves?
It can when code depends on function names, comments or whitespace. Test the minified asset in the environment that will serve it.
Where are CSS gradients, shadows and unit converters?
Open CSS for visual generators and unit tools, and Color for color conversion and contrast checks. Source formatting and minification stay here.
Tools process your input on this device. Read the privacy policy, or save the tool library for offline use.