How to Fix "Failed to execute btoa on Window" in JavaScript (Unicode/Emoji Base64)

If you are trying to encode a string to Base64 in JavaScript using the native browser function, you have likely encountered this exact console error:

Uncaught DOMException: Failed to execute 'btoa' on 'Window': The string to be encoded contains characters outside of the Latin1 range.

This is one of the most frustrating errors in modern web development. It happens the moment a user types an emoji (🚀), an accented letter (é), or any non-English character into your input field.

In this guide, we will explain exactly why this happens and provide the copy-paste solution to fix it permanently.

The Root Cause: Why btoa() Fails on Emojis

The native btoa() (Binary to ASCII) and atob() functions in JavaScript are incredibly fast, but they have a fatal flaw: they only support ASCII (Latin1) characters.

When you pass a standard string like "Hello World", it works perfectly. But modern strings in JavaScript are UTF-16 encoded. When you pass a character that requires more bytes (like an emoji), btoa() panics because it doesn't know how to convert multi-byte characters into a binary string.

The Solution: How to Encode Unicode to Base64

To fix this, we need to manually encode the multi-byte characters into a format that btoa() can safely read. The most robust way to do this without installing heavy external libraries is by combining encodeURIComponent with a simple Regex replacer.

The Safe Encode Function

Copy and paste this function into your codebase. It safely converts any UTF-8 string into Base64:

function unicodeBase64Encode(text) {
    return btoa(
        encodeURIComponent(text).replace(/%([0-9A-F]{2})/g,
            function toSolidBytes(match, p1) {
                return String.fromCharCode('0x' + p1);
            }
        )
    );
}

The Safe Decode Function

Using standard atob() on the resulting string will give you gibberish. Use this reverse function instead:

function unicodeBase64Decode(base64) {
    return decodeURIComponent(
        atob(base64).split('').map(function(c) {
            return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
        }).join('')
    );
}

The Quickest Fix: Use a Unicode-Safe Base64 Tool

If you are just trying to quickly encode or decode an API key or a JSON web token containing special characters, writing custom scripts is a waste of time. Furthermore, using random online decoders puts your sensitive data at risk if they send it to a server.

We built the DevFormat Base64 Encoder & Decoder specifically to solve this problem.

• 100% Unicode & Emoji Safe: Our engine uses the exact safe-parsing logic shown above.
• Privacy-First: It runs entirely client-side in your browser. Your data is never sent to a server.

👉 Try the Free Unicode-Safe Base64 Tool Here