jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

HTML Tools

Free Uint8Array Base64/Hex Converter

Generate code snippets using the native Uint8Array Base64 and Hex methods available in modern browsers. toBase64() encodes binary data to a Base64 string, toHex() encodes to a hex string, and the static methods fromBase64() and fromHex() decode back to Uint8Array. Replaces error-prone manual encoding with btoa and charCodeAt patterns.

Loading tool...

What is Uint8Array Base64/Hex Converter?

Uint8Array.prototype.toBase64() encodes the byte contents of a Uint8Array to a Base64-encoded string. Uint8Array.prototype.toHex() produces a lowercase hex string. Their counterparts, Uint8Array.fromBase64(string) and Uint8Array.fromHex(string), parse Base64 and hex strings back into Uint8Array. These methods are part of Baseline 2025 (Chrome 136+) and eliminate the need for manual encoding helpers. They are the standard way to transfer binary data between the browser and the server or between different Web APIs.

quickAnswer

Generate code snippets using native Uint8Array Base64 and Hex encoding methods. toBase64() and toHex() encode binary data; Uint8Array.fromBase64() and Uint8Array.fromHex() decode strings back to binary. Available in Chrome 136+, Edge, Firefox, Safari. No more manual btoa or charCodeAt loops.

limitations

  • Not available in older browsers without Baseline 2025 support. For broad compatibility, provide a fallback using manual encoding via btoa and charCodeAt until the methods reach all supported environments.
  • Decoding very large Base64 or hex strings into Uint8Array allocates the full decoded buffer in memory and can cause out-of-memory conditions. For extremely large data, consider streaming decoders or chunked processing.
  • Only standard Base64 with padding is supported by fromBase64(). URL-safe Base64, Base64 without padding, and hex strings require pre-processing before using the native methods.

How to use this tool

  1. Create a Uint8Array from file data, typed array operations, or a Web API like fetch, WebSocket, or FileReader.
  2. Call .toBase64() on the array to get a standard Base64 string suitable for JSON payloads, data URIs, or API requests.
  3. Call .toHex() on the array to get a hex string useful for debugging, cryptographic display, or protocols that expect hex encoding.
  4. Use Uint8Array.fromBase64(string) or Uint8Array.fromHex(string) to decode the encoded string back to binary data.

What you can use it for

  • Encode binary file contents uploaded from a file input as Base64 for sending in a JSON API request.
  • Display raw byte data as a hex string in a developer tool or debug panel for inspection.
  • Decode a Base64-encoded response from a WebSocket or fetch API back into a Uint8Array for further binary processing.

Use cases

Practical examples

example

Encode a file as Base64 for JSON upload

A user selects a file in an input element. Read the file as an ArrayBuffer, wrap it in a Uint8Array, call toBase64(), and include the Base64 string and filename in a JSON payload sent to the server via fetch.

example

Decode hex bytes back to binary

A WebSocket delivers a hex-encoded byte string like a1b2c3d4. Pass it to Uint8Array.fromHex() to get the underlying binary data, which can then be rendered as an image or processed in a WebAssembly module.

Common mistakes

  • Calling toBase64() or toHex() on a regular array instead of a Uint8Array — these methods only exist on Uint8Array instances, not Array or other typed arrays.
  • Assuming fromBase64() accepts non-standard Base64 variants — it expects standard Base64 with padding. Use the Base64 URL-safe variant through manual replacement before decoding.
  • Passing an invalid hex string (odd length, non-hex characters) to fromHex() — it throws a SyntaxError. Always validate or sanitize hex input before decoding.

verification

  1. Open Chrome 136+ DevTools Console. Create a Uint8Array via new Uint8Array([72, 101, 108, 108, 111]). Call .toBase64() and verify it returns the string 'SGVsbG8='. Call Uint8Array.fromBase64('SGVsbG8=') and verify the output matches the original array.
  2. Call .toHex() on the same Uint8Array and verify it returns '48656c6c6f'. Call Uint8Array.fromHex('48656c6c6f') and confirm the decoded array matches the original.

FAQ

Questions about Uint8Array Base64/Hex Converter

How do these methods compare to btoa and atob?

btoa and atob operate on strings, not binary data. To encode binary with btoa, you must first convert each byte to a character via String.fromCharCode, then call btoa, which is verbose and error-prone. Uint8Array.toBase64() and fromBase64() work directly on byte arrays, handle all byte values correctly, and produce standard Base64 output. They are the recommended replacement for binary encoding tasks.

Can I use these methods in Node.js?

Uint8Array.toBase64(), toHex(), fromBase64(), and fromHex() are Web API methods available in browsers. Node.js uses Buffer for binary encoding (Buffer.from().toString('base64') and Buffer.from(string, 'base64')). For cross-platform code, feature-detect the methods or use a conditional polyfill.

Do these methods support streaming or large arrays?

These methods operate on the entire Uint8Array in memory. For very large datasets (hundreds of MB), decoding into a single Uint8Array may be memory-intensive. They do not provide streaming interfaces. For large data, process chunks incrementally or use the Streams API where applicable.

What about Base64 URL-safe encoding?

toBase64() produces standard Base64 with + and / characters and padding. There is no built-in URL-safe variant. To get Base64url encoding, replace + with -, / with _, and strip trailing = characters after encoding. The fromBase64() method expects standard Base64 by default and does not parse the URL-safe variant directly.

Related tools

More html tools

Html

ARIA Live Region Generator

Generate accessible ARIA live region HTML snippets with role, aria-live, aria-atomic, and aria-relevant attributes. Includes optional JavaScript update function.

Open tool

Html

CSP Hash Generator

Generate CSP hash values for inline scripts and styles. Hash exact code content with SHA-256, SHA-384, or SHA-512 and get the matching CSP directive snippet.

Open tool

Also try

Also try

Seo

AI Crawler robots.txt Builder

Build a robots.txt policy for AI crawlers. Choose from open, selective, or strict presets and block specific AI training bots while allowing search engines.

Open tool