# syncfusion/blazor-samples architecture

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

- Interactive diagram: https://gitdiagram.com/syncfusion/blazor-samples
- Repository: https://github.com/syncfusion/blazor-samples

## Overview

#### Purpose and topology
This is Syncfusion’s Blazor component-demo repository: a large shared catalog of interactive samples delivered in two hosting models. `Common` contains reusable sample pages, shell UI, models, assets, services, and localization; thin Server and WASM hosts compose it for .NET 8, 9, and 10.

#### Application entry points and runtimes
- **Blazor Server host:** ASP.NET Core startup and root/router are `Blazor-Server-Demos/Program.cs`, `Blazor-Server-Demos/Components/App.razor`, and `Blazor-Server-Demos/Components/Routes.razor`. Select the target runtime through `Blazor-Server-Demos/Blazor_Server_Demos_NET8.csproj` (parallel NET9/NET10 projects exist).
- **Blazor WebAssembly host:** the server-side host is `Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs`; browser client bootstraps from `Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Program.cs`. Root UI is `Blazor-WASM-Demos/Blazor_WASM_Demos/Components/App.razor`, with client routing in `Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Routes.razor`.
- Material deployment boundaries are ASP.NET Core server rendering/interactive Server versus a WASM client application hosted by the WASM server project.

#### Shared demo shell and navigation
`Common/Shared/MainLayout.razor` is the shared application frame. It composes the header, left navigation, and sample/right-pane experience through components such as `Common/Shared/Header/HeaderComponent.razor`, `Common/Shared/LeftPane/LeftPaneComponent.razor`, and `Common/Shared/RightPane/RightPaneComponent.razor`.
Navigation and sample discovery are metadata-driven: category-level `SampleList.cs` files (for example `Common/Pages/Charts/SampleList.cs`) define catalog entries, while `Common/Shared/Common/SampleService.cs` and `Common/Shared/Common/SampleMetaData.cs` support selection/rendering behavior. Route selection resolves to individual Razor demo pages within `Common/Pages`.

#### Sample implementation catalog
The core payload is independently executable Razor demonstrations grouped by Syncfusion control domain. Representative architecture-defining groups are:
- Data management: `Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor`, `Common/Pages/PivotView/PivotTable/DefaultFunctionalities.razor`, `Common/Pages/TreeGrid/TreeGrid/DefaultFunctionalities.razor`.
- Visualization and diagrams: `Common/Pages/Charts/Chart/DefaultFunctionalities.razor`, `Common/Pages/Diagram/Diagram/FlowChart.razor`, `Common/Pages/Maps/Maps/DefaultFunctionalities.razor`.
- Scheduling: `Common/Pages/GanttChart/DefaultFunctionalities.razor`, `Common/Pages/Schedule/Scheduler/Default.razor`.
Pages bind local model/data classes or remote endpoints, configure Syncfusion Blazor controls, and may include code-behind/CSS where richer interaction is needed.

#### Data, HTTP, and file-service boundary
Most demos use embedded typed data and static JSON/media, including `Common/Pages/Grid/OrderData.cs`, `Common/wwwroot/data/chart/financial-data.json`, and `Blazor-Server-Demos/Model/HistoricalData2025.json`. Server-only HTTP endpoints/controllers reside in `Common/Controllers/TreeGridController.cs`, `Common/Controllers/CultureController.cs`, and `Common/Controllers/UserTokensController.cs`.
File-management scenarios are separated behind service implementations: `Common/Service/FileManagerService.cs` and `Common/Pages/Navigations/FileManagerService.cs`; Server-hosted sample files are under `Blazor-Server-Demos/wwwroot/Files`.

#### AI integrations and external services
AI-oriented samples are first-class feature areas, spanning assistive UI, semantic/data operations, diagrams, and planning. Service boundaries include `Common/Service/AzureAIService.cs`, `Common/Pages/InteractiveChat/AzureOpenAIService.cs`, and `Common/Pages/AISamples/AIAssistView/AIService.cs`; these indicate Azure AI/Azure OpenAI-backed scenarios, with request contracts in `Common/Model/APIServiceModel/RequestModel.cs`. Token handling is isolated via `Common/Service/UserTokenService.cs` and its controller rather than embedded in sample components.

#### Static assets, localization, and browser interop
Shared static content is packaged in `Common/wwwroot`: control-specific styles, data, imagery, and JavaScript interop, such as `Common/wwwroot/scripts/common/index.js`, `Common/wwwroot/scripts/ai-assistview.js`, and `Common/wwwroot/styles/common/demos.css`. Localization resources and the Syncfusion localization adapter are `Common/Resources/SfResources.resx` and `Common/Shared/Common/SyncfusionLocalizer.cs`. Each host contributes runtime-specific static modules under its own `wwwroot`.

