JPKCom DB

Beautify — Manual

Complete reference for Beautify: input and flow, every formatting and additional option, how unpacking works, the toolbar, and the limits.

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

This manual describes Beautify in full: what happens when you format, what each option does, how unpacking works, and what limits apply. The tool's interface is in English, so the option and button labels below are simply the real ones you'll see in the tool.

Input and flow

Beautify is a single-field tool: options on the left, the code editor on the right. You always work in the same editor — the formatted output replaces your input in place. The flow:

  1. Paste code — type/paste directly into the editor, or load a file via Upload.
  2. Optionally pick a language and options — by default the tool detects the language automatically.
  3. Click Beautify (toolbar or footer) or press Ctrl+Enter.
  4. Take the result — Copy to the clipboard or Download as a file.

One thing to note: as soon as you change one of the select options (the dropdowns), the tool reformats automatically. So after changing an option you don't need to click Beautify again.

All formatting and unpacking runs client-side in the browser (see Architecture and privacy). It's powered by the js-beautify library (JavaScript, CSS, HTML) by Einar Lielmanis and contributors; the editor is CodeMirror.

Choosing or detecting the language

The language dropdown in the toolbar sets which language the code is formatted as:

  • Auto-detect (default) — the tool guesses from the content: if the text starts with < (and not an HTML comment) it's treated as HTML; if it matches typical CSS patterns (@import, @media, @charset, @font-face, or a selector with {) it's CSS; otherwise it's JavaScript.
  • JavaScript — forces the JS formatter (also suitable for JSON/JSONP).
  • CSS — forces the CSS formatter.
  • HTML — forces the HTML formatter.

If detection gets it wrong (for instance because a CSS fragment starts without an at-rule and without an opening brace), set the language by hand. The choice also drives the editor's syntax highlighting and the file extension on download.

The formatting options

These five dropdowns in the Formatting card control the basic layout.

Indentation

Determines what indentation uses:

  • Tab character — one real tab character per level.
  • 2 spaces, 3 spaces, 4 spaces, 8 spaces — that many spaces per level.

Newlines

Controls how many consecutive blank lines are kept:

  • Remove all extra — removes all extra blank lines (blank lines are not preserved).
  • Allow 1, Allow 2, Allow 5, Allow 10 — keeps at most that many blank lines in a row.
  • Unlimited — no cap on consecutive blank lines.

Line Wrap

Sets the maximum line length at which wrapping happens:

  • No wrap — no automatic line breaks.
  • 40 chars, 70 chars, 80 chars, 110 chars, 120 chars, 160 chars — wraps lines at the chosen character count (where the language allows it).

Brace Style

