How to Decode Base64 in JavaScript

Just as important as encoding data is the ability to safely extract and decode it. In this guide, we'll review the correct methods for parsing Base64 strings back into raw text or binary files using modern JavaScript in both browser and Node.js environments.

Frontend: Decoding in the Browser

The browser provides the atob() (ASCII to Binary) function to decode Base64 strings. However, if the original encoded string contained complex UTF-8 characters (like emojis or international text), a simple atob() call will return a corrupted, illegible string.

The Safe Approach (UTF-8 Decoding)

To safely decode modern text, you must use atob() to get a binary string, convert that string into a strict array of 8-bit bytes (Uint8Array), and then use the modern TextDecoder API to parse those bytes back into proper Unicode characters.

function decodeBase64ToUtf8(base64Str) {
    // 1. Decode Base64 to a raw binary string
    const binString = atob(base64Str);
    
    // 2. Convert the binary string to an array of 8-bit bytes
    const bytes = new Uint8Array(
        binString.split('').map(char => char.charCodeAt(0))
    );
    
    // 3. Decode the byte array back to a proper UTF-8 text string
    return new TextDecoder().decode(bytes);
}

// Decoding the Base64 representation of "Hello 🚀"
const encodedStr = "SGVsbG8g8J+agA==";
console.log(decodeBase64ToUtf8(encodedStr)); // Outputs: Hello 🚀

Decoding Files to Blobs

If you receive a Base64 string that represents a file (like an image from an API) and you want to trigger a download or display it in the browser, you need to convert it into a Blob.

function base64ToBlob(base64, mimeType) {
    // Remove the Data URL prefix if it exists
    const cleanBase64 = base64.replace(/^data:.*,/, '');
    
    // Decode to binary string
    const byteString = atob(cleanBase64);
    
    // Create an ArrayBuffer and a view
    const arrayBuffer = new ArrayBuffer(byteString.length);
    const uint8Array = new Uint8Array(arrayBuffer);
    
    // Populate the array with byte values
    for (let i = 0; i < byteString.length; i++) {
        uint8Array[i] = byteString.charCodeAt(i);
    }
    
    // Return a Blob
    return new Blob([arrayBuffer], { type: mimeType });
}

// Example usage: Download an image
const base64Image = "iVBORw0KGgo..."; // truncated Base64
const imageBlob = base64ToBlob(base64Image, 'image/png');
const imageUrl = URL.createObjectURL(imageBlob);

// Display the image
const img = document.createElement('img');
img.src = imageUrl;
document.body.appendChild(img);

Backend: Decoding in Node.js

Decoding in Node.js is significantly simpler due to the Buffer API. You don't need to manually iterate over characters or use TextDecoder.

Decoding to a String

To convert a Base64 string back into readable UTF-8 text:

const base64Str = "SGVsbG8gRnJvbSBOb2RlLmpz";

// Create a buffer from the Base64 string, then convert to UTF-8
const decodedText = Buffer.from(base64Str, 'base64').toString('utf-8');

console.log(decodedText); // Hello From Node.js

Decoding to a File

To decode a Base64 string and save it directly to the server's filesystem as a binary file:

const fs = require('fs');

const base64Image = "iVBORw0KGgo..."; // Exclude any data:image/png;base64, prefix

// Create a binary Buffer from the Base64 string
const imageBuffer = Buffer.from(base64Image, 'base64');

// Write the binary data directly to disk
fs.writeFileSync('./decoded_image.png', imageBuffer);
console.log("Image saved successfully.");

Handling Exceptions

When decoding user-provided input, always wrap your decoding logic in a try...catch block. If a user pastes a string that contains invalid Base64 characters, atob() will throw a DOMException, which will crash your application if left unhandled.

For a foolproof visual decoding experience without writing code, you can use our Online Base64 Decoder.