# aishervin/telebot architecture

> Architecture diagram of the GitHub repository aishervin/telebot, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-13). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/aishervin/telebot
- Repository: https://github.com/aishervin/telebot

## Overview

TELEbot is a browser-based Telegram Bot API studio: users browse/search methods, enter a token, build parameters in generated forms or nested-type builders, synchronize form state with raw JSON, and submit live calls for response inspection. The map separates exploration/state, payload construction, and request/response handling from schema/type logic. README documents hourly schema synchronization, but its implementation is not connected to the browser runtime here; sampled excerpts do not show all internal submission wiring.

Main entry points: [`src/App.vue`](https://github.com/aishervin/telebot/blob/main/src/App.vue) (Studio shell), [`src/components/ResultRail.vue`](https://github.com/aishervin/telebot/blob/main/src/components/ResultRail.vue) (Request and response), [`src/components/ParameterInput.vue`](https://github.com/aishervin/telebot/blob/main/src/components/ParameterInput.vue) (Parameter controls), [`src/components/TypeEditorModal.vue`](https://github.com/aishervin/telebot/blob/main/src/components/TypeEditorModal.vue) (Nested type builder)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_explore["Method exploration"]
  node_sidebar["Method browser<br/>[MethodSidebar.vue]"]
  node_notfound["Not-found suggestions<br/>[NotFoundView.vue]"]
  node_navigation["SPA navigation<br/>[navigation.ts]"]
end

subgraph group_payload["Payload building"]
  node_token["Bot token input<br/>[TokenBox.vue]"]
  node_form["Parameter form<br/>[ParameterForm.vue]"]
  node_input["Parameter controls<br/>[ParameterInput.vue]"]
  node_typeeditor["Nested type builder"]
  node_typefields["Type field editor"]
end

subgraph group_runtime["Studio runtime"]
  node_app["Studio shell<br/>[App.vue]"]
  node_studio["Studio state"]
  node_privacy["Privacy notice"]
  node_cookies["Notice persistence<br/>[cookies.ts]"]
  node_focus["Modal focus trap<br/>[useFocusTrap.ts]"]
end

subgraph group_schema["Schema and API"]
  node_typeutil["Type schema logic<br/>[typeSchema.ts]"]
  node_telegramutil["Telegram helpers<br/>[telegram.ts]"]
  node_schema_types["Schema model<br/>[schema.ts]"]
  node_schema_sync["Schema sync engine"]
  node_schema_file["Published API schema<br/>[bot-api.json]"]
end

subgraph group_feedback["Response and feedback"]
  node_results["Request and response<br/>[ResultRail.vue]"]
  node_jsonhighlight["JSON highlighting<br/>[jsonHighlight.ts]"]
  node_fullscreen["Fullscreen modal"]
  node_toast["Toast notices<br/>[ToastStack.vue]"]
end

node_developer(("Bot developer"))
node_telegram_api{{"Telegram Bot API"}}

node_developer -->|"uses workspace"| node_app
node_app -->|"creates state"| node_studio
node_app -->|"renders"| node_sidebar
node_app -->|"renders"| node_token
node_app -->|"renders"| node_form
node_app -->|"renders"| node_results
node_app -->|"renders"| node_toast
node_app -->|"renders"| node_privacy
node_sidebar -->|"intercepts links"| node_navigation
node_notfound -->|"intercepts links"| node_navigation
node_form -->|"renders fields"| node_input
node_input -->|"opens builder"| node_typeeditor
node_typeeditor -->|"renders editor"| node_typefields
node_typefields -->|"serializes types"| node_typeutil
node_typeeditor -->|"parses types"| node_typeutil
node_input -->|"infers controls"| node_telegramutil
node_input -->|"checks variants"| node_typeutil
node_studio -->|"parses payloads"| node_telegramutil
node_results -->|"formats JSON"| node_telegramutil
node_results -->|"highlights JSON"| node_jsonhighlight
node_results -->|"opens dialogs"| node_fullscreen
node_privacy -->|"persists choice"| node_cookies
node_privacy -->|"traps focus"| node_focus
node_fullscreen -->|"traps focus"| node_focus
node_studio -.->|"sends test calls"| node_telegram_api
node_telegram_api -.->|"returns response"| node_results
node_schema_sync -.->|"updates schema"| node_schema_file

click node_app "https://github.com/aishervin/telebot/blob/main/src/App.vue"
click node_studio "https://github.com/aishervin/telebot/blob/main/src/composables/useTelegramStudio.ts"
click node_sidebar "https://github.com/aishervin/telebot/blob/main/src/components/MethodSidebar.vue"
click node_notfound "https://github.com/aishervin/telebot/blob/main/src/components/NotFoundView.vue"
click node_navigation "https://github.com/aishervin/telebot/blob/main/src/lib/navigation.ts"
click node_token "https://github.com/aishervin/telebot/blob/main/src/components/TokenBox.vue"
click node_form "https://github.com/aishervin/telebot/blob/main/src/components/ParameterForm.vue"
click node_input "https://github.com/aishervin/telebot/blob/main/src/components/ParameterInput.vue"
click node_typeeditor "https://github.com/aishervin/telebot/blob/main/src/components/TypeEditorModal.vue"
click node_typefields "https://github.com/aishervin/telebot/blob/main/src/components/TypeFieldEditor.vue"
click node_typeutil "https://github.com/aishervin/telebot/blob/main/src/lib/typeSchema.ts"
click node_telegramutil "https://github.com/aishervin/telebot/blob/main/src/lib/telegram.ts"
click node_schema_types "https://github.com/aishervin/telebot/blob/main/src/types/schema.ts"
click node_results "https://github.com/aishervin/telebot/blob/main/src/components/ResultRail.vue"
click node_jsonhighlight "https://github.com/aishervin/telebot/blob/main/src/lib/jsonHighlight.ts"
click node_fullscreen "https://github.com/aishervin/telebot/blob/main/src/components/FullscreenModal.vue"
click node_toast "https://github.com/aishervin/telebot/blob/main/src/components/ToastStack.vue"
click node_privacy "https://github.com/aishervin/telebot/blob/main/src/components/PrivacyNoticeModal.vue"
click node_cookies "https://github.com/aishervin/telebot/blob/main/src/lib/cookies.ts"
click node_focus "https://github.com/aishervin/telebot/blob/main/src/composables/useFocusTrap.ts"
click node_schema_sync "https://github.com/aishervin/telebot/blob/main/scripts/update-telegram-schema.mjs"
click node_schema_file "https://github.com/aishervin/telebot/blob/main/public/schema/bot-api.json"

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_sidebar,node_notfound,node_navigation toneBlue
class node_token,node_form,node_input,node_typeeditor,node_typefields toneAmber
class node_app,node_studio,node_privacy,node_cookies,node_focus,node_telegram_api toneMint
class node_typeutil,node_telegramutil,node_schema_types,node_schema_sync,node_schema_file toneRose
class node_results,node_jsonhighlight,node_fullscreen,node_toast,node_developer toneIndigo
```

## Components

### Method exploration

- [Method browser](https://github.com/aishervin/telebot/blob/main/src/components/MethodSidebar.vue): `src/components/MethodSidebar.vue`
- [Not-found suggestions](https://github.com/aishervin/telebot/blob/main/src/components/NotFoundView.vue): `src/components/NotFoundView.vue`
- [SPA navigation](https://github.com/aishervin/telebot/blob/main/src/lib/navigation.ts): `src/lib/navigation.ts`

### Payload building

- [Bot token input](https://github.com/aishervin/telebot/blob/main/src/components/TokenBox.vue): `src/components/TokenBox.vue`
- [Parameter form](https://github.com/aishervin/telebot/blob/main/src/components/ParameterForm.vue): `src/components/ParameterForm.vue`
- [Parameter controls](https://github.com/aishervin/telebot/blob/main/src/components/ParameterInput.vue): `src/components/ParameterInput.vue`
- [Nested type builder](https://github.com/aishervin/telebot/blob/main/src/components/TypeEditorModal.vue): `src/components/TypeEditorModal.vue`
- [Type field editor](https://github.com/aishervin/telebot/blob/main/src/components/TypeFieldEditor.vue): `src/components/TypeFieldEditor.vue`

### Studio runtime

- [Studio shell](https://github.com/aishervin/telebot/blob/main/src/App.vue): `src/App.vue`
- [Studio state](https://github.com/aishervin/telebot/blob/main/src/composables/useTelegramStudio.ts): `src/composables/useTelegramStudio.ts`
- [Privacy notice](https://github.com/aishervin/telebot/blob/main/src/components/PrivacyNoticeModal.vue): `src/components/PrivacyNoticeModal.vue`
- [Notice persistence](https://github.com/aishervin/telebot/blob/main/src/lib/cookies.ts): `src/lib/cookies.ts`
- [Modal focus trap](https://github.com/aishervin/telebot/blob/main/src/composables/useFocusTrap.ts): `src/composables/useFocusTrap.ts`

### Schema and API

- [Type schema logic](https://github.com/aishervin/telebot/blob/main/src/lib/typeSchema.ts): `src/lib/typeSchema.ts`
- [Telegram helpers](https://github.com/aishervin/telebot/blob/main/src/lib/telegram.ts): `src/lib/telegram.ts`
- [Schema model](https://github.com/aishervin/telebot/blob/main/src/types/schema.ts): `src/types/schema.ts`
- [Schema sync engine](https://github.com/aishervin/telebot/blob/main/scripts/update-telegram-schema.mjs): `scripts/update-telegram-schema.mjs`
- [Published API schema](https://github.com/aishervin/telebot/blob/main/public/schema/bot-api.json): `public/schema/bot-api.json`

### Response and feedback

- [Request and response](https://github.com/aishervin/telebot/blob/main/src/components/ResultRail.vue): `src/components/ResultRail.vue`
- [JSON highlighting](https://github.com/aishervin/telebot/blob/main/src/lib/jsonHighlight.ts): `src/lib/jsonHighlight.ts`
- [Fullscreen modal](https://github.com/aishervin/telebot/blob/main/src/components/FullscreenModal.vue): `src/components/FullscreenModal.vue`
- [Toast notices](https://github.com/aishervin/telebot/blob/main/src/components/ToastStack.vue): `src/components/ToastStack.vue`

### Other components

- **Bot developer**
- **Telegram Bot API**

## Connections

- Bot developer → Studio shell: uses workspace (evidence: `README.md`)
- Studio shell → Studio state: creates state (evidence: `src/App.vue`)
- Studio shell → Method browser: renders (evidence: `src/App.vue`)
- Studio shell → Bot token input: renders (evidence: `src/App.vue`)
- Studio shell → Parameter form: renders (evidence: `src/App.vue`)
- Studio shell → Request and response: renders (evidence: `src/App.vue`)
- Studio shell → Toast notices: renders (evidence: `src/App.vue`)
- Studio shell → Privacy notice: renders (evidence: `src/App.vue`)
- Method browser → SPA navigation: intercepts links (evidence: `src/components/MethodSidebar.vue`)
- Not-found suggestions → SPA navigation: intercepts links (evidence: `src/components/NotFoundView.vue`)
- Parameter form → Parameter controls: renders fields (evidence: `src/components/ParameterForm.vue`)
- Parameter controls → Nested type builder: opens builder (evidence: `src/components/ParameterInput.vue`)
- Nested type builder → Type field editor: renders editor (evidence: `src/components/TypeEditorModal.vue`)
- Type field editor → Type schema logic: serializes types (evidence: `src/components/TypeFieldEditor.vue`)
- Nested type builder → Type schema logic: parses types (evidence: `src/components/TypeEditorModal.vue`)
- Parameter controls → Telegram helpers: infers controls (evidence: `src/components/ParameterInput.vue`)
- Parameter controls → Type schema logic: checks variants (evidence: `src/components/ParameterInput.vue`)
- Studio state → Telegram helpers: parses payloads (evidence: `src/composables/useTelegramStudio.ts`)
- Request and response → Telegram helpers: formats JSON (evidence: `src/components/ResultRail.vue`)
- Request and response → JSON highlighting: highlights JSON (evidence: `src/components/ResultRail.vue`)
- Request and response → Fullscreen modal: opens dialogs (evidence: `src/components/ResultRail.vue`)
- Privacy notice → Notice persistence: persists choice (evidence: `src/components/PrivacyNoticeModal.vue`)
- Privacy notice → Modal focus trap: traps focus (evidence: `src/components/PrivacyNoticeModal.vue`)
- Fullscreen modal → Modal focus trap: traps focus (evidence: `src/components/FullscreenModal.vue`)
- Studio state → Telegram Bot API: sends test calls
- Telegram Bot API → Request and response: returns response
- Schema sync engine → Published API schema: updates schema