JPKCom DB

Compiler

What the Compiler does: compile SCSS and Sass to CSS with Dart Sass, and minify or beautify HTML, JavaScript and CSS — all in your browser.

Four code transformations under one roof

The Compiler bundles four tasks that come up constantly in front-end work — tasks you'd otherwise reach for a separate tool or a build setup to handle: compile SCSS and Sass to CSS with Dart Sass, and minify or beautify (re-indent for readability) HTML, JavaScript, and CSS. Everything lives in four tabs — SASS/SCSS, HTML, JavaScript, CSS — each with an input and an output editor side by side.

You paste your code on the left (or upload a file), pick an action, and the result appears on the right — ready to copy, to download as a file, or to feed back in as the next input via Use output as input. No account, no installation, no server round-trip: the actual processing runs entirely in your browser.

The tool is built for anyone who needs a quick conversion without setting up a toolchain: developers double-checking an SCSS snippet from the docs or shrinking a handful of lines of JavaScript; web designers who first need to make someone else's one-line, squashed CSS readable; and everyone who wants a quick, transparent intermediate step before code goes into a project.

What the four tabs do

The four tabs are deliberately equipped differently, depending on what makes sense for each language:

  • SASS/SCSS — Compile. Turns SCSS or indented-syntax Sass into finished CSS with Dart Sass — module system included, so @use, sass:math, and sass:color work. The tool detects the Syntax on its own (or you pin it), and the Output Style chooses between Expanded (readable, indented) and Compressed (minified, single line). Warnings and @debug output are listed below the editors; errors are flagged right on the offending input line. This is the only tab that truly compiles — the other three only format or shrink.
  • HTML — Beautify & Minify. Beautify indents HTML cleanly (options: indent size, wrap length); Minify collapses whitespace, shrinks embedded <style> blocks, and optionally drops comments — without changing how the page renders: <pre>, <textarea>, and <script> are left untouched.
  • JavaScript — Beautify & Minify. Beautify formats JavaScript for readability; Minify shrinks it with the well-established minifier Terser — including options like shortening variable names (mangle) and dropping console calls.
  • CSS — Beautify & Minify. Beautify indents CSS; Minify strips whitespace and — unless you switch it off — comments, while leaving strings and /*! … */ license comments alone (except for the sequence ;}, see the manual).

Every tab shares the same helpers: file upload, download under the uploaded file's name (with .min after a minify), Copy, Use output as input for chains like "beautify, edit, minify", and a Clear that asks before discarding your code. The tool remembers your inputs and options in the browser.

Which engine sits behind which tab, and exactly what each option does, is covered in the manual.

Architecture: everything in the browser

The Compiler is a purely client-side tool. The page itself only serves the interface; all conversions are computed by JavaScript right in your browser:

  • SASS/SCSS is compiled by Dart Sass (opens in a new tab) in its pure JavaScript build (the sass npm package). The compiler module weighs around 0.9 MB gzip-compressed and is loaded only on the first compile — a short notice appears while it does.
  • JavaScript minification is handled by Terser (opens in a new tab).
  • Beautify for HTML, JavaScript, and CSS is provided by JS Beautifier (opens in a new tab).
  • Minify for HTML and CSS runs through lean in-house routines that deliberately touch whitespace and comments only where that doesn't change the result — details in the manual.
  • Input and output sit in ACE editors (opens in a new tab) with syntax highlighting; your input and your options are saved automatically in the browser (LocalStorage).

Because nothing is sent to a server, your code never leaves your machine — relevant when you process non-public snippets.

Try it now

→ Open the Compiler — paste your code, pick a tab, click an action. Each tab starts with a sample snippet so you can see the behavior right away.

  • Beautify — the dedicated formatting tool for JavaScript, CSS, and HTML with the full set of JS Beautifier options, which can additionally unpack P.A.C.K.E.R.-packed and URL-encoded JavaScript. When plain re-indentation in the Compiler isn't enough, Beautify is the specialized address.
  • Playground — an interactive HTML/CSS/JavaScript editor with live preview and the same Dart Sass engine, ideal for testing compiled CSS in context.
  • Source Viewer — view and syntax-highlight source code for 100+ languages.
  • Color tools — generate and convert color values to drop into your SCSS or CSS.

There's more on the subpages: the manual with every tab, engine, and option, hands-on examples, and a collection of tips & tricks.