Determines where curly braces go (mostly relevant for JavaScript):

  • With control statement — opening brace on the same line as the control statement (if (x) {).
  • Inline or with control — short blocks stay inline, otherwise as above.
  • On own line — opening brace on its own line.
  • End on own line — a variant where the brace ends on its own line.
  • Keep as-is — the existing brace style is left untouched.

This choice works together with the Preserve inline braces checkbox (see below).

HTML Scripts

Controls the indentation of <script> contents inside HTML:

  • Keep tag indent — script contents keep the surrounding tag's indentation.
  • Add one level — one extra indentation level.
  • Separate — the script block is indented separately.

The additional options

The Options card holds eleven checkboxes for finer details.

Detect packers

Enables unpacking/deobfuscation before formatting — applies to JavaScript only. When checked, the code first runs through an unpacker chain and is then formatted. Details and limits in Unpacking and deobfuscation.

End with newline

Appends a trailing newline at the end of the output.

Support e4x/jsx

Lets the JS formatter tolerate E4X / JSX syntax (XML literals in JavaScript) instead of choking on it.

Comma-first style

Places commas at the start of the line instead of the end (comma-first style).

Preserve inline braces

Augments the chosen Brace Style so brace blocks that are already inline are allowed to stay inline.

Keep array indent

Preserves the existing indentation inside array literals instead of re-aligning it.

Break chained methods

Breaks chained method calls (a.b().c().d()) onto multiple lines.

Space before conditional

Inserts a space before a conditional's parenthesis (if ( instead of if().

Unescape strings

Converts escaped characters in strings (such as \x41 sequences) back into readable characters — handy when cleaning up obfuscated strings.

JSLint-happy

Formats according to JSLint's stricter conventions (e.g. function spacing).

Indent head/body

In HTML, indents the contents of <head> and <body> an extra level.

Unpacking and deobfuscation

With Detect packers enabled, JavaScript runs through an unpacker chain before formatting. The tool first strips leading comments, then tests the code against several known packing schemes and unpacks recursively as long as something keeps changing. Three unpackers are active:

  • P.A.C.K.E.R. — the widespread eval(function(p,a,c,k,e,d){…}) format (Dean Edwards' Packer).
  • URL-encoded — code obscured via URL encoding (%xx).
  • MyObfuscate — the MyObfuscate format.

To set expectations honestly:

  • Unpacking is pattern-based, not AI-powered. It reverses known, reversible packing schemes — nothing more.
  • "Real" obfuscators that rename symbols, scramble control flow, or build string arrays cannot be turned back into the original code. Such code is merely formatted cleanly (and made more legible with Unescape strings where applicable), but not logically reconstructed.
  • Without the box checked, no unpacking takes place — the code is only formatted.

Editor toolbar

The toolbar at the top right of the editor block offers these actions.

Beautify

Starts formatting. The button exists twice (toolbar with a wand icon, and a large button in the footer) — both do the same thing.

Upload

Opens a file dialog and loads a file into the editor. Accepted types include .js, .css, .html, .htm, .json, .jsx, .ts, and .tsx. The file is read locally (no server upload), the language is set from the file extension, and the contents are formatted automatically. Extensions like .jsx, .ts, .tsx, and .json are treated as JavaScript, .scss/.less as CSS, .htm/.xml as HTML.

Download

Saves the current editor content as a file. The filename follows the detected language (beautified.js, beautified.css, beautified.html, otherwise beautified.txt).

Copy

Copies the entire editor content to the clipboard (not just a selection). If the editor is empty, a notice appears.

Clear

Empties the editor and resets the language to Auto-detect.

Toggle editor

A button switches between the rich CodeMirror editor (syntax highlighting, line numbers) and a plain text field. You can also reach the text-field variant directly via the URL parameter ?without-codemirror — handy for very large files or when the editor gets in the way.

Keyboard shortcut

  • Ctrl+Enter — formats the current editor content (same as clicking Beautify).

Architecture and privacy

Beautify is a purely client-side tool. The PHP page only serves the markup; the actual work — formatting, unpacking, language detection, file reading, copying, downloading — is done by JavaScript libraries in your browser:

  • js-beautify (modules for JavaScript, CSS, and HTML) handles formatting.
  • The unpackers (P.A.C.K.E.R., URL-encoded, MyObfuscate) also run locally.
  • CodeMirror provides the editor.

This gives the privacy benefit: your code is not sent to any server. Uploaded files are read locally too. The tool is therefore safe for proprietary, internal, or confidential source code.

Limits

  • Three languages. It formats JavaScript, CSS, and HTML. JSON/JSONP ride along through the JavaScript formatter (valid JSON is valid JS) — there is no dedicated JSON validation here.
  • TypeScript isn't TypeScript-specific. .ts/.tsx are treated as JavaScript; TS-specific syntax isn't understood specially and may format imperfectly.
  • Unpacking is JavaScript-only and for known packers only — see Unpacking and deobfuscation. Symbol-renaming obfuscators are not reconstructed.
  • No AI involved. There's no model or LLM component; "deobfuscate" here means the pattern-based unpacking exclusively.

For the intro and the target audiences, see the overview page. Concrete workflows are in the examples, strategy and pitfalls in the tips & tricks. You can try it all directly in the tool.