# cloudflare/templates architecture

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

- Interactive diagram: https://gitdiagram.com/cloudflare/templates
- Repository: https://github.com/cloudflare/templates

## Overview

This repository is a collection of Cloudflare Workers starter templates, rather than one deployed application. Each template demonstrates a distinct user-to-result workflow: for example, internal-site administration and deployment, tenant website hosting, AI-brand visibility reporting, and workflow execution with live progress. The graph highlights those documented examples plus the MySQL/Postgres data-dashboard pattern. Connections are limited to calls shown in excerpts or module relationships listed in the SOURCE INDEX; many other templates are present in the tree but are not mapped here because their runtime behavior was not sampled.

Main entry points: [`internal-sites-template/src/index.ts`](https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/index.ts) (Site admin), [`workers-for-platforms-template/src/index.ts`](https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/index.ts) (Tenant platform), [`mysql-hyperdrive-template/public/js/app.js`](https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/app.js) (MySQL dashboard), [`postgres-hyperdrive-template/public/js/app.js`](https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/app.js) (Postgres dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_sites["Site hosting"]
  node_admin["Site admin<br/>[index.ts]"]
  node_access["Identity access<br/>[access.ts]"]
  node_site_db[("Site database<br/>[db.ts]")]
  node_site_dispatch["Site dispatch<br/>[resource.ts]"]
  node_site_ui["Admin rendering<br/>[ui.ts]"]
  node_platform["Tenant platform<br/>[index.ts]"]
  node_platform_db[("Project database<br/>[db.ts]")]
  node_platform_dispatch["Script dispatch<br/>[resource.ts]"]
  node_platform_router["Database router<br/>[router.ts]"]
  node_platform_render["Page rendering<br/>[render.ts]"]
end

subgraph group_visibility["AI visibility"]
  node_brand_api["Visibility API<br/>[api.ts]"]
  node_brand_app["Worker entry<br/>[app.ts]"]
  node_brand_queue["Analysis queue<br/>[queue.ts]"]
  node_brand_config["Visibility config<br/>[config.ts]"]
end

subgraph group_data["Data dashboards"]
  node_mysql_dashboard["MySQL dashboard<br/>[app.js]"]
  node_mysql_api["MySQL API client<br/>[api.js]"]
  node_mysql_tables["MySQL tables<br/>[tables.js]"]
  node_mysql_ui["MySQL UI helpers<br/>[ui.js]"]
  node_mysql_format["MySQL formatting<br/>[formatters.js]"]
  node_postgres_dashboard["Postgres dashboard<br/>[app.js]"]
  node_postgres_api["Postgres API client<br/>[api.js]"]
  node_postgres_tables["Postgres tables<br/>[tables.js]"]
  node_postgres_ui["Postgres UI helpers<br/>[ui.js]"]
  node_postgres_format["Postgres formatting<br/>[formatters.js]"]
end

subgraph group_workflow["Workflow demo"]
  node_workflow_app["Workflow interface<br/>[App.tsx]"]
  node_workflow_diagram["Step diagram"]
  node_workflow_code["Code display<br/>[CodeDisplay.tsx]"]
  node_workflow_ws["Progress hook"]
end

node_user(("Template user"))

node_admin -->|"authenticates"| node_access
node_admin -->|"reads and writes"| node_site_db
node_admin -->|"deploys sites"| node_site_dispatch
node_admin -->|"renders admin"| node_site_ui
node_platform -->|"manages projects"| node_platform_db
node_platform -->|"dispatches scripts"| node_platform_dispatch
node_platform -->|"uses middleware"| node_platform_router
node_platform -->|"renders pages"| node_platform_render
node_brand_app -->|"routes requests"| node_brand_api
node_brand_app -->|"registers queue"| node_brand_queue
node_brand_api -->|"uses config"| node_brand_config
node_brand_queue -->|"uses config"| node_brand_config
node_user -.->|"uses dashboard"| node_mysql_dashboard
node_mysql_dashboard -->|"fetches data"| node_mysql_api
node_mysql_dashboard -->|"renders tables"| node_mysql_tables
node_mysql_dashboard -->|"sets loading"| node_mysql_ui
node_mysql_tables -->|"formats values"| node_mysql_format
node_mysql_tables -->|"uses helpers"| node_mysql_ui
node_user -.->|"uses dashboard"| node_postgres_dashboard
node_postgres_dashboard -->|"fetches data"| node_postgres_api
node_postgres_dashboard -->|"renders tables"| node_postgres_tables
node_postgres_dashboard -->|"sets loading"| node_postgres_ui
node_postgres_tables -->|"formats values"| node_postgres_format
node_postgres_tables -->|"uses helpers"| node_postgres_ui
node_workflow_app -->|"renders steps"| node_workflow_diagram
node_workflow_app -->|"renders code"| node_workflow_code
node_workflow_app -->|"tracks progress"| node_workflow_ws
node_user -.->|"starts workflow"| node_workflow_app

click node_admin "https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/index.ts"
click node_access "https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/access.ts"
click node_site_db "https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/db.ts"
click node_site_dispatch "https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/resource.ts"
click node_site_ui "https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/ui.ts"
click node_platform "https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/index.ts"
click node_platform_db "https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/db.ts"
click node_platform_dispatch "https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/resource.ts"
click node_platform_router "https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/router.ts"
click node_platform_render "https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/render.ts"
click node_brand_api "https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/workers/api.ts"
click node_brand_app "https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/workers/app.ts"
click node_brand_queue "https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/workers/queue.ts"
click node_brand_config "https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/src/config.ts"
click node_mysql_dashboard "https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/app.js"
click node_mysql_api "https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/services/api.js"
click node_mysql_tables "https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/components/tables.js"
click node_mysql_ui "https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/components/ui.js"
click node_mysql_format "https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/utils/formatters.js"
click node_postgres_dashboard "https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/app.js"
click node_postgres_api "https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/services/api.js"
click node_postgres_tables "https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/components/tables.js"
click node_postgres_ui "https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/components/ui.js"
click node_postgres_format "https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/utils/formatters.js"
click node_workflow_app "https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/App.tsx"
click node_workflow_diagram "https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/components/WorkflowDiagram.tsx"
click node_workflow_code "https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/components/CodeDisplay.tsx"
click node_workflow_ws "https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/hooks/useWorkflowWebSocket.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_admin,node_access,node_site_db,node_site_dispatch,node_site_ui,node_platform,node_platform_db,node_platform_dispatch,node_platform_router,node_platform_render,node_user toneBlue
class node_brand_api,node_brand_app,node_brand_queue,node_brand_config toneAmber
class node_mysql_dashboard,node_mysql_api,node_mysql_tables,node_mysql_ui,node_mysql_format,node_postgres_dashboard,node_postgres_api,node_postgres_tables,node_postgres_ui,node_postgres_format toneMint
class node_workflow_app,node_workflow_diagram,node_workflow_code,node_workflow_ws toneRose
```

## Components

### Site hosting

- [Site admin](https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/index.ts): `internal-sites-template/src/index.ts`
- [Identity access](https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/access.ts): `internal-sites-template/src/access.ts`
- [Site database](https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/db.ts): `internal-sites-template/src/db.ts`
- [Site dispatch](https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/resource.ts): `internal-sites-template/src/resource.ts`
- [Admin rendering](https://github.com/cloudflare/templates/blob/main/internal-sites-template/src/ui.ts): `internal-sites-template/src/ui.ts`
- [Tenant platform](https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/index.ts): `workers-for-platforms-template/src/index.ts`
- [Project database](https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/db.ts): `workers-for-platforms-template/src/db.ts`
- [Script dispatch](https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/resource.ts): `workers-for-platforms-template/src/resource.ts`
- [Database router](https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/router.ts): `workers-for-platforms-template/src/router.ts`
- [Page rendering](https://github.com/cloudflare/templates/blob/main/workers-for-platforms-template/src/render.ts): `workers-for-platforms-template/src/render.ts`

### AI visibility

- [Visibility API](https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/workers/api.ts): `ai-brand-visibility-template/workers/api.ts`
- [Worker entry](https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/workers/app.ts): `ai-brand-visibility-template/workers/app.ts`
- [Analysis queue](https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/workers/queue.ts): `ai-brand-visibility-template/workers/queue.ts`
- [Visibility config](https://github.com/cloudflare/templates/blob/main/ai-brand-visibility-template/src/config.ts): `ai-brand-visibility-template/src/config.ts`

### Data dashboards

- [MySQL dashboard](https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/app.js): `mysql-hyperdrive-template/public/js/app.js`
- [MySQL API client](https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/services/api.js): `mysql-hyperdrive-template/public/js/services/api.js`
- [MySQL tables](https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/components/tables.js): `mysql-hyperdrive-template/public/js/components/tables.js`
- [MySQL UI helpers](https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/components/ui.js): `mysql-hyperdrive-template/public/js/components/ui.js`
- [MySQL formatting](https://github.com/cloudflare/templates/blob/main/mysql-hyperdrive-template/public/js/utils/formatters.js): `mysql-hyperdrive-template/public/js/utils/formatters.js`
- [Postgres dashboard](https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/app.js): `postgres-hyperdrive-template/public/js/app.js`
- [Postgres API client](https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/services/api.js): `postgres-hyperdrive-template/public/js/services/api.js`
- [Postgres tables](https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/components/tables.js): `postgres-hyperdrive-template/public/js/components/tables.js`
- [Postgres UI helpers](https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/components/ui.js): `postgres-hyperdrive-template/public/js/components/ui.js`
- [Postgres formatting](https://github.com/cloudflare/templates/blob/main/postgres-hyperdrive-template/public/js/utils/formatters.js): `postgres-hyperdrive-template/public/js/utils/formatters.js`

### Workflow demo

- [Workflow interface](https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/App.tsx): `workflows-starter-template/src/App.tsx`
- [Step diagram](https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/components/WorkflowDiagram.tsx): `workflows-starter-template/src/components/WorkflowDiagram.tsx`
- [Code display](https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/components/CodeDisplay.tsx): `workflows-starter-template/src/components/CodeDisplay.tsx`
- [Progress hook](https://github.com/cloudflare/templates/blob/main/workflows-starter-template/src/hooks/useWorkflowWebSocket.ts): `workflows-starter-template/src/hooks/useWorkflowWebSocket.ts`

### Other components

- **Template user**

## Connections

- Site admin → Identity access: authenticates (evidence: `internal-sites-template/src/index.ts`)
- Site admin → Site database: reads and writes (evidence: `internal-sites-template/src/index.ts`)
- Site admin → Site dispatch: deploys sites (evidence: `internal-sites-template/src/index.ts`)
- Site admin → Admin rendering: renders admin (evidence: `internal-sites-template/src/index.ts`)
- Tenant platform → Project database: manages projects (evidence: `workers-for-platforms-template/src/index.ts`)
- Tenant platform → Script dispatch: dispatches scripts (evidence: `workers-for-platforms-template/src/index.ts`)
- Tenant platform → Database router: uses middleware (evidence: `workers-for-platforms-template/src/index.ts`)
- Tenant platform → Page rendering: renders pages (evidence: `workers-for-platforms-template/src/index.ts`)
- Worker entry → Visibility API: routes requests (evidence: `ai-brand-visibility-template/workers/app.ts`)
- Worker entry → Analysis queue: registers queue (evidence: `ai-brand-visibility-template/workers/app.ts`)
- Visibility API → Visibility config: uses config (evidence: `ai-brand-visibility-template/workers/api.ts`)
- Analysis queue → Visibility config: uses config (evidence: `ai-brand-visibility-template/workers/queue.ts`)
- Template user → MySQL dashboard: uses dashboard
- MySQL dashboard → MySQL API client: fetches data (evidence: `mysql-hyperdrive-template/public/js/app.js`)
- MySQL dashboard → MySQL tables: renders tables (evidence: `mysql-hyperdrive-template/public/js/app.js`)
- MySQL dashboard → MySQL UI helpers: sets loading (evidence: `mysql-hyperdrive-template/public/js/app.js`)
- MySQL tables → MySQL formatting: formats values (evidence: `mysql-hyperdrive-template/public/js/components/tables.js`)
- MySQL tables → MySQL UI helpers: uses helpers (evidence: `mysql-hyperdrive-template/public/js/components/tables.js`)
- Template user → Postgres dashboard: uses dashboard
- Postgres dashboard → Postgres API client: fetches data (evidence: `postgres-hyperdrive-template/public/js/app.js`)
- Postgres dashboard → Postgres tables: renders tables (evidence: `postgres-hyperdrive-template/public/js/app.js`)
- Postgres dashboard → Postgres UI helpers: sets loading (evidence: `postgres-hyperdrive-template/public/js/app.js`)
- Postgres tables → Postgres formatting: formats values (evidence: `postgres-hyperdrive-template/public/js/components/tables.js`)
- Postgres tables → Postgres UI helpers: uses helpers (evidence: `postgres-hyperdrive-template/public/js/components/tables.js`)
- Workflow interface → Step diagram: renders steps (evidence: `workflows-starter-template/src/App.tsx`)
- Workflow interface → Code display: renders code (evidence: `workflows-starter-template/src/App.tsx`)
- Workflow interface → Progress hook: tracks progress (evidence: `workflows-starter-template/src/App.tsx`)
- Template user → Workflow interface: starts workflow