Arabic Developer Kit (RTL Snippets)

A complete developer utility hub containing copy-paste TypeScript code snippets for Arabic text normalization, URL slug generation, Next.js App Router RTL layout setup, and BiDi text isolation.

Arabic Developer Kit

TypeScript & React Utilities for Next.js RTL Apps

Copy production-tested functions or test them in the live playground below.

Read RTL Architecture Guide →

1. Arabic Text Normalizer (TypeScript)

Strips diacritics (tashkeel), Tatweel elongation, unifies Alef/Ya variants, and converts digits.

export function normalizeArabicText(text: string): string {
  return text
    // Remove diacritics (fatha, damma, kasra, sukun, tanwin)
    .replace(/[\u064B-\u0652]/g, "")
    // Strip Tatweel (elongation character ـ)
    .replace(/\u0640/g, "")
    // Normalize Alef variants (أ, إ, آ -> ا)
    .replace(/[أإآ]/g, "ا")
    // Normalize Alef Maqsura to Ya (ى -> ي)
    .replace(/ى/g, "ي")
    // Convert Arabic-Indic digits (٠١٢٣٤٥٦٧٨٩ -> 0123456789)
    .replace(/[٠-٩]/g, (d) => (d.charCodeAt(0) - 0x0660).toString());
}

⚡ Interactive Live Utility Playground

Test Input (Arabic Text)

Normalized Output

اهلا وسهلا بكم في مدينتي الحبيبة سنة 2026!

Generated URL Slug

/blog/أهلا-وسهلا-بكم-في-مدينتي-الحبيبة-سنة-٢٠٢٦

How to use

Select any utility code snippet tab (Arabic Normalizer, Arabic Slugify, Next.js RTL Root Layout, or BiDi Isolation).
Use the 1-click Copy Snippet button to paste the utility directly into your codebase.
Test the live utility playground using sample Arabic text to see instant transformations.

Understanding the output

The Arabic Developer Kit provides zero-dependency TypeScript functions and React components tailored for Next.js App Router applications handling Arabic text normalization, URL slug generation, and bidirectional (BiDi) layout mirroring.

Common issues & tips

•Always wrap user-submitted mixed Arabic and English strings in <bdi> or set dir="auto" to prevent trailing periods and numbers from jumping sides.
•When using localized URLs, ensure your web server and CDN preserve UTF-8 percent-encoding for Arabic slugs.

Frequently asked questions

Can I use these snippets in commercial projects?: Yes. All code snippets in the Arabic Developer Kit are zero-dependency, open-source, and free to use in any commercial or personal codebase.
Does this require any external NPM packages?: No. All utilities are written in pure TypeScript and native web standards with zero third-party dependencies.
Is any data uploaded to a server?: No. The live playground and code copy buttons run entirely locally in your browser.

Related tools

Arabic Text Normalizer

Standardize Arabic text — diacritics, letter variants, spacing and numerals.

Arabic Slug Generator

Generate URL-safe slugs from Arabic text — Arabic-preserving or transliterated.

Arabic Numeral Converter

Convert Arabic-Indic digits to Western digits and back without changing the surrounding text.

Arabic Search Normalization

Normalize Arabic queries and indexed text with identical rules, then test exact, phrase, or token matching.

Arabic Regex Patterns

Copy and test JavaScript regex patterns for Arabic words, text, diacritics, Tatweel, digits, and mixed content.

Arabic Form Validation

Test inclusive or Arabic-only validation for names, phone numbers, and Arabic text with copyable JavaScript.

RTL Email Preview

Preview Arabic email HTML and plain text at desktop and mobile widths with an email-safe starter template.

RTL Preview

Preview Arabic and other RTL text side-by-side against LTR at real widths.