Base64 Encode & Decode in JavaScript

Base64 encode in JavaScript (browser)

btoa() encodes a string to Base64. It only accepts ASCII/Latin-1 strings.

btoa('Hello')         // "SGVsbG8="
btoa('Hello World')   // "SGVsbG8gV29ybGQ="
btoa('1 + 1 = 2')     // "MSArIDEgPSAy"

Base64 decode in JavaScript (browser)

atob() decodes a Base64 string back to plain text:

atob('SGVsbG8=')            // "Hello"
atob('SGVsbG8gV29ybGQ=')   // "Hello World"

Handling Unicode with btoa/atob

btoa() throws a InvalidCharacterError for characters outside Latin-1 (code points above 255). To encode Unicode, first convert to UTF-8 bytes:

// Encode Unicode to Base64
function encodeBase64(str) {
  return btoa(
    encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (_, p1) =>
      String.fromCharCode(parseInt(p1, 16))
    )
  )
}

// Decode Base64 to Unicode
function decodeBase64(str) {
  return decodeURIComponent(
    Array.from(atob(str))
      .map(c => '%' + c.charCodeAt(0).toString(16).padStart(2, '0'))
      .join('')
  )
}

encodeBase64('こんにちは')  // "44GT44KT44Gr44Gh44Gv"
decodeBase64('44GT44KT44Gr44Gh44Gv')  // "こんにちは"

In modern browsers you can also use TextEncoder and TextDecoder:

// Encode string to Base64 using TextEncoder
function toBase64(str) {
  const bytes = new TextEncoder().encode(str)
  const binary = Array.from(bytes, b => String.fromCharCode(b)).join('')
  return btoa(binary)
}

// Decode Base64 to string using TextDecoder
function fromBase64(base64) {
  const binary = atob(base64)
  const bytes = Uint8Array.from(binary, c => c.charCodeAt(0))
  return new TextDecoder().decode(bytes)
}

toBase64('Hello 🌍')     // "SGVsbG8g8J+MjQ=="
fromBase64('SGVsbG8g8J+MjQ==')  // "Hello 🌍"

Base64 in Node.js

Node.js uses the Buffer class for Base64 operations. No import needed:

// Encode to Base64
const encoded = Buffer.from('Hello World').toString('base64')
// "SGVsbG8gV29ybGQ="

// Decode from Base64
const decoded = Buffer.from('SGVsbG8gV29ybGQ=', 'base64').toString('utf8')
// "Hello World"

// Unicode works by default — Buffer handles UTF-8
Buffer.from('こんにちは').toString('base64')
// "44GT44KT44Gr44Gh44Gv"

Buffer.from('44GT44KT44Gr44Gh44Gv', 'base64').toString('utf8')
// "こんにちは"

Base64url (URL-safe Base64)

Standard Base64 uses + and /, which have special meaning in URLs. Base64url replaces them with - and _ and omits padding. JWTs use Base64url for their header and payload:

// Standard Base64 → Base64url
function toBase64Url(str) {
  return btoa(str).replace(/+/g, '-').replace(///g, '_').replace(/=/g, '')
}

// Base64url → standard Base64
function fromBase64Url(base64url) {
  const padded = base64url.replace(/-/g, '+').replace(/_/g, '/') +
    '=='.slice(0, (4 - base64url.length % 4) % 4)
  return atob(padded)
}

// Node.js
Buffer.from(str).toString('base64url')    // encode
Buffer.from(str, 'base64url').toString()  // decode

Data URIs with Base64

Data URIs embed file content directly in HTML or CSS using Base64:

// Encode a local file as a data URI (browser with File API)
async function fileToDataUri(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onload = () => resolve(reader.result)
    reader.onerror = reject
    reader.readAsDataURL(file)
  })
}

// Create a small red dot PNG as a data URI (Node.js)
const pngBuffer = fs.readFileSync('dot.png')
const dataUri = 'data:image/png;base64,' + pngBuffer.toString('base64')
// "data:image/png;base64,iVBORw0KGgo..."

HTTP Basic Auth header

HTTP Basic Authentication encodes credentials as Base64 in the Authorization header:

// Browser
const credentials = btoa('username:password')
const headers = { 'Authorization': 'Basic ' + credentials }

// Node.js
const credentials = Buffer.from('username:password').toString('base64')
const headers = { 'Authorization': 'Basic ' + credentials }

Encode or decode Base64 online

Use the Base64 Encoder to encode any text instantly, or the Base64 Decoder to decode a Base64 string. Both handle Unicode and run entirely in your browser.

Frequently asked questions

How do I Base64 encode a string in JavaScript?

Browser: btoa("Hello") returns "SGVsbG8=". Node.js: Buffer.from("Hello").toString("base64"). For Base64URL (JWTs/URLs): chain .replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '') after btoa().

What is the difference between btoa and Buffer.from in Node.js?

btoa() only accepts Latin-1 (code points up to 255) and throws for Unicode. Buffer.from(str).toString('base64') handles UTF-8 correctly out of the box. For cross-environment code, use TextEncoder with btoa() for Unicode support.

How do I handle Unicode with btoa()?

Use TextEncoder to convert to UTF-8 bytes first: encode the string to a Uint8Array, convert bytes to a binary string, then call btoa(). To decode, reverse the process with atob() and TextDecoder.

What is Base64URL and how do I encode it in JavaScript?

Base64URL replaces + with -, / with _, and omits = padding — making it safe for URLs and JWT use. Browser: chain replacements after btoa(). Node.js 18+: Buffer.from(str).toString('base64url').

How do I Base64 decode in the browser?

Use atob("SGVsbG8=") for ASCII. For UTF-8 Unicode, wrap with TextDecoder: convert the binary string from atob() to a Uint8Array, then call new TextDecoder().decode(bytes).

How do I encode a file to Base64 in Node.js?

Read the file as a Buffer and call .toString('base64'): fs.readFileSync('image.png').toString('base64'). Prepend data:image/png;base64, to create a data URI for HTML embedding.