How I built a browser-based Japanese name translator with vanilla JS (no backend)

Writing a foreign name in Japanese sounds simple until you try to do it correctly. Japanese isn't spelled letter-by-letter; it's built from morae, small sound units, and foreign names map to the closest katakana sounds. "Smith" becomes スミス (Su-mi-su), "Clark" becomes クラーク (Ku-rā-ku). I wanted a tool that does this instantly, in the browser, with no server round trip. Here's how it works.
The core idea: sounds, not letters
English has consonant clusters and standalone consonants that Japanese phonology doesn't allow every mora ends in a vowel (or "n"). So the converter's job is to:

Break the name into phonetic units, not letters
Map each unit to the nearest Japanese mora
Apply the katakana conventions Japan uses for foreign names

A tiny mapping, client-side
No API, no backend — just a lookup table and a few rules in the browser:
`js

`javascript
const romajiToKatakana = {
ka:"カ", ki:"キ", ku:"ク", ke:"ケ", ko:"コ",
sa:"サ", shi:"シ", su:"ス", se:"セ", so:"ソ",
// ...full syllabary
};

function nameToKatakana(name) {
const romaji = normalize(name); // L→R, V→B, etc.
return splitIntoMorae(romaji) // group into syllable units
.map(m => romajiToKatakana[m] ?? m) // map each mora
.join("");
}

Because it all runs client-side, nothing you type ever leaves your device — which matters when people convert their own names.
Why katakana (not kanji)
For non-Japanese names, katakana is the correct, culturally appropriate script — it's what Japan uses for foreign names on passports and official documents. Kanji "name" conversions are ateji (chosen for sound, not meaning), so they're fun but not a real Japanese name. The tool shows all four scripts and flags katakana as the authentic one.
Try it
Live version: My Japanese Name Translator type any English name and see it in katakana, hiragana, kanji, and romaji with pronunciation.
I'm Daniel Sato, a Japanese linguist and the developer behind it — happy to talk phonetics or implementation in the comments.