JPKCom DB

Beautify — Tips & Tricks

Tips for Beautify: language detection, unpacking without eval, undo and remembered options, editor modes, privacy, and combining it with other JPKCom tools.

Back to the overview: Beautify · Open the tool live: www.jpkc.com/tools/beautify/

The manual explains every option, the examples show the workflows. This page covers what both assume but rarely state: where the tool is strong, where its real limits are, and how to chain it with other JPKCom tools. The interface is in English, so the option and button names are simply the real ones.

Understanding — and overriding — language detection

  • Auto-detect is a heuristic, not a guarantee. It decides from the start of the text: < → HTML, valid JSON → JavaScript formatter, typical JS openings (keywords, comments, calls, assignments) → JavaScript, a CSS at-rule or a selector with a declaration block → CSS, otherwise JavaScript. A CSS fragment that begins mid-rule, or an HTML snippet that starts with <!--, can be misclassified — both usually end up with the JavaScript formatter.
  • Set it manually when in doubt. If you get unexpected output, set the language dropdown to JavaScript, CSS, or HTML by hand and then click Beautify — choosing a language doesn't reformat by itself. That's the fastest fix for "why does this look wrong."
  • Release a fixed language. A language you picked by hand, and the one an upload sets from the file extension, stay in place — including for the next code you paste. Across a reload, the tool remembers a language picked in the dropdown; the one from an upload only if you change an option afterward. When you switch languages, go back to Auto-detect; Clear resets the language as well.
  • Auto-detect handles JSON on its own. Valid JSON and JSONP calls such as callback({…}) go to the JavaScript formatter without any help. If you need real validation, key sorting, or transformation, the JSON Editor is the right address.

Setting realistic expectations for unpacking

  • Detect packers only affects JavaScript. For CSS and HTML the checkbox has no effect — those are only formatted.
  • There are two known packing schemes. It unpacks P.A.C.K.E.R. (eval(function(p,a,c,k,e,d)…) and URL-encoded code. If neither matches, unpacking simply does nothing — the code is then only formatted.
  • Unpacking is harmless. The P.A.C.K.E.R. unpacker only decodes the arguments of the packed call and runs none of it. So you can drop in code from a suspicious source — injected JavaScript on a hacked site, for instance — without worry, to see what it does.
  • URL encoding only without spaces. The URL unpacker only kicks in when the text contains not a single space. If there's a sentence or even one space in front of the code, remove it first — or decode the text straight away with Coder.
  • "Deobfuscate" doesn't mean "original code back." Unpacking is pattern-based and reverses reversible packing. Real obfuscators that rename variables cryptically, scramble control flow, or build string arrays remain semantically obscured — you get a legibly formatted version, not reconstructed original names. That's a fundamental limit, not an operating error.
  • Clean up escaped strings separately. If \x.. or \u.. sequences remain after unpacking, turn them into plain text with Unescape strings — that's what makes many "hidden" string literals visible.
  • No AI expectation management needed: there's no AI involved. If you need an LLM-backed "explain this code" step, pair Beautify (make it readable) with a separate AI tool of your choice.

Options that often get overlooked

  • Auto-reformat only on the dropdowns. Every change to one of the five dropdowns in the Formatting card reformats instantly. That's convenient for experimenting — but it can surprise you when you flip an option and the editor content rebuilds "on its own." The checkboxes in the Options card, on the other hand, only take effect on the next Beautify or Ctrl+Enter.
  • Ctrl+Z is your before/after comparison. In the code editor, formatting is an undo step of its own. One Ctrl+Z shows the code before formatting, Ctrl+Enter formats it again — a quick way to check what an option actually changed. It also undoes an accidental Clear.
  • Your settings stick. The tool stores all options and the language choice in the browser. Set up your house style once and it applies again on your next visit. You only see the defaults (4 spaces, Newlines set to Allow 2, if ( with a space) as long as you haven't changed anything — or after clearing the site data in your browser.
  • Brace Style and Preserve inline braces go together. If you want braces on their own lines in general but blocks that are already on one line kept on one line, combine the right Brace Style with Preserve inline braces. That works for blocks with a single statement and for object literals; the formatter still splits several statements across lines, and a Line Wrap setting also wraps long inline blocks.
  • Newlines counts line breaks, not blank lines. In JavaScript and CSS the default Allow 2 keeps one blank line, while Allow 1 keeps none — just like Remove all extra. Only in HTML does the value equal the number of blank lines. Unlimited is uncapped only in JavaScript; in CSS and HTML it removes all blank lines. For readable but not bloated code, Allow 2 is usually the best choice.
  • Tab character saves diff arguments. If your project uses tabs, pick Tab character instead of a space count — otherwise you're formatting against the project standard.

Editor, files, and privacy

  • ACE editor or a plain text field. The toggle button (or the URL parameter ?without-editor; old bookmarks with ?without-codemirror keep working) switches to a plain text field. That helps with very large files when syntax highlighting gets sluggish. Note that Ctrl+S for downloading and the clean undo steps exist only in the ACE editor.
  • Copy takes everything. The copy button copies the entire editor content, not a highlighted selection. If you only need an excerpt, select and copy within the editor itself.
  • Upload stays local. Uploaded files are read in the browser, not sent to a server — and formatted immediately after loading. .ts/.tsx/.jsx/.json are treated as JavaScript; pure TypeScript syntax may format imperfectly. Turn on Support e4x/jsx before loading .jsx/.tsx — otherwise the immediate formatting tears the JSX apart (Ctrl+Z in the code editor brings back the original contents).
  • Pick the filename yourself. The download is always called beautified.js, .css, or .html — JSON included. If you want to replace the original file, rename it when saving.
  • Safe for confidential code — with one caveat. Because everything runs client-side, your source code never leaves the browser, so you can format internal or proprietary code without concern. The tool does, however, keep the latest editor content in the browser's local storage so it survives a reload. On a shared or someone else's computer, empty the editor with Clear once you're done.

Combining with other JPKCom tools

Beautify makes code readable — for the neighboring steps there are dedicated tools. The pattern: the right tool first, then through Beautify.

  • Decode first, then format. If your code is wrapped in Base64, a Data URI, URL encoding, or HTML entities, decode it first with Coder and run the plain text through Beautify afterward.
  • Fetch the source first. Grab a page's shipped HTML/CSS/JS source with Source and make it readable here.
  • The opposite direction. When you want formatted code small again or need to compile SCSS/Sass, Compiler is the right tool — it minifies (and beautifies) HTML, JS, and CSS, with input and output in separate fields. Beautify links to it right below the editor.

More context: the overview for the big picture, the manual for every option, and the examples for the step-by-step workflows. You can try it all directly in the tool.