Help

Hackvertor is a conversion tool for web security research. Instead of picking an encoding from a dropdown, you wrap text in tags — small, nestable markers that transform whatever they contain. Because tags nest, you can build up arbitrarily deep encoding chains and see the result update live.

The site is built around five things:

• The converter — the home page, where you encode and decode text with tags.
• The autodecoder — hands it an unknown blob and it works out the encoding chain for you.
• The tag store — browse, install and publish conversion tags written in JavaScript.
• HackPad — an isolated iframe for running HTML and JavaScript payloads with control over CSP, charset and content type.
• The hacking room — broadcast a payload to everyone in a room and see how each browser renders it.

Every tag runs inside a sandboxed iframe with a restrictive CSP, so tag code never touches the main page.

You can use the converter, HackPad, Snippet and browse saved URLs without an account. Logging in (GitHub OAuth, via Login in the nav) additionally lets you:

• install tags from the tag store
• write and publish your own tags
• save public URLs and HackPads
• submit encoding tests, like tags and follow people

The converter has two editors: Input on the left and Output on the right. You write tags in the input; the output shows the converted result.

Applying tags

Above the editors is the tag menu, grouped by category (Array, Charsets, Compression, Convert, Email, Encrypt, Hash, IP, Math, SQLi, String, Utils, Variables, XML, XSS). Clicking a tag wraps the current selection in the input — or inserts an empty pair of tags if nothing is selected — and leaves the selection inside the tag so you can keep typing.

Tags that can decode as well as encode expand into a submenu with encode, decode and decode → encode. Hovering a tag shows its description and the help text for each of its arguments.

The Search tags… box above the menu is usually faster: type part of a tag name and the categories are replaced by flat lists of matching tags under Encode, Decode and Decode → Encode.

The editors

• Autocomplete. Type <@ in the input to get encode, decode, decodeEncode and autodecode. Once you've picked one, the completion list becomes every installed tag name, pre-filled with that tag's default arguments and its closing tag.
• Tag highlighting and tooltips. Hackvertor tags are highlighted in the input, and hovering one shows what the tag does.
• Unicode highlighting.Any non-ASCII character is highlighted in red in both editors. Invisible characters (zero-width spaces, tag characters, variation selectors, bidi controls) are drawn as a red badge showing their codepoint, so you can see the things you normally can't.
• Character info. Select a single character in either editor and a panel appears in the bottom right with its name, codepoint, decimal value, UTF-8 and UTF-16 bytes, HTML entity, JavaScript escape and percent-encoding.
• Selection matches. Selecting text highlights every other occurrence of it in the same editor.
• Length counters.The yellow number next to “Input:” and “Output:” is the character count. A second red number appears when the UTF-8 byte length differs — a quick signal that the text contains non-ASCII characters.

Buttons and panels

Below the buttons are four collapsible panels:

• Autodecoder — continuously tries to work out how the input is encoded. See the autodecoder.
• Options — Real-time conversion is on by default and re-converts on every keystroke. Turn it off and use Convertif you're working with slow tags or very large inputs.
• Extras — Debugreplaces the output with the parsed abstract syntax tree as JSON, which is the fastest way to see why a tag isn't being recognised. Select input and Select output select all text in an editor. Send to HackPad opens the output in HackPad as either JS or HTML, letting you set the CSP and charset on the way. Send to Snippet opens the input in the Snippet image editor.
• History— the last 1000 conversions, stored in your browser's local storage. Click an entry to restore that input and output.

A Hackvertor tag looks like an HTML tag with an @ after the angle bracket. The name in brackets is the tag being applied:

<@encode(base64)>hello</@encode>

Anything that isn't a recognised operation is left alone and passed straight through as text, so stray <@ sequences in your data won't break the conversion.

The four operations

Nesting tags

Tags evaluate from the inside out, so this base64-encodes the text and then URL-encodes the base64:

<@encode(urlEncode)><@encode(base64)>hello</@encode></@encode>

Text either side of a tag is preserved, so you can encode just part of a payload:

<img src=x onerror=<@encode(htmlEntities)>alert(1)</@encode>>

Arguments

Tags can take arguments, listed after the tag name and separated by commas. Four kinds are supported:

• Strings — single or double quoted, with \n, \r, \t, \v, \f, \\, \xNN and \uNNNN escapes. An unclosed quote is an error.
• Numbers — decimal (42) or hexadecimal (0xff).
• Quoteless strings — bare text, useful when the value contains no comma or bracket, e.g. UTF-8.
• Booleans — true or false.

<@encode(myTag,'a string',0xff,UTF-8,true)>input</@encode>

When you insert a tag from the menu its arguments are filled in with their defaults, so you can see the shape immediately and edit from there.

Self-closing tags

Some tags generate output rather than transforming input — a random value, a timestamp, a variable lookup. These are marked self-closing and are written with a space, slash and closing bracket, with no closing tag:

<@encode(uuid) />

