# Compiler

> What the Compiler does: compile SASS/SCSS to CSS and minify or beautify HTML, JavaScript, and CSS — your starting point for the manual, examples, and tips.

Source: https://www.jpkc.com/db/en/tools/compiler/

## Four code transformations under one roof

The [Compiler](https://www.jpkc.com/tools/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 SASS/SCSS to CSS**, 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 or download as a file. 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 SASS/SCSS source into finished CSS. One option controls the **Output Style**: `Expanded` (readable, indented) or `Compressed` (minified, single 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* strips whitespace between tags and, optionally, the comments.
- **`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* removes comments and whitespace.

Which engine sits behind which tab, and exactly what each option does, is covered in the [manual](https://www.jpkc.com/db/en/tools/compiler/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 [sass.js](https://github.com/medialize/sass.js/), a Sass engine translated to JavaScript. The compiler module is around 4 MB and is loaded **only on the first compile** — a short notice appears while it does.
- **JavaScript minification** is handled by [Terser](https://terser.org/).
- **Beautify** for HTML, JavaScript, and CSS is provided by [JS Beautifier](https://beautifier.io/).
- **Minify for HTML and CSS** runs through lean, rule-based in-house routines (not a full parser) — lightweight, but with limits that the manual spells out.
- Input and output sit in [ACE editors](https://ace.c9.io/) with syntax highlighting; your input is auto-saved per tab 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](https://www.jpkc.com/tools/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.

## Related JPKCom tools

- **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)** — the dedicated formatting tool for JavaScript, CSS, and HTML that can additionally **deobfuscate**. When plain re-indentation in the Compiler isn't enough, Beautify is the specialized address.
- **[Playground](https://www.jpkc.com/db/en/tools/playground/)** — an interactive HTML/CSS/JavaScript editor with live preview, ideal for testing compiled CSS in context.
- **[Source Viewer](https://www.jpkc.com/db/en/tools/source/)** — view and syntax-highlight source code for 100+ languages.
- **[Color tools](https://www.jpkc.com/db/en/tools/colors/)** — generate and convert color values to drop into your SCSS or CSS.

---

There's more on the subpages: the **[manual](https://www.jpkc.com/db/en/tools/compiler/manual/)** with every tab, engine, and option, hands-on **[examples](https://www.jpkc.com/db/en/tools/compiler/examples/)**, and a collection of **[tips & tricks](https://www.jpkc.com/db/en/tools/compiler/tips/)**.