How I Built a Base Converter That Handles Decimals

Table of Contents

• The Problem
• Meet the Tool
• Core Implementation
• Why Not Just Use Native APIs
• Edge Cases & Gotchas
• Performance Results
• Try It Yourself
• Wrapping Up

The Problem

I was debugging a LoRa module last month. The device sent hex 0x1A3F, but my logger needed decimal. The register bitmask needed binary. Four browser tabs later — an online converter (only 2/8/10/16), a calculator, a Python REPL, and Stack Overflow — I realized something was broken about how we do radix conversions.

Most online tools don't support decimals. Native parseInt silently truncates invalid chars. System calculators stop at base 16. There had to be a better way.

Meet the Tool

A clean, real-time radix converter that handles 2-36 bases, decimals, and dirty inputs — all in the browser, zero install.

Paste 0xFF6B35. It strips the prefix and shows results across all bases instantly. Type 3.14159. It converts the fractional part too.

![Main UI placeholder]

Key features:

• Single input, all 35 other bases update live
• Smart input filtering (handles 0x, 0b, _, spaces)
• One-click copy on every result card
• Click any card to flip it into input mode
• Mobile responsive

Core Implementation

Two functions, ~80 lines, zero dependencies.

Decimal to Any Radix

const CHAR_MAP = '0123456789abcdefghijklmnopqrstuvwxyz'

function decimalToRadix(decimal: number, radix: number): string {
  if (decimal === 0) return '0'
  if (isNaN(decimal) || !isFinite(decimal)) return '-'

  const isNegative = decimal < 0
  decimal = Math.abs(decimal)

  let intPart = Math.floor(decimal)
  let fracPart = decimal - intPart

  // Integer part: division-remainder
  let resultInt = intPart === 0 ? '0' : ''
  while (intPart > 0) {
    resultInt = CHAR_MAP[intPart % radix] + resultInt
    intPart = Math.floor(intPart / radix)
  }

  // Fractional part: multiply-and-truncate, max 8 digits
  let resultFrac = ''
  let precision = 8
  while (fracPart > 0 && precision > 0) {
    fracPart *= radix
    const digit = Math.floor(fracPart)
    resultFrac += CHAR_MAP[digit]
    fracPart -= digit
    precision--
  }

  const result = resultFrac ? `${resultInt}.${resultFrac}` : resultInt
  return isNegative ? '-' + result : result
}

Any Radix to Decimal

function radixToDecimal(value: string, radix: number): number | null {
  if (!value.trim()) return null
  value = value.toLowerCase().trim()

  const validChars = CHAR_MAP.substring(0, radix)
  let filtered = ''
  let hasDot = false

  for (const char of value) {
    if (char === '.' && !hasDot) {
      filtered += char
      hasDot = true
    } else if (validChars.includes(char)) {
      filtered += char
    }
  }

  if (!filtered || filtered === '.') return null
  filtered = filtered.replace(/^\./, '0.').replace(/\.$/, '')

  const [intStr, fracStr = ''] = filtered.split('.')
  let decimal = 0
  for (const char of intStr) {
    decimal = decimal * radix + CHAR_MAP.indexOf(char)
  }
  for (let i = 0; i < fracStr.length; i++) {
    decimal += CHAR_MAP.indexOf(fracStr[i]) / Math.pow(radix, i + 1)
  }

  return isNegative ? -decimal : decimal
}

Why Not Just Use Native APIs

Native APIs are fine for one-off scripts. For a tool where people copy results into production configs, deterministic behavior wins.

Edge Cases & Gotchas

Gotcha 1: Event bubbling on copy buttons

Result cards are clickable (switch input radix). Copy buttons inside them were accidentally triggering the card click.

Fix:

const handleCopy = useCallback((e: React.MouseEvent) => {
  e.stopPropagation()
  navigator.clipboard.writeText(value)
}, [value])

Gotcha 2: Fraction round-trip precision loss

0.1 (decimal) → binary 0.00011001 → decimal 0.09765625.

Not a bug. Some decimals are infinite in other bases (like 1/3 in decimal). The tool truncates at 8 digits. Don't use base conversion as a storage mechanism for fractions.

Gotcha 3: JavaScript number precision ceiling

Above Number.MAX_SAFE_INTEGER (~9e15), precision drops. This is a JS limitation, not a tool bug. For cryptographic-scale integers, use BigInt.

Performance Results

Tested on MacBook Pro M3, Chrome 126. 100 runs averaged.

All sub-millisecond. Instant for human perception.

Try It Yourself

Copy the two functions above into any TypeScript project. Zero dependencies.

Or try it live: geekformat.com/other/hexadecimal

Wrapping Up

Sometimes the "simple" features take the most thought. Every design choice here — from the 8-digit precision limit to stopPropagation on copy buttons — was a deliberate trade-off.

What's your go-to tool for radix conversions? Drop it below 👇