How syncfusion/blazor-samples works
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: DefaultFunctionalities.razor Control demo pages · MainLayout.razor Shared demo shell · Program.cs WASM host startup · LeftPaneComponent.razor Header and navigation
Components 20
Shared Common
Reusable shell, catalog, samples, services, and assets.
- Shared demo shell · Composes the header, navigation, sample pane, and right pane.
Common/Shared/MainLayout.razor - Header and navigation
Common/Shared/LeftPane/LeftPaneComponent.razor - Sample catalog metadata · Category lists and metadata drive sample selection.
Common/Pages/Charts/SampleList.cs - Sample selection
Common/Shared/Common/SampleService.cs - Control demo pages · Independently executable samples across control domains.
Common/Pages/Grid/DataGrid/DefaultFunctionalities.razor - Embedded data and media · Typed models, JSON, images, and sample data support demos.
Common/wwwroot/data/chart/financial-data.json - Shared browser assets
Common/wwwroot/scripts/common/index.js - Localization adapter
Common/Shared/Common/SyncfusionLocalizer.cs
Blazor Server
Interactive Server hosting model.
- Server startup
Blazor-Server-Demos/Program.cs - Server root UI
Blazor-Server-Demos/Components/App.razor - Server routes
Blazor-Server-Demos/Components/Routes.razor - .NET 8 Server project · 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
Blazor-WASM-Demos/Blazor_WASM_Demos/Program.cs - WASM client startup
Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Program.cs - WASM root UI
Blazor-WASM-Demos/Blazor_WASM_Demos/Components/App.razor - WASM client routes
Blazor-WASM-Demos/Blazor_WASM_Demos.Client/Routes.razor
Service Boundaries
Server APIs and external AI integrations.
- Server API controllers · TreeGrid, culture, and token endpoints are server-only.
Common/Controllers/UserTokensController.cs - File service · Separates file-management scenarios from sample components.
Common/Service/FileManagerService.cs - Azure AI services · AI samples use Azure AI and Azure OpenAI service boundaries.
Common/Service/AzureAIService.cs - User token service
Common/Service/UserTokenService.cs
Connections 20
- .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