Sprachmodelle wie Claude verarbeiten Text nicht Wort für Wort, sondern in sogenannten Tokens – Zeichengruppen, die oft Wörtern entsprechen, aber manchmal auch nur Wortteilen oder einzelnen Zeichen. Dieses Tool macht das sichtbar: Text eingeben, und du siehst live, wie der Text zerlegt wird – inklusive Kostenschätzung je Claude-Modell.

.ct-wrap{font-family:-apple-system,BlinkMacSystemFont,’Segoe UI‘,Roboto,sans-serif;color:#1c1917;max-width:780px;margin:0 auto} .ct-wrap *{box-sizing:border-box} .ct-card{background:#fff;border:1px solid #e4ddd5;border-radius:12px;padding:20px;margin-bottom:14px} .ct-input-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;flex-wrap:wrap;gap:8px} .ct-label{font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:#78716c} .ct-presets{display:flex;gap:6px;flex-wrap:wrap} .ct-pbtn{font-size:.75rem;padding:3px 10px;border:1px solid #e4ddd5;border-radius:20px;background:#f9f7f4;color:#78716c;cursor:pointer;transition:all .15s} .ct-pbtn:hover{background:#f5e8df;border-color:#c85c1a;color:#c85c1a} .ct-ta{width:100%;min-height:120px;border:1px solid #e4ddd5;border-radius:8px;padding:12px;font-size:.95rem;line-height:1.65;resize:vertical;font-family:inherit;color:#1c1917;background:#f9f7f4;outline:none;transition:border-color .15s} .ct-ta:focus{border-color:#c85c1a} .ct-clr{margin-top:8px;font-size:.78rem;color:#78716c;cursor:pointer;background:none;border:none;padding:0} .ct-clr:hover{color:#1c1917} .ct-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} @media(max-width:480px){.ct-grid{grid-template-columns:repeat(2,1fr)}} .ct-stat{text-align:center;padding:12px 8px;background:#f9f7f4;border-radius:8px} .ct-sv{font-size:1.55rem;font-weight:700;color:#c85c1a;font-variant-numeric:tabular-nums} .ct-sl{font-size:.72rem;color:#78716c;text-transform:uppercase;letter-spacing:.06em;margin-top:3px} .ct-cost-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap} .ct-sel{padding:7px 12px;border:1px solid #e4ddd5;border-radius:8px;font-size:.88rem;background:#f9f7f4;color:#1c1917;cursor:pointer;outline:none} .ct-sel:focus{border-color:#c85c1a} .ct-cd{font-size:.92rem;color:#78716c} .ct-cd strong{color:#c85c1a} .ct-note{font-size:.74rem;color:#78716c;margin-top:6px} .ct-note a{color:#c85c1a} .ct-viz{font-family:’SFMono-Regular‘,’Consolas‘,’Liberation Mono‘,monospace;font-size:.88rem;line-height:2.2;word-wrap:break-word;white-space:pre-wrap;min-height:48px} .ct-tok{border-radius:4px;cursor:default;padding:2px 0;position:relative} .ct-tok:hover::after{content:attr(data-id);position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);background:#1c1917;color:#fff;font-size:.68rem;padding:2px 6px;border-radius:4px;white-space:nowrap;z-index:10;pointer-events:none} .tc0{background:#fde8e4}.tc1{background:#dbeafe}.tc2{background:#d1fae5}.tc3{background:#fef9c3}.tc4{background:#ede9fe}.tc5{background:#fce7f3}.tc6{background:#cffafe}.tc7{background:#ffedd5} .ct-status{color:#78716c;font-style:italic;font-size:.9rem} .ct-err{color:#dc2626;font-size:.9rem} .ct-footer{text-align:center;font-size:.76rem;color:#78716c;margin-top:8px} .ct-footer a{color:#c85c1a} const PRICES={haiku:.80/1e6,sonnet:3/1e6,opus:15/1e6}; const PRESETS={ en:“The quick brown fox jumps over the lazy dog. Language models process text by splitting it into tokens — chunks of characters that are often whole words but sometimes just parts of words.“, de:“Tokenisierung ist der erste Schritt bei der Verarbeitung natürlicher Sprache. Das Modell zerlegt Text in Teilwörter, sogenannte Tokens. Deutschsprachige Texte benötigen oft mehr Tokens als englische.“, code:“function fibonacci(n) {\n if (n <= 1) return n;\n return fibonacci(n – 1) + fibonacci(n – 2);\n}\nconsole.log(fibonacci(10)); // 55", numbers:"π ≈ 3.14159265358979\n2024, 2025, 2026\n$1,234,567.89\n0xFF, 0b10110100" }; let enc,dec,ready=false; async function init(){ try{ const m=await import("https://esm.sh/gpt-tokenizer@2&quot;); enc=m.encode;dec=m.decode;ready=true; document.getElementById("ct-viz").innerHTML='Text oben eingeben…‚; setPreset(„de“); }catch(e){ document.getElementById(„ct-viz“).innerHTML=‘⚠ Tokenizer konnte nicht geladen werden. Bitte Internetverbindung prüfen.‚; } } function run(text){ if(!ready)return; const ids=[„ct-tok“,“ct-chr“,“ct-wrd“,“ct-rat“]; if(!text){ids.forEach(i=>document.getElementById(i).textContent=“—“);document.getElementById(„ct-cost“).innerHTML=“—“;document.getElementById(„ct-viz“).innerHTML=‘Text oben eingeben…‚;return;} const tokens=enc(text); const nc=text.length,nw=text.trim()?text.trim().split(/\s+/).length:0,r=nc/tokens.length; document.getElementById(„ct-tok“).textContent=tokens.length.toLocaleString(„de“); document.getElementById(„ct-chr“).textContent=nc.toLocaleString(„de“); document.getElementById(„ct-wrd“).textContent=nw.toLocaleString(„de“); document.getElementById(„ct-rat“).textContent=r.toFixed(1); const price=PRICES[document.getElementById(„ct-model“).value]; const cost=tokens.length*price; const cs=cost<.001?"$"+cost.toFixed(6):cost<.01?"$"+cost.toFixed(5):"$"+cost.toFixed(4); document.getElementById("ct-cost").innerHTML="„+cs+“ für „+tokens.length.toLocaleString(„de“)+“ Tokens“; const parts=tokens.map((id,i)=>{let s;try{s=dec([id]);}catch{s=“?“;} const d=s.replace(/&/g,“&“).replace(//g,“>“).replace(/\n/g,“↵\n“); return ‚‚+(d||“ „)+“„;}); document.getElementById(„ct-viz“).innerHTML=parts.join(„“); } function setPreset(k){const ta=document.getElementById(„ct-input“);ta.value=PRESETS[k]||““;run(ta.value);} let timer; document.getElementById(„ct-input“).addEventListener(„input“,e=>{clearTimeout(timer);timer=setTimeout(()=>run(e.target.value),120);}); document.getElementById(„ct-model“).addEventListener(„change“,()=>run(document.getElementById(„ct-input“).value)); document.getElementById(„ct-clr“).addEventListener(„click“,()=>{document.getElementById(„ct-input“).value=““;run(„“);}); document.querySelectorAll(„.ct-pbtn“).forEach(b=>b.addEventListener(„click“,()=>setPreset(b.dataset.preset))); init();