Source map VLQ decoder

Source maps let browser developer tools show your original TypeScript, JSX or unminified code instead of the bundled output. The heart of a source map is the mappings string, a compact sequence of Base64 VLQ (variable-length quantity) segments such as AAAA;AACA,SAAS. This decoder turns those segments into readable numbers and encodes numbers back into VLQ, which is useful for debugging build tools and broken source maps.

How to use it

1. Paste a segment or the full mappings string.
2. Read the decoded values for each segment.
3. Or enter numbers to encode them into VLQ.

Structure of the mappings string

• ; separates lines of the generated file.
• , separates segments within a line.
• Each segment has 1, 4 or 5 fields: generated column, source file index, original line, original column, and optionally a name index.
• All values are relative to the previous segment's value, which keeps numbers small.

How Base64 VLQ works

Each Base64 character carries 6 bits: 5 data bits and 1 continuation bit. The lowest bit of the first chunk is the sign. Small numbers fit in a single character: A is 0, C is 1, D is -1, E is 2.

Example

The segment AAgBC decodes to [0, 0, 16, 1]: generated column +0, source +0, original line +16, original column +1. The two characters gB form one value: g (32) has the continuation bit set and no data, then B (1) adds 1 shifted left by 5, giving 32, which after removing the sign bit is 16.

Debugging tips

• If breakpoints land on the wrong line, decode the mappings around it to see where the offset goes wrong.
• Remember the values are deltas; accumulate them to get absolute positions.
• The sources and names arrays in the map resolve the indices.