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 in a web worker inside a sandboxed iframe with a restrictive CSP, so tag code never touches the main page, has no network and is stopped if it never finishes.

You can use the converter, HackPad, Snippet and browse saved recipes and pads 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 recipes and pads
• 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, Checks, Compression, Convert, Email, Encrypt, Hash, IP, Math, SQLi, String, Unicode, 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.
• Tag suggestions. Select some text in the input and, if it looks encoded, a “Looks like” tooltip offers the decodes that fit it. A tag is offered outright when its matches() method takes the whole selection, and marked part when its startsWith() method recognises something inside it. Each tag comes with two buttons. decode replaces the text the tag recognised with what it decodes to. decode → encode replaces it with the decoded text wrapped in the matching encode tag, so the output stays the same while the input becomes the recipe that produces it. Either way the decoded text stays selected, so a nested encoding comes apart one click at a time. Hover a suggestion to see what it decodes to. Tags you install join in as long as they define those methods and a decode().
• 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.

Jigsaw mode

Switch the input from Tags to Jigsaw to build a conversion out of pieces. A row reads left to right: it starts with a text piece, and each tag fitted to its right wraps everything before it. Rows run together in the output; the ↵ button next to + Text adds a row holding only a line break, so the rows either side of it come out on separate lines. The panel of any text piece with line breaks in it has a CR/LF line breaks switch that writes them as \r\n sequences rather than \n. The tags the canvas generates are shown underneath, and switching back to Tags mode keeps them.

• Values on every piece. After a conversion, each tag piece shows the value it produced and how much longer or shorter it made its input. A tag that threw is outlined in red with its error. Select a piece and press Output to read or copy the whole value.
• Conditions. In a row joined with && or ||, each operand gets a green or red dot for how it was read, and operands that never ran because an earlier one decided the result are dimmed.
• Solve. Select a text piece and press Solve to run the autodecoder on it. The piece is replaced by the chain of tags that produces it, with the decoded text at its head.
• Flip row. Turns an encoder into the decoder that undoes it, or the other way round: the tags swap encode for decode, run in reverse order, and start from the row's output. It is offered for rows made only of encode and decode pieces whose tags implement both directions.
• Suggestions. When the value leaving the selected piece looks encoded, the panel offers the decode that fits it.
• Variables. A dashed wire joins every setVariable piece to the getVariable pieces that read it, one colour per name. A read that nothing sets is outlined in yellow, because it produces an empty string. Branch stores a row's value in a variable and starts a new row that reads it, so several rows can transform the same value in different ways. The Examples menu above the input has variable examples that open in Jigsaw mode with their wires drawn, including a read placed before its set and a request-smuggling payload whose chunked size line is the smuggled request's length in hex, wired back to the same set, so it stays correct when you edit it.
• Selecting and duplicating. Shift-click pieces, or drag across empty canvas, to select several; Ctrl/⌘+A selects them all. Duplicate (or Ctrl/⌘+D) copies the selection into new rows under everything else, one row per run of adjoining pieces, and selects the copies so they can be dragged into place. Hold Alt while dragging a piece to drag a copy of it, and everything after it, and leave the original where it is. Delete removes the whole selection.

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 Convert if you're working with slow tags or very large inputs.
• Extras — Debug replaces 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 five 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>>

Conditions with && and ||

Two or more operands separated by && or || form an expression that works like JavaScript, as long as at least one of them is a check tag. An operand is a tag, or the plain text between two operators (or between an operator and a tag, or the end of the input), with surrounding whitespace trimmed. Without a check tag everything stays plain text, so && between two encode tags is just text.

• A && B outputs B when A is truthy, otherwise A.
• A || B outputs A when A is truthy, otherwise B.
• !A negates A. Write the ! directly before the tag.
• && binds tighter than ||, so A || B && C means A || (B && C).
• Evaluation short-circuits: a tag whose result can't change the outcome is never run.
• Falsy values are false, an empty output, the text false, and a tag that threw an error. Anything else is truthy.
• As in JSX, a boolean result renders as nothing. A failed && simply produces no output.

The isJson tag's check() validates JSON, so this base64-encodes the input only when it really is JSON, and otherwise outputs nothing:

<@check(isJson)>{"a":1}</@check> && <@encode(base64)>{"a":1}</@encode>

Negate the check to hex-encode everything that is not JSON:

!<@check(isJson)>plain text</@check> && <@encode(hex)>plain text</@encode>

Fall back to a different encoding when a decode throws:

<@check(isJson)>{}</@check> && <@decode(base64)>not base64!</@decode> || <@encode(hex)>fallback</@encode>

