How to Make a Text to Binary Converter With HTML and JavaScript

Updated October 8, 2026 · 6 min read · By the Hacker Typer team

This project builds a small tool: type text in one box and its binary code appears in another, and the same in reverse. It is a good introduction to how computers store letters, and the whole thing is one short file.

The complete code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Text to Binary Converter</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 700px; margin: 40px auto; padding: 0 16px; }
    textarea { width: 100%; height: 120px; font: 16px monospace; padding: 8px; box-sizing: border-box; }
    label { display: block; margin: 16px 0 6px; font-weight: bold; }
  </style>
</head>
<body>
  <h1>Text to Binary Converter</h1>

  <label for="text">Text</label>
  <textarea id="text" placeholder="Type text here"></textarea>

  <label for="binary">Binary</label>
  <textarea id="binary" placeholder="Or type binary here"></textarea>

  <script>
    const textBox = document.getElementById("text");
    const binaryBox = document.getElementById("binary");

    function textToBinary(text) {
      return text.split("").map(function (letter) {
        return letter.charCodeAt(0).toString(2).padStart(8, "0");
      }).join(" ");
    }

    function binaryToText(binary) {
      return binary.trim().split(/\s+/).map(function (byte) {
        return String.fromCharCode(parseInt(byte, 2));
      }).join("");
    }

    textBox.addEventListener("input", function () {
      binaryBox.value = textToBinary(textBox.value);
    });

    binaryBox.addEventListener("input", function () {
      textBox.value = binaryBox.value.trim() ? binaryToText(binaryBox.value) : "";
    });
  </script>
</body>
</html>

How to use this code

1. Get the file. Press Download above the code to save it as text-to-binary.html. Or press Copy code, paste it into a plain text editor (Notepad on Windows, TextEdit in plain-text mode on a Mac, or a code editor such as VS Code) and save it as text-to-binary.html. The name must end in .html, not .txt.
2. Open it. Double-click the file. It opens in your web browser and starts working straight away.
3. Change it. Open the same file in the text editor, edit something, save, and refresh the browser page to see the result.

Nothing needs to be installed, and the file works without an internet connection.

How the code works

Text to binary, one step at a time

Take the word Hi and follow it through textToBinary:

map is what applies the middle three steps to every letter in the list.

Binary back to text

• trim() removes spaces at the start and end.
• split(/\s+/) cuts the text wherever there is a space, giving one piece per byte.
• parseInt(byte, 2) reads each piece as a base 2 number: "01001000" becomes 72.
• String.fromCharCode(72) turns the number back into its letter, "H".

Making it live

addEventListener("input", ...) runs a function every time the contents of a box change. Typing in the text box fills the binary box, and typing in the binary box fills the text box.

Easy changes to try

• No spaces in the output. Change join(" ") to join("").
• Hexadecimal instead of binary. Change toString(2).padStart(8, "0") to toString(16).padStart(2, "0"), and parseInt(byte, 2) to parseInt(byte, 16).
• A copy button. Add <button onclick="navigator.clipboard.writeText(binaryBox.value)">Copy</button> under the binary box.

One limit to know about

This simple version handles English letters, numbers and common symbols correctly. Characters such as emoji and some accented letters need more than eight bits, so they will not convert back properly. Handling every character needs the TextEncoder tool built into browsers, which is what our full converter uses.