# jackocnr/intl-tel-input architecture

> Architecture diagram of the GitHub repository jackocnr/intl-tel-input, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/jackocnr/intl-tel-input
- Repository: https://github.com/jackocnr/intl-tel-input

## Overview

International Telephone Input is a phone-number entry library with vanilla JavaScript and Angular, React, Svelte, and Vue integrations. Users choose a country and enter a number; the library supports formatting, E.164 output, and validation. The core tree separates UI, country data, formatting, and utility functions, while framework packages expose the component in their respective ecosystems. The site also includes a configurable live playground. The tree and README establish these capabilities, but sampled source is limited, so uncertain internal call paths are not shown.

Main entry points: [`site/src/playground/js/modules/itiController.ts`](https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/js/modules/itiController.ts) (Playground controller), [`packages/core/src/js/intlTelInput.ts`](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/intlTelInput.ts) (Core entry), [`packages/angular/src/IntlTelInput.ts`](https://github.com/jackocnr/intl-tel-input/blob/master/packages/angular/src/IntlTelInput.ts) (Angular component), [`packages/react/src/IntlTelInput.tsx`](https://github.com/jackocnr/intl-tel-input/blob/master/packages/react/src/IntlTelInput.tsx) (React component)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_core["Core library"]
  node_core_entry["Core entry<br/>[intlTelInput.ts]"]
  node_ui["Input and dropdown UI<br/>[ui.ts]"]
  node_options["Options and defaults<br/>[options.ts]"]
  node_country_search["Country search<br/>[countrySearch.ts]"]
  node_country_data["Country data<br/>[data.ts]"]
  node_format["Number formatting<br/>[formatting.ts]"]
  node_caret["Caret handling<br/>[caret.ts]"]
  node_utils["Formatting and validation utilities<br/>[utils.js]"]
  node_numerals["Numeral conversion<br/>[numerals.ts]"]
end

subgraph group_frameworks["Framework adapters"]
  node_angular["Angular component<br/>[IntlTelInput.ts]"]
  node_react["React component<br/>[IntlTelInput.tsx]"]
  node_svelte["Svelte component"]
  node_vue["Vue component<br/>[IntlTelInput.vue]"]
end

subgraph group_site["Site playground"]
  node_playground["Playground controller<br/>[itiController.ts]"]
  node_locale["Locale selection<br/>[locale.ts]"]
  node_country_lookup["Initial country lookup"]
end

node_user(("Application user"))
node_vanilla["Vanilla API"]

node_user -->|"enters number"| node_vanilla
node_vanilla -->|"initializes"| node_core_entry
node_user -->|"enters number"| node_angular
node_user -->|"enters number"| node_react
node_user -->|"enters number"| node_svelte
node_user -->|"enters number"| node_vue
node_playground -->|"initializes"| node_core_entry
node_playground -->|"resolves locale"| node_locale
node_playground -->|"sets lookup"| node_country_lookup

click node_core_entry "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/intlTelInput.ts"
click node_ui "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/ui.ts"
click node_options "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/options.ts"
click node_country_search "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/countrySearch.ts"
click node_country_data "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/data.ts"
click node_format "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/format/formatting.ts"
click node_caret "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/format/caret.ts"
click node_utils "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/utils.js"
click node_numerals "https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/numerals.ts"
click node_angular "https://github.com/jackocnr/intl-tel-input/blob/master/packages/angular/src/IntlTelInput.ts"
click node_react "https://github.com/jackocnr/intl-tel-input/blob/master/packages/react/src/IntlTelInput.tsx"
click node_svelte "https://github.com/jackocnr/intl-tel-input/blob/master/packages/svelte/src/IntlTelInput.svelte"
click node_vue "https://github.com/jackocnr/intl-tel-input/blob/master/packages/vue/src/IntlTelInput.vue"
click node_playground "https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/js/modules/itiController.ts"
click node_locale "https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/js/modules/locale.ts"
click node_country_lookup "https://github.com/jackocnr/intl-tel-input/blob/master/site/src/js/initialCountryLookup.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_core_entry,node_ui,node_options,node_country_search,node_country_data,node_format,node_caret,node_utils,node_numerals,node_user toneBlue
class node_angular,node_react,node_svelte,node_vue toneAmber
class node_playground,node_locale,node_country_lookup,node_vanilla toneMint
```

## Components

### Core library

- [Core entry](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/intlTelInput.ts): `packages/core/src/js/intlTelInput.ts`
- [Input and dropdown UI](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/ui.ts): `packages/core/src/js/core/ui.ts`
- [Options and defaults](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/options.ts): `packages/core/src/js/core/options.ts`
- [Country search](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/countrySearch.ts): `packages/core/src/js/core/countrySearch.ts`
- [Country data](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/data.ts): `packages/core/src/js/data.ts`
- [Number formatting](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/format/formatting.ts): `packages/core/src/js/format/formatting.ts`
- [Caret handling](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/format/caret.ts): `packages/core/src/js/format/caret.ts`
- [Formatting and validation utilities](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/utils.js): `packages/core/src/js/utils.js`
- [Numeral conversion](https://github.com/jackocnr/intl-tel-input/blob/master/packages/core/src/js/core/numerals.ts): `packages/core/src/js/core/numerals.ts`

### Framework adapters

- [Angular component](https://github.com/jackocnr/intl-tel-input/blob/master/packages/angular/src/IntlTelInput.ts): `packages/angular/src/IntlTelInput.ts`
- [React component](https://github.com/jackocnr/intl-tel-input/blob/master/packages/react/src/IntlTelInput.tsx): `packages/react/src/IntlTelInput.tsx`
- [Svelte component](https://github.com/jackocnr/intl-tel-input/blob/master/packages/svelte/src/IntlTelInput.svelte): `packages/svelte/src/IntlTelInput.svelte`
- [Vue component](https://github.com/jackocnr/intl-tel-input/blob/master/packages/vue/src/IntlTelInput.vue): `packages/vue/src/IntlTelInput.vue`

### Site playground

- [Playground controller](https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/js/modules/itiController.ts): `site/src/playground/js/modules/itiController.ts`
- [Locale selection](https://github.com/jackocnr/intl-tel-input/blob/master/site/src/playground/js/modules/locale.ts): `site/src/playground/js/modules/locale.ts`
- [Initial country lookup](https://github.com/jackocnr/intl-tel-input/blob/master/site/src/js/initialCountryLookup.ts): `site/src/js/initialCountryLookup.ts`

### Other components

- **Application user**
- **Vanilla API**

## Connections

- Application user → Vanilla API: enters number
- Vanilla API → Core entry: initializes
- Application user → Angular component: enters number
- Application user → React component: enters number
- Application user → Svelte component: enters number
- Application user → Vue component: enters number
- Playground controller → Core entry: initializes
- Playground controller → Locale selection: resolves locale
- Playground controller → Initial country lookup: sets lookup