JPKCom DB

Compiler — Examples

Hands-on runs with the Compiler: compile SCSS to CSS, minify JavaScript, beautify someone else's CSS, and produce production-ready CSS in one step.

Back to the overview: Compiler · Open the tool: www.jpkc.com/tools/compiler/

The manual explains every tab and option in detail. This page adds concrete workflows — typical tasks, walked through step by step. The tool's interface is in English, so tab and button names appear in their original spelling.

Example 1: Compile SCSS to CSS

The classic — you have an SCSS snippet and want to see the CSS it produces.

  1. Open the Compiler; the SASS/SCSS tab is already active and pre-filled with a sample (variables, a mixin, nesting).
  2. Replace the sample with your own SCSS, or use Upload to load a .scss file.
  3. Leave the Output Style on Expanded (readable CSS) and click Compile.
  4. The first time, "Loading SASS compiler…" appears briefly — the roughly 4 MB compiler module is loaded once. After that the finished CSS sits in the output editor on the right.
  5. Grab it with Copy to the clipboard, or Download it as output.css.

If your SCSS has a syntax error, the tool doesn't blindly carry on — it writes an error message with line and column as a comment into the output, so you see immediately where it breaks.

Example 2: Production-ready, minified CSS in one step

You want compressed CSS straight from SCSS, without a separate minify step afterwards.

  1. Stay in the SASS/SCSS tab and paste your SCSS.
  2. Set the Output Style to Compressed.
  3. Compile — the output is now minified CSS on a single line, free of whitespace and comments.

This saves the detour through the CSS minify tab and is the clean route when your stylesheet originates from SCSS anyway: the engine produces the compressed form itself, instead of squashing it afterwards with text rules.

Example 3: Minify JavaScript

A helper function or a small script needs to be shrunk for production.

  1. Switch to the JavaScript tab and paste your code (or load a .js file via Upload).
  2. Check the minify options: Mangle names (default: on) shortens local names; Drop console (default: off) removes console.* calls. For production code it often pays to tick Drop console as well.
  3. Click Minify. The shrinking is done by Terser; the result appears on the right.
  4. If your code has a syntax error, the Terser error message shows in the output — fix the spot and minify again.

If you instead need readable code (say, an indented version of a compact file), use Beautify rather than Minify in the same tab.

Example 4: Make someone else's squashed CSS readable

You've received minified CSS — all on one line — and want to understand it.

  1. Go to the CSS tab and paste the compact CSS into the input editor.
  2. Pick your preferred Indent Size (2 spaces or 4 spaces).
  3. Click Beautify. The CSS appears on the right, cleanly indented with line breaks and one declaration per line — via JS Beautifier.

The same workflow applies in the HTML and JavaScript tabs. If your only goal is readability and you're dealing with deliberately obfuscated code, the dedicated Beautify tool is the better choice — it can additionally deobfuscate.

Example 5: Minify HTML for delivery

An HTML fragment should become more compact for production.

  1. Switch to the HTML tab and paste your markup.
  2. If you also want to lose the comments, tick Remove comments (this option only applies to Minify).
  3. Click Minify. Whitespace between tags and repeated whitespace are removed; the result sits on the right.
  4. Watch out for whitespace-sensitive regions: if your HTML contains <pre> or <textarea>, check the result — the rule-based minify routine can alter whitespace there.

Example 6: From compact to indented HTML and back

You juggle between readable editing and compact delivery.

  1. In the HTML tab, paste compact markup and click Beautify — choose Indent Size and Wrap Length (e.g. 120) first. The result is cleanly indented and easy to read.
  2. Take the output via Copy and edit it elsewhere.
  3. For delivery, paste the same markup again and click Minify — there's your compact version.

That's how you use both directions of the same tab as a pair: beautify to work, minify to ship.

Going deeper: the overview for the big picture, the manual for every engine and option in detail, and the tips & tricks for strategy and pitfalls. You can try all of it directly in the tool.