Plain text works as an operand too, so a condition can output a fixed value:

<@check(isJson)>{"a":1}</@check> && valid JSON || not JSON

Expressions work inside other tags too, so the result can be encoded further:

<@encode(base64)><@check(isJson)>{}</@check> && <@encode(hex)>ok</@encode></@encode>

The built-in check tags live in the Checks category of the tag menu: isJson, isNumeric, equals and contains. The last two take the text to compare against as an argument:

<@check(equals,'admin')>admin</@check> && match || no match

<@check(contains,'<script')><script>alert(1)</script></@check> && has script || clean

Arguments

Tags can take arguments, listed after the tag name and separated by commas. Five 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.
• Enums — one of a fixed set of values declared by the tag. They are written as quoted strings, so anything can appear in a value, and your tag receives a plain string.

<@encode(myTag,'a string',0xff,UTF-8,true,'SHA-256')>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.

Enum arguments don't have to be typed. Hover one and pick from the drop-down in the tooltip, or put the caret inside it and press Ctrl-Space to choose from the autocomplete list.

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. The two menus above the list narrow it to one category or one author, and clicking the category on a card does the same. 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 tag and 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 recipes and My pads.

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);
  }

  check(input, arg1) {
    // Optional. A yes/no question about the input. Returns true or false.
    return this.matches(input) !== null;
  }
}

• 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).
• check() returns true or false. It enables the check menu entry and <@check(tag)>, and lets your tag decide && / || expressions. It takes the same arguments as encode().
• 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, boolean or enum), the help text shown on hover, and a default value:

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

An enum argument also takes a values array of the allowed values, and its defaultValue must be one of them:

[
  {
    "type": "enum",
    "help": "Hash algorithm",
    "values": ["SHA-1", "SHA-256", "SHA-512"],
    "defaultValue": "SHA-256"
  }
]

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. Declaring an enum also gives you two things for free: users pick values from a menu instead of typing them, and the auto-decoder tries each declared value when it's working out how to decode something with your tag.

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. Those built-in entries are read-only; the keys you add are shared with every other tag in the conversion.
• hv.setVariable(name, value) and hv.awaitVariable(name) are what the setVariable and getVariable tags use.awaitVariable returns the value when it is already set, otherwise a promise that resolves once another tag sets it later in the same conversion, so return it from encode and a read may sit before its write in the input. If nothing sets it the promise resolves to an empty string.
• Tags run in a web worker, so there is no document, window or DOMParser, and a conversion that has not finished after 15 seconds is stopped. For the things that need a document there are three helpers, each returning a promise: hv.decodeHtmlEntities(input) decodes character references exactly as the browser's HTML parser does; hv.parseXml(input, mimeType) parses with the browser's DOMParser and gives the root element as plain data (nodeType, nodeName, nodeValue, attributes as an array of { name, value } and childNodes); and hv.prompt(userPrompt, systemPrompt) asks the browser's built-in language model, where there is one.
• Hashing works as usual: crypto.subtle.digest(algorithm, bytes) supports SHA-1, SHA-256, SHA-384 and SHA-512, and crypto.getRandomValues and crypto.randomUUID are available. The worker is not a secure context, so the rest of SubtleCrypto (keys, HMAC, encryption) is not; the sandbox document computes digests on the worker's behalf.
• The sandbox is frozen before any tag runs, so that one tag cannot interfere with another: built-ins such as btoa, the worker's interfaces, hv and every tag instance (once its constructor has finished) are read-only. Assigning to any of them throws a TypeError. Keep per-call state in local variables rather than on this.

To see exactly what is available — every tag name, its arguments and defaults, and the shape of every variable — /api/reference returns the lot as JSON. It only lists built-in tags by default, since a tag store tag is registered only for users who installed it; add ?tags=all to include them, or ?variables=full for the complete variable data rather than a summary. It is handy for pasting into an LLM alongside your tag code.

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 ✨ AI buttons — 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 /tag-store/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 pad stores the HackPad as a pad with a shareable link, 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 your browser?” 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 browsers panel 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 recipe in the converter stores your input as a recipe: the tags and text that produce the output, which is worked out again whenever the recipe is opened. Saving in HackPad creates a pad in the same way. Both offer 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 /recipes/<id> (or /hack-pad/<id> for a pad). Public recipes 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 Recipes and Pads, or your own via My recipes and My pads in the avatar menu. The site footer also surfaces the most popular and most recent recipes, pads, tags and users. Links to the old /urls pages still work and redirect to the new ones.

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.