How to Base64 Encode in TypeScript

Base64 is a text-based encoding scheme that converts binary or arbitrary data into a limited set of 64 ASCII characters. It’s often used when data needs to be safely stored or transferred in systems that handle only text, such as JSON, XML, email (MIME), or URLs.

While Base64 increases data size by about 33%, it ensures compatibility across different systems.

Remember, it’s not encryption — just a way to encode data for transport and storage.

Base64 Encoding in TypeScript

Here is how you would encode a plain string into Base64 format using TypeScript.

// This example is for a Node.js environment.
const plainString: string = "Hello World";

// Use the Buffer object to convert the string and then encode to Base64.
const encodedString: string = Buffer.from(plainString, "utf8").toString("base64");

console.log(encodedString);
// Output: SGVsbG8gV29ybGQ=

See how to decode Base64 in TypeScript →

Notes

In a Node.js environment, the `Buffer` class is globally available and provides a reliable way to handle Base64 and character encodings.
For browser-based TypeScript, you would typically use the global `btoa()` function, but be aware that it does not correctly handle Unicode characters without a workaround.

FAQs

What is Base64 padding?

Base64 works by converting every 3 bytes (24 bits) of input data into 4 Base64 characters (4 * 6 bits = 24 bits). Padding is used when your input data isn't a perfect multiple of 3 bytes.

To make the final block a full 4 characters, one or two = characters are added to the end.

If the last group has only one input byte, it's padded with ==.

If the last group has two input bytes, it's padded with =.

The = characters don't represent any data; they simply ensure the encoded output has a length that is a multiple of 4.

What is the difference between Base64 and Base64URL?

The standard Base64 character set includes + and /. These characters have special meanings in URLs (e.g., + is often interpreted as a space) and can cause problems when used in web addresses.

Base64URL is a URL-safe variant that makes two simple character replacements:

It replaces + with - (hyphen).
It replaces / with _ (underscore).

Padding (=) is also often omitted in URL-safe contexts because it can cause issues in some systems.

When should I use Base64?

Base64 is an encoding scheme, not an encryption scheme. Its purpose is to ensure data can be safely transported over systems that are designed to handle only text. You should use it when you need to embed or transmit binary data in a text-based format.

Common use cases include:

Embedding Images: Including small images directly in HTML (<img src="data:image/png;base64,...">) or CSS files to avoid extra HTTP requests.
Data in XML/JSON: Storing binary data (like a small file or image) within a JSON or XML structure, which only supports text.
Email Attachments: The MIME (Multipurpose Internet Mail Extensions) standard uses Base64 to encode email attachments.

Warning: Is Base64 suitable for encryption?

No. You should never use Base64 to secure, hide, or protect sensitive data. Base64 is an encoding standard, not an encryption algorithm.

Encoding is a reversible transformation that uses a public algorithm to change data into a new format. Anyone can decode Base64 because the method is publicly known.
Encryption is a secure transformation that uses a secret key to change data into a new format. Only someone with the correct key can decrypt the original data.

Using Base64 to hide a password is like writing it in Morse code—it looks different, but anyone who knows the standard can instantly read it. It provides zero confidentiality. For securing data, always use a proper encryption library like AES or RSA.

A Faster Way to Test and Validate Your Data

Whether you're integrating this code into an application or doing a one-off conversion, you constantly need to check your work. DevKnife is a dedicated macOS app for developers, built to solve this exact problem.

It provides a suite of trusted, offline tools, like a powerful Base64 converter, to instantly validate your data, test edge cases, and confirm your code is working exactly as you expect.