Compiler — Manual

Back to the overview: Compiler · Open the tool: 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 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, 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. 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, with a collapsed brace style (brace_style: collapse).

Minify

Shrinks JavaScript with Terser, 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.

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 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. Concrete workflows are in the examples, strategy and pitfalls in the tips & tricks.