The autodecoder takes a blob of encoded data and works out how to get back to the original. It's available two ways: the Autodecoder panel under the converter, which runs continuously against whatever is in the input, and the <@autodecode> tag, which you can nest like any other tag.

Its output isn't the decoded text — it's the encoding chain, written as nested encode tags with the plaintext at the centre. So given a double-encoded value you might get back:

<@encode(url)><@encode(base64)>secret</@encode></@encode>

This tells you both what was done to the data and how to reproduce it. Press ↑ Input in the panel to move that chain into the input; converting it gives you the original value back, and you can delete layers to peel the encoding apart.

How it decides, roughly:

1. Whole-input match. Every installed tag that implements matches()is tried in priority order (URL, gzip and deflate first, then base64, hex, unicode escapes, HTML entities and so on). Each candidate decode is scored: gaining structure (JSON, XML/HTML, JWT, UUID, a URL, a path) scores highly, as does falling entropy, shrinking length, recognisable binary magic bytes, and output that another tag's matches() recognises as a further layer. Highest score wins.
2. Speculative decode. If nothing matched but the input is dense with encoding markers — lots of %or backslashes, URL-encoded escape sequences, a UTF-7 shift character — it tries the obvious candidates anyway. This is what catches double and triple URL encoding, where the outer layer doesn't look like a clean single encoding.
3. Inline matches.Failing that, it scans the input left to right looking for embedded encodings using each tag's startsWith(), with word-boundary checks so ordinary words aren't mistaken for hex or base64.
4. Recurse. Whatever it decodes is fed back in, up to 20 layers deep.

Because the scoring uses the matches() methods of all your installed tags, installing more tags makes the autodecoder better at recognising layers — and a tag you write yourself joins in automatically as soon as you give it a matches() or startsWith() method.

The tag store lists every published tag. Scroll to load more, or use the search box in the header — it matches tag names and descriptions. Each card shows the category, the author, and how many installs, likes and views the tag has.

Open a tag to see its full source, its arguments, its encoding tests, and buttons to Install tagand like it. Installing is what makes a tag appear in the converter's tag menu, in autocomplete, and in the autodecoder's detection pass. Tags marked Built-in are always available and don't need installing.

Your own installs live under My tags in the avatar menu, alongside My tests, My urls and My HackPads.

A tag is a JavaScript class. Go to Tag store → New tag and you get a form on the left and a code editor on the right, pre-filled with a working example.

Anatomy of a tag

class MyTag {
  encode(input, arg1) {
    // Required. Transform the input and return the result.
    return btoa(input);
  }

  decode(input, arg1) {
    // Optional. Reverse what encode does. Remove it if not used.
    return atob(input);
  }

  startsWith(input) {
    // Optional. Detects this encoding at the start of a string.
    // Always anchor with ^ and no $.
    return /^(?:%[a-f0-9]{2})+/i.exec(input);
  }

  matches(input) {
    // Optional. Detects a string that is entirely this encoding.
    // Always anchor with ^ and end with $.
    return /^(?:%[a-f0-9]{2})+$/i.exec(input);
  }
}

• encode() is the only required method. Whatever it returns becomes the output.
• decode() is what makes the decode and decode → encode menu entries appear for your tag.
• startsWith() and matches() are what let the autodecoder detect your encoding. Both return a regex match (or null).
• Methods may be async or return a promise — the result is awaited.
• Naming rules: the class name is the tag name and must match ^[a-zA-Z_][a-zA-Z_0-9]*$. Renaming the class renames the tag; the name can't be changed once the tag is published.
• Tick Is this a self closing tag? if your tag generates output and takes no input.

Declaring arguments

Open Tag arguments to add arguments with a builder, or Tag argument source to edit the JSON directly. Each argument is an object with a type (string, number, quotelessString or boolean), the help text shown on hover, and a default value:

[
  {
    "type": "string",
    "help": "The charset to use",
    "defaultValue": "UTF-8"
  }
]

Arguments arrive as the parameters after input, in order. The defaults are what get inserted when someone picks your tag from the menu, so make them sensible.

Calling other tags and variables

Inside any method you have access to the Hackvertor instance:

• hv.tags.<name>.encode(input, …) and .decode(…) call another installed tag, so you can compose rather than re-implement. The code editor autocompletes tag names and their argument lists as you type hv.tags.
• hv.variables holds shared data you can read and write. It ships with hv.variables.htmlEntities(the full HTML entity name → codepoint table) and hv.variables.xssCheatSheet, which contains the PortSwigger XSS cheat sheet data grouped into events, protocols, obfuscation, polyglot, wafBypassGlobalObj, angularJs, vuejs, danglingMarkup and more.

Testing and publishing

• The Test input box is kept in sync with your class name and arguments. Test code runs it in the sandbox and shows the output in an alert at the top of the page — the full result is also logged to the browser console.
• Format code runs Prettier over your class. Saving formats it too.
• The two ✨ AIbuttons — write the class from a description, and write the description from the class — use Chrome's built-in on-device Prompt API. They need Chrome 138+ with that API available and will tell you if it isn't.
• Saving is blocked if you left the name as MyTag, if the JavaScript doesn't parse, or if the arguments aren't valid JSON. Descriptions are capped at 255 characters and code at 100,000.
• From a tag's page you can edit your own tags, or copy someone else's as a starting point — the copy is created with Copy appended to the name.

