IconVault logoIconVault
Sign in

Encoding API - Interactive Lab | IconVault

Explore TextEncoder and TextDecoder with UTF-8 byte visualization, multi-encoding decode and streaming demos. Free, runs in your browser.

All tools

Encoding API

TextEncoder/Decoder with byte visualization and streaming

5 of 5 free uses left

Chars

11

Bytes

18

Ratio

1.64

5 of 5 free uses left.

Byte colors

ASCII (1 byte)Lead byteContinuation

Byte visualization

48656C6C6F2C20E4B896E7958C20F09F8C8D

Per-character breakdown

CharCode pointUTF-8 bytes
HU+004848
eU+006565
lU+006C6C
lU+006C6C
oU+006F6F
,U+002C2C
␣U+002020
δΈ–U+4E16E4 B8 96
η•ŒU+754CE7 95 8C
␣U+002020
🌍U+1F30DF0 9F 8C 8D

Decode hex with any encoding

Streaming decode demo

Split the bytes into 1-byte chunks. Without { stream: true } a multibyte character cut in half decodes as οΏ½; with streaming the decoder buffers the partial bytes.

Chunk size1 byte

Naive: first chunk decoded alone

H

Streaming: progressive output

(press run)

const bytes = new TextEncoder().encode(text);
const decoder = new TextDecoder("utf-8", { stream: true });

for (const chunk of chunks) {
  // stream: true keeps incomplete multibyte chars buffered
  output += decoder.decode(chunk, { stream: true });
}
output += decoder.decode(); // flush

About this tool

IconVault's Encoding API playground makes TextEncoder and TextDecoder visible. Type any text and see its exact UTF-8 bytes as a color-coded hex grid, inspect the per-character breakdown of code points and byte sequences, then decode hex back to text with any encoding label from utf-8 and utf-16 to windows-1252 and shift_jis. It is free and runs fully in your browser.

The streaming demo shows why { stream: true } matters: split bytes into tiny chunks and watch a naive decode produce replacement characters while the streaming decoder buffers partial multibyte sequences correctly. Every concept ships with copyable code, so you can paste the pattern straight into your fetch handlers, WebSocket code or file parsers.

Frequently asked questions

Popular searches

textencodertextdecoderjavascript textencoderjavascript textdecoderencoding api javascriptutf-8 bytes javascriptstring to bytes jsbytes to string jsuint8array to stringstring to uint8arraytextencoder encode exampletextdecoder decode exampletextdecoder stream truestreaming text decodedecode chunks utf-8multibyte character split chunkreplacement character utf-8textdecoder fatalwhatwg encoding labelstextdecoder windows-1252textdecoder shift_jistextdecoder utf-16ledecode hex to string jshex to utf-8 javascriptutf-8 byte visualizationutf-8 hex gridcode point vs byteshow many bytes per character utf-8utf-8 lead byte continuation byteemoji utf-8 byteschinese characters utf-8 bytesencodeinto vs encodetextencoder encodeinto exampledecode streaming fetchreadable stream text decoderesponse body decode streamwebsocket binary text decodefile reader encoding jscharacter encoding javascriptlearn textencoderencoding api tutorialencoding api playgroundinteractive encoding labutf-8 explainedutf-8 encoding tableunicode code point javascriptstring codepointatget utf-8 bytes of stringconvert string to hex jshex dump javascriptbyte length vs string lengthstring length emoji problemspread string char count vs bytes

More tools

Algorithm Visualizer

Watch sorting and searching animate step by step

Alt Text Helper

Write better image alt text with live feedback

ARIA Reference

Searchable ARIA roles and attributes guide

Array Visualizer

Step through map, filter, reduce like a debugger

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools β†’