# Compiler — Manual

> The complete feature reference for the Compiler: all four tabs, the engines used (sass.js, Terser, JS Beautifier), every option, and the limits of each mode.

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

Back to the overview: [Compiler](https://www.jpkc.com/db/en/tools/compiler/) · Open the tool: [www.jpkc.com/tools/compiler/](https://www.jpkc.com/tools/compiler/)

This manual describes the **Compiler** in full: how the interface is laid out, each of the four tabs with its actions and options, the engine each one uses, and the limits of every mode. The tool's interface is in English, so tab, button, and option names appear in their original spelling.

## Layout and shared controls

The tool has four tabs: `SASS/SCSS`, `HTML`, `JavaScript`, and `CSS`. Each tab is built the same way — an **Input** editor on the left, an **Output** editor (read-only) on the right, and an **Options** bar below with the action buttons. Both editors are [ACE editors](https://ace.c9.io/) with syntax highlighting for the relevant language.

Every tab carries the same helper functions:

- **Upload** (input card) — loads a file into the input editor. Accepted extensions are filtered per tab (`.scss`/`.sass`/`.css`, `.html`/`.htm`, `.js`/`.mjs`, `.css`).
- **Clear** (input card) — empties input and output and removes this tab's saved state.
- **Copy** (output card) — copies the output to the clipboard.
- **Download** (output card) — downloads the output as a file (`output.<ext>` with the extension that matches the tab).

**Auto-save:** Whatever you type into an input editor is saved per tab in the browser (LocalStorage) shortly after you stop typing, and restored on your next visit. On first load each tab starts with a **sample snippet** so you can try the behavior immediately.

## Architecture

The Compiler works **entirely client-side**. The page only serves the interface; all conversions are computed by JavaScript in your browser. There's no server round-trip and no background processing — your code never leaves your machine. The only exception is a one-time script download: the SASS compiler module (see below).

## The `SASS/SCSS` tab — Compile

This tab turns **SASS/SCSS source into CSS**. It's the only tab that actually *compiles*; the other three only format or shrink.

### Engine: sass.js (lazy-loaded)

Compilation is done by [sass.js](https://github.com/medialize/sass.js/), a Sass engine translated to JavaScript that runs in the browser. The compiler module is relatively large at around **4 MB**, so it's loaded **only on your first click on Compile** — a notice appears while it loads ("Loading SASS compiler…"), followed by a success message. From then on the engine stays loaded for the rest of the session.

### Option: Output Style

A select controls the format of the CSS output:

- **`Expanded`** (default) — readable CSS with indentation and line breaks, one declaration per line.
- **`Compressed`** — minified CSS, everything on one line with no superfluous whitespace. Handy when you want production-ready CSS straight away, without going through the CSS minify tab afterwards.

### Compile

The **Compile** button starts the conversion. If the engine isn't loaded yet, it's pulled in first. On success the CSS appears in the output editor on the right. If compilation fails (a syntax error), the tool writes an **error message with line and column** as a CSS comment into the output and additionally reports the error as a notice — so you see right away where it breaks.

### Limits

sass.js is based on LibSass, not on today's Dart Sass. Classic Sass features — variables, nesting, mixins (`@mixin`/`@include`), `@import`, functions like `lighten()` — work reliably. The **newer Dart Sass module features** (`@use`, `@forward`, the `sass:` module system) are not part of the LibSass feature set; use classic `@import` syntax here. External `@import` files can't be resolved either — there is no file system, so the entire source must sit in the input editor.

## The `HTML` tab — Beautify & Minify

Formats or shrinks HTML. Two actions, three options.

### Option: Indent Size

Indentation depth for **Beautify**: `2 spaces` or `4 spaces` (default: 4). Indentation uses spaces.

### Option: Wrap Length

Maximum line length for **Beautify**: `No wrap` (0), `80`, or `120` (default). Controls the width at which long lines are wrapped.

### Option: Remove comments

A checkbox that applies **only to Minify**: when set, HTML comments (`<!-- … -->`) are stripped from the output.

### Beautify

Indents the HTML cleanly — via [JS Beautifier](https://beautifier.io/). Content inside `<code>` and `<pre>` is left untouched so its whitespace is preserved.

### Minify

Shrinks the HTML through a **rule-based in-house routine** (not a full HTML parser): whitespace between tags is removed, repeated whitespace collapsed to a single character, lines trimmed, and blank lines removed. Optionally (see `Remove comments`) comments are dropped too.

### Limits

Because the minify is purely rule-based, it can unintentionally alter whitespace in **whitespace-sensitive regions** such as `<pre>`, `<textarea>`, or `white-space: pre`. For such cases, apply Minify selectively or exclude the affected region.

## The `JavaScript` tab — Beautify & Minify

Formats or shrinks JavaScript. Beautify and Minify use **different engines** and therefore have their own options.

### Option: Indent Size

Indentation depth for **Beautify**: `2 spaces` or `4 spaces` (default: 4).

### Option: Preserve newlines

Checkbox for **Beautify** (default: on): existing blank lines in the source are kept (up to two in a row) rather than collapsed entirely.

### Option: Drop console

Checkbox for **Minify** (default: off): removes `console.*` calls from the result — useful for clearing debug output out of production code.

### Option: Mangle names

Checkbox for **Minify** (default: on): shortens local variable and function names, which shrinks the file further.

### Beautify

Formats JavaScript for readability — via [JS Beautifier](https://beautifier.io/), with a collapsed brace style (`brace_style: collapse`).

### Minify

Shrinks JavaScript with [Terser](https://terser.org/), the de-facto standard minifier. Processing is asynchronous; on a syntax error in the input code the tool writes the error message into the output and reports it as a notice. Terser understands modern JavaScript (ES2015+).

### Limits

`Mangle names` only shortens names that are safe to rename locally — global APIs and exported names stay unchanged. `Drop console` removes `console` calls; if your code relies on their return value elsewhere (rare), keep that in mind.

## The `CSS` tab — Beautify & Minify

Formats or shrinks CSS. One option, two actions.

### Option: Indent Size

Indentation depth for **Beautify**: `2 spaces` or `4 spaces` (default: 4).

### Beautify

Indents CSS for readability — via [JS Beautifier](https://beautifier.io/).

### Minify

Shrinks CSS through a **rule-based in-house routine**: it removes comments (`/* … */`), whitespace around selectors, braces, semicolons, colons, and commas, drops the last semicolon before `}`, and pulls everything onto one line. Unlike the HTML minify, there is **no** option to preserve comments here — they are always removed.

### Limits

This minify, too, is rule-based and not a full CSS parser. With exotic constructs (complex `calc()` expressions with whitespace semantics, content inside `content: "…"`, some `@` rules) the result may be altered unintentionally. It's fine for robust CSS; double-check the result in special cases. If you want SCSS minified in one step, the `Compressed` Output Style in the `SASS/SCSS` tab is the better route.

## How this differs from the Beautify tool

The Compiler can *beautify* HTML, JavaScript, and CSS — using the same library as the standalone **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)** tool. The features deliberately overlap. The difference: Beautify specializes in formatting and can additionally **deobfuscate** — which the Compiler does not. If you only need clean indentation as part of a compile/minify task, stay here; if you need deobfuscation or finer formatting control, Beautify is the right address.

## Operational facts — at a glance

- **Client-side:** All conversions run in the browser; your code is never uploaded to a server.
- **Lazy SASS:** The ~4 MB compiler module loads only on the first compile (once per session).
- **Engines:** SASS/SCSS → sass.js (LibSass); JS minify → Terser; HTML/JS/CSS beautify → JS Beautifier; HTML/CSS minify → rule-based in-house routines.
- **Persistence:** Inputs are saved per tab in LocalStorage and restored.
- **I/O:** Upload (filtered extensions), Copy, Download as `output.<ext>`, Clear per tab.

For the introduction and the big picture see the [overview page](https://www.jpkc.com/db/en/tools/compiler/). Concrete workflows are in the [examples](https://www.jpkc.com/db/en/tools/compiler/examples/), strategy and pitfalls in the [tips & tricks](https://www.jpkc.com/db/en/tools/compiler/tips/).