Encoding tests are community-submitted proofs that a conversion behaves correctly. They run in your browser, in the same sandbox the converter uses. There are two kinds:

• Autodecode test — give an encoded input and the exact tag chain the autodecoder should produce for it. This is how you pin down detection behaviour and catch regressions when new tags change the scoring.
• Tag test — pick a tag, an operation (encode or decode), optional arguments and an input, and record the expected output.

The index page has a batch runner that runs every listed test and reports passes and failures; individual tags show their own tests on their page. Tests are immutable once created, so a passing test stays meaningful. Names are limited to 100 characters, descriptions to 500, and inputs and expected outputs to 10,000.

You can jump straight from a tag to /encoding-tests/new?tagId=… to write a test for it with the tag pre-selected.

HackPad runs HTML and JavaScript in a throwaway sandboxed iframe so you can test payloads without a target. It has two input panes — JS and HTML — each with its own output pane, plus a Render panel showing the live document.

Press Execute or Ctrl+Enter to run. Whatever your JS evaluates to appears in the JS output; the serialised DOM after execution appears in the HTML output. Calls to alert() are detected and flagged, which is what the hacking room uses to tell you a payload fired.

The Options panel is where the interesting controls live:

Save stores the HackPad and gives it a shareable URL, Copy as HTML copies the HTML pane as rich text, and JS → Snippet / HTML → Snippet hand the code to the image editor. A HackPad History panel keeps your recent runs, and a collapsible Converter at the bottom of the page gives you the full tag interface without leaving HackPad.

The hacking room is a shared HackPad. It answers the question “does this payload work in yourbrowser?” without asking anyone to copy and paste.

1. Press Generate new room to mint a room, then Copy to clipboard and send the link to whoever you want in it. Room IDs are random UUIDs; anyone with the link can join, so treat the link as the secret.
2. Everyone picks a username on joining. The Connected browserspanel lists who's present along with their detected browser and version.
3. Type HTML into the HackPad and it's broadcast to everyone in the room. Each browser runs it in its own sandbox and sends back what it rendered, plus whether alert() fired.
4. The HTML output panel collects those results side by side, so browser differences are immediately visible.
5. The Messages panel is a simple chat for coordinating.

Broadcast HTML is capped at 10,000 characters and chat messages at 1,000.

Save in the converter offers two visibilities:

• Private— your input is base64-encoded into the page's URL fragment. Nothing is sent to the server; the data lives entirely in the link, so anyone you send it to sees exactly what you had. This is the only option when you're not logged in.
• Public — requires a login and a description, and creates a permanent page under /urls/<id>. Public URLs record which tags were in play, so anyone opening the link gets those tags available for that conversion even if they haven't installed them.

Browse everyone's saved work at URLs and HackPad URLs, or your own via My urls and My HackPads in the avatar menu. The site footer also surfaces the most popular and most recent URLs, HackPads, tags and users.

Snippet turns code into a presentable image — for a writeup, a slide or a tweet. It's the destination of the Send to Snippet buttons in the converter and HackPad, which pass the code across in the URL fragment.

You get syntax highlighting for JavaScript, TypeScript, HTML, CSS, JSON, Python, Markdown, Go, Rust, SQL, Java, PHP, YAML and a mixed HTML/JS/CSS mode, plus control over the gradient background, font and size, code theme and background, border, line numbers, title bar and text, padding and drop shadow. The Highlight panel emphasises a line range in a colour of your choice.

Presentation preset and 𝕏 Twitter preset set sensible dimensions and type sizes in one click; you can also name and save your own presets, which are stored in your browser. Finish with Copy image or Export PNG.

Every tag has an author, and every author has a profile listing their saved URLs and HackPads. You can follow people and like tags; profiles show whether you follow each other. Tag pages show install counts, likes and views, which is a decent proxy for what's worth installing.

• Install tags before anything else — the converter, autocomplete and the autodecoder are all only as good as the tags you have.
• Reach for the autodecoder before decoding by hand. Even when it's not completely right it usually identifies the outer layer, and ↑ Input gets you a chain you can edit.
• If a tag isn't applying, hit Debug — the parse tree shows immediately whether the tag was recognised or treated as text.
• Watch the red byte counter and the red character highlighting. They're often the fastest way to spot a smuggled invisible character or a homoglyph.
• Select a single character to get its full encoding table in the bottom-right panel — no need to convert just to find a codepoint.
• Turn off real-time conversion when working with compression, hashing or very large inputs.
• In HackPad, Ctrl+Enter executes from either editor.
• When you write a tag, give it matches() and startsWith() — it costs a couple of regexes and it teaches the autodecoder a new encoding.
• Back new tags with an encoding test. It documents the behaviour and the batch runner will catch it if something later breaks it.