Main entry points: [`Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor`](https://github.com/syncfusion/blazor-samples/blob/master/Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor) (Control demo pages), [`Common/Shared/MainLayout.razor`](https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/MainLayout.razor) (Shared demo shell), [`Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs`](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs) (WASM host startup), [`Common/Shared/LeftPane/LeftPaneComponent.razor`](https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/LeftPane/LeftPaneComponent.razor) (Header and navigation)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_shared["Shared Common"]
  node_layout["Shared demo shell<br/>layout<br/>[MainLayout.razor]"]
  node_navigation["Header and navigation<br/>shell components"]
  node_catalog["Sample catalog metadata<br/>discovery service<br/>[SampleList.cs]"]
  node_sample_service["Sample selection<br/>sample service<br/>[SampleService.cs]"]
  node_demo_pages["Control demo pages<br/>Razor sample catalog"]
  node_data_assets[("Embedded data and media<br/>static data")]
  node_static_assets["Shared browser assets<br/>styles and JS interop<br/>[index.js]"]
  node_localization["Localization adapter<br/>resource localization"]
end

subgraph group_server["Blazor Server"]
  node_server_program["Server startup<br/>ASP.NET Core entry<br/>[Program.cs]"]
  node_server_app["Server root UI<br/>Blazor root<br/>[App.razor]"]
  node_server_routes["Server routes<br/>router<br/>[Routes.razor]"]
  node_server_project[".NET 8 Server project<br/>runtime target"]
end

subgraph group_wasm["Blazor WASM"]
  node_wasm_server["WASM host startup<br/>ASP.NET Core host<br/>[Program.cs]"]
  node_wasm_client["WASM client startup<br/>browser entry<br/>[Program.cs]"]
  node_wasm_app["WASM root UI<br/>Blazor root<br/>[App.razor]"]
  node_wasm_routes["WASM client routes<br/>router<br/>[Routes.razor]"]
end

subgraph group_integrations["Service Boundaries"]
  node_controllers["Server API controllers<br/>HTTP endpoints"]
  node_file_service["File service<br/>file-management service"]
  node_ai_services{{"Azure AI services<br/>external AI adapter<br/>[AzureAIService.cs]"}}
  node_token_service["User token service<br/>token boundary"]
end

node_server_project -->|"selects runtime"| node_server_program
node_server_program -->|"renders"| node_server_app
node_server_app -->|"uses"| node_server_routes
node_wasm_server -->|"hosts client"| node_wasm_client
node_wasm_server -->|"renders host UI"| node_wasm_app
node_wasm_client -->|"boots routing"| node_wasm_routes
node_server_routes -->|"loads shared shell"| node_layout
node_wasm_routes -->|"loads shared shell"| node_layout
node_layout -->|"composes"| node_navigation
node_navigation -->|"browses"| node_catalog
node_catalog -->|"defines samples"| node_sample_service
node_sample_service -->|"resolves route to"| node_demo_pages
node_layout -->|"hosts sample"| node_demo_pages
node_demo_pages -->|"reads"| node_data_assets
node_demo_pages -->|"uses styles and interop"| node_static_assets
node_layout -->|"localizes"| node_localization
node_demo_pages -.->|"calls server APIs"| node_controllers
node_demo_pages -.->|"uses file scenarios"| node_file_service
node_demo_pages -.->|"uses AI scenarios"| node_ai_services
node_controllers -->|"delegates token handling"| node_token_service

click node_server_program "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Program.cs"
click node_server_app "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Components/App.razor"
click node_server_routes "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Components/Routes.razor"
click node_server_project "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Blazor_Server_Demos_NET8.csproj"
click node_wasm_server "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs"
click node_wasm_client "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Program.cs"
click node_wasm_app "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos/Components/App.razor"
click node_wasm_routes "https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Routes.razor"
click node_layout "https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/MainLayout.razor"
click node_navigation "https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/LeftPane/LeftPaneComponent.razor"
click node_catalog "https://github.com/syncfusion/blazor-samples/blob/master/Common/Pages/Charts/SampleList.cs"
click node_sample_service "https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/Common/SampleService.cs"
click node_demo_pages "https://github.com/syncfusion/blazor-samples/blob/master/Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor"
click node_data_assets "https://github.com/syncfusion/blazor-samples/blob/master/Common/wwwroot/data/chart/financial-data.json"
click node_static_assets "https://github.com/syncfusion/blazor-samples/blob/master/Common/wwwroot/scripts/common/index.js"
click node_localization "https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/Common/SyncfusionLocalizer.cs"
click node_controllers "https://github.com/syncfusion/blazor-samples/blob/master/Common/Controllers/UserTokensController.cs"
click node_file_service "https://github.com/syncfusion/blazor-samples/blob/master/Common/Service/FileManagerService.cs"
click node_ai_services "https://github.com/syncfusion/blazor-samples/blob/master/Common/Service/AzureAIService.cs"
click node_token_service "https://github.com/syncfusion/blazor-samples/blob/master/Common/Service/UserTokenService.cs"

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_layout,node_navigation,node_catalog,node_sample_service,node_demo_pages,node_data_assets,node_static_assets,node_localization toneBlue
class node_server_program,node_server_app,node_server_routes,node_server_project toneAmber
class node_wasm_server,node_wasm_client,node_wasm_app,node_wasm_routes toneMint
class node_controllers,node_file_service,node_ai_services,node_token_service toneRose
```

## Components

### Shared Common

Reusable shell, catalog, samples, services, and assets.

- [Shared demo shell](https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/MainLayout.razor): layout · Composes the header, navigation, sample pane, and right pane. · `Common/Shared/MainLayout.razor`
- [Header and navigation](https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/LeftPane/LeftPaneComponent.razor): shell components · `Common/Shared/LeftPane/LeftPaneComponent.razor`
- [Sample catalog metadata](https://github.com/syncfusion/blazor-samples/blob/master/Common/Pages/Charts/SampleList.cs): discovery service · Category lists and metadata drive sample selection. · `Common/Pages/Charts/SampleList.cs`
- [Sample selection](https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/Common/SampleService.cs): sample service · `Common/Shared/Common/SampleService.cs`
- [Control demo pages](https://github.com/syncfusion/blazor-samples/blob/master/Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor): Razor sample catalog · Independently executable samples across control domains. · `Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor`
- [Embedded data and media](https://github.com/syncfusion/blazor-samples/blob/master/Common/wwwroot/data/chart/financial-data.json): static data · Typed models, JSON, images, and sample data support demos. · `Common/wwwroot/data/chart/financial-data.json`
- [Shared browser assets](https://github.com/syncfusion/blazor-samples/blob/master/Common/wwwroot/scripts/common/index.js): styles and JS interop · `Common/wwwroot/scripts/common/index.js`
- [Localization adapter](https://github.com/syncfusion/blazor-samples/blob/master/Common/Shared/Common/SyncfusionLocalizer.cs): resource localization · `Common/Shared/Common/SyncfusionLocalizer.cs`

### Blazor Server

Interactive Server hosting model.

- [Server startup](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Program.cs): ASP.NET Core entry · `Blazor-Server-Demos/Program.cs`
- [Server root UI](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Components/App.razor): Blazor root · `Blazor-Server-Demos/Components/App.razor`
- [Server routes](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Components/Routes.razor): router · `Blazor-Server-Demos/Components/Routes.razor`
- [.NET 8 Server project](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-Server-Demos/Blazor_Server_Demos_NET8.csproj): runtime target · Parallel .NET 9 and .NET 10 projects select other targets. · `Blazor-Server-Demos/Blazor_Server_Demos_NET8.csproj`

### Blazor WASM

Hosted browser-client model.

- [WASM host startup](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs): ASP.NET Core host · `Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs`
- [WASM client startup](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Program.cs): browser entry · `Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Program.cs`
- [WASM root UI](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos/Components/App.razor): Blazor root · `Blazor-WASM-Demos/Blazor_WASM_Demos/Components/App.razor`
- [WASM client routes](https://github.com/syncfusion/blazor-samples/blob/master/Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Routes.razor): router · `Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Routes.razor`

### Service Boundaries

Server APIs and external AI integrations.

- [Server API controllers](https://github.com/syncfusion/blazor-samples/blob/master/Common/Controllers/UserTokensController.cs): HTTP endpoints · TreeGrid, culture, and token endpoints are server-only. · `Common/Controllers/UserTokensController.cs`
- [File service](https://github.com/syncfusion/blazor-samples/blob/master/Common/Service/FileManagerService.cs): file-management service · Separates file-management scenarios from sample components. · `Common/Service/FileManagerService.cs`
- [Azure AI services](https://github.com/syncfusion/blazor-samples/blob/master/Common/Service/AzureAIService.cs): external AI adapter · AI samples use Azure AI and Azure OpenAI service boundaries. · `Common/Service/AzureAIService.cs`
- [User token service](https://github.com/syncfusion/blazor-samples/blob/master/Common/Service/UserTokenService.cs): token boundary · `Common/Service/UserTokenService.cs`

## Connections

- .NET 8 Server project → Server startup: selects runtime
- Server startup → Server root UI: renders
- Server root UI → Server routes: uses
- WASM host startup → WASM client startup: hosts client
- WASM host startup → WASM root UI: renders host UI
- WASM client startup → WASM client routes: boots routing
- Server routes → Shared demo shell: loads shared shell
- WASM client routes → Shared demo shell: loads shared shell
- Shared demo shell → Header and navigation: composes
- Header and navigation → Sample catalog metadata: browses
- Sample catalog metadata → Sample selection: defines samples
- Sample selection → Control demo pages: resolves route to
- Shared demo shell → Control demo pages: hosts sample
- Control demo pages → Embedded data and media: reads
- Control demo pages → Shared browser assets: uses styles and interop
- Shared demo shell → Localization adapter: localizes
- Control demo pages → Server API controllers: calls server APIs
- Control demo pages → File service: uses file scenarios
- Control demo pages → Azure AI services: uses AI scenarios
- Server API controllers → User token service: delegates token handling