Syncfusion Blazor Getting Started

When to Use

• Set up a new Blazor project with Syncfusion Blazor components
• Create a Blazor Web App with specific .NET version targeting (net8.0, net9.0, net10.0, etc.)
• Add Syncfusion components (Grid, Button, etc.) with features based on context
• Optimize script loading with static assets or CDN
• Set up bUnit testing for Syncfusion components

Quick Reference

• Getting Started: See getting-started.md for full project setup steps
• Scripts & CDN: See add-script-reference-and-cdn.md for script loading options
• bUnit Testing: See bunit-setup.md for unit testing setup
• Localization & Globalization: See localization-globalization.md for culture and localization setup

Prerequisites

• .NET 8+ SDK
• Blazor Web App project
• Syncfusion account (free trial)
• NuGet package access

1. Getting Started

Quick Setup

1. Create Blazor Web App with your chosen render mode and explicit .NET version (e.g.,

   .NET 10

   )
2. Install

   Syncfusion.Blazor.Grid

   +

   Syncfusion.Blazor.Themes

   NuGet packages. All individual packages are listed here
3. Add

   @using Syncfusion.Blazor

   and relevant component namespaces to

   _Imports.razor

4. Register

   builder.Services.AddSyncfusionBlazor()

   in

   Program.cs

5. Add theme CSS and script references to

   App.razor

6. Use Syncfusion components in your pages

Quick Start Options

• Blazor Playground: Browser-based, no local install
• Template Studio: Pre-configured VS/VS Code project templates

2. Script References and CDN

Script Loading Options

3. bUnit Testing

Required Setup

bunit

using var ctx = new TestContext();
ctx.Services.AddSyncfusionBlazor()
   .Replace(ServiceDescriptor.Transient<IComponentActivator, SfComponentActivator>());
ctx.Services.AddOptions();

Test Pattern

1. RenderComponent<TPage>()

   → render

2. FindComponent<SfButton>()

   → locate

3. .Click()

   → interact

4. MarkupMatches(...)

   → assert

Bunit.TestContext

4. Localization and Globalization

Key Concepts

• Internationalization (i18n): Parsing and formatting dates, times, numbers, and currencies
• Localization (l10n): Adding culture-specific customizations and translating UI text
• Globalization: Combines both i18n and l10n

Quick Setup

1. Download and add culture-based

   .resx

   resource files from GitHub - ASK PERMISSION BEFORE DOWNLOAD THIS
2. Create a

   SyncfusionLocalizer

   class implementing

   ISyncfusionStringLocalizer

3. Register in

   Program.cs

   :
   csharp

   builder.Services.AddSyncfusionBlazor();
   builder.Services.AddSingleton(typeof(ISyncfusionStringLocalizer), typeof(SyncfusionLocalizer));

4. Set culture statically or dynamically (server, WebAssembly, or MAUI apps)
5. Create a

   CultureSwitcher

   component for dynamic culture selection