Updated Getting Started UG documentation for Blazor components by Backiaraj · Pull Request #8028 · syncfusion-content/blazor-docs

Backiaraj · 2026-03-27T13:35:09Z

Description

Updated Getting Started UG documentation for Blazor components.

Code Studio usage(Mandatory)

Code Studio used in this PR/MR?
- Yes
- No
If Yes: Primary use (choose one)
- Generate new content
- Refactor/improve existing content
- Review assistance (explanations/summaries)
- Other:
Outcome
- Saved time
- Neutral
- Cost time
If “Cost time” explain in short (1 or 2 lines):

Type of Change

New documentation page
Update to existing documentation
Bug fix (broken links, typos, formatting issues)
Structural change (folders, navigation, index)
Content improvement (clarity, examples, screenshots)
Other (please describe):

Reviewer Checklist (Mandatory)

Reviewed the provided Code Studio usages related information
Content changes follow UG/Documentation guidelines
All provided information reviewed and verified
Links and previews checked

…lazor-docs into 930500-UG

SyncfusionBuild · 2026-03-27T13:36:03Z

Build Status: INQUEUE 🕒
Build Location: 930500-UG

SyncfusionBuild · 2026-03-27T13:40:13Z

Build Status: INPROGRESS 🔃
Build Location: 930500-UG

SyncfusionBuild · 2026-03-27T13:46:03Z

CI Status: SUCCESS ✅
Source Compilation: SUCCESS ✅
Build Location: 930500-UG
Technical Error(s): 0
Spelling Error(s): 0
Image Alt Text Error(s): 0
Image Size Error(s): 0
Image Name Error(s): 0
Front matter Error(s): 0
File Path Error(s): 0
CodeSnippet File Path Missing Error(s): 0
Toc Anchor Tags Validation Error(s): 0
MD Tag Validation Error(s): 0

kmkrish001

📋 Review Summary

Overall Quality: Needs Work
Target .NET Version: .NET 10 (based on aspnetcore-10.0 references)

📊 Findings Overview

⚠️ 2 Major issues
ℹ️ 8 Minor issues

❌ Changes Requested

The PR simplifies the Getting Started documentation structure, which is a positive improvement. However, there is one critical issue that must be addressed:

Major Issues:

blazor/badge/getting-started-with-web-app.md (line 110): The note about Global interactivity location needs clearer explanation about when developers need to take action.
blazor/breadcrumb/getting-started-with-web-app.md (line 133): The note about dual service registration for WebAssembly/Auto modes needs to be more explicit that BOTH projects require registration.

Minor Issues:

Multiple grammatical errors: "at top of" should be "at the top of" (appears in multiple files)
Formatting inconsistencies with code block spacing
Inconsistent use of "e.g." vs "For example"
Code highlighting (hl_lines) may not match simplified code snippets
Some notes could be clearer about actionable guidance

🎯 Positive Changes:

The PR successfully simplifies the documentation by:

Consolidating NuGet installation instructions outside tab sections
Removing redundant images and verbose explanations
Updating theme references from bootstrap5 to fluent2
Standardizing wording across similar documents
Removing version-specific Visual Studio references

Please review the inline comments for detailed recommendations on each issue.

🤖 Automated review by Blazor Docs PR Reviewer Agent

kmkrish001 · 2026-03-27T13:51:16Z

blazor/breadcrumb/getting-started-with-web-app.md

+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at top of the `~Pages/*.razor` file. (e.g. `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).

-N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.
+N> If an **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is configured in the `App.razor` file by default.


Content Clarity (Minor)

The note should clarify what "configured in the App.razor file by default" means for developers.

Recommended fix:

N> If an **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, you don't need to specify a render mode in individual components because the render mode is already configured globally in the `App.razor` file.

This makes the guidance more actionable and clear.

kmkrish001 · 2026-03-27T13:51:18Z

blazor/breadcrumb/getting-started.md


 {% endhighlight %}
 {% endtabs %}



Consistency Issue (Minor)

In the WASM documentation, you're using simplified code snippets with "....", but the highlighting still references line numbers (hl_lines="2 4"). This may not accurately reflect the condensed code structure.

Recommended fix: Either remove the hl_lines parameter for simplified snippets or provide a complete code block. For consistency with the new simplified approach:

{% highlight C# tabtitle="Program.cs" %} using Syncfusion.Blazor; // ... other code ... builder.Services.AddSyncfusionBlazor(); // ... other code ... {% endhighlight %}

Or simply remove highlighting from simplified examples.

kmkrish001 · 2026-03-27T13:51:18Z

blazor/breadcrumb/getting-started-with-web-app.md


 {% endhighlight %}
 {% endtabs %}



Technical Accuracy (Major)

The note says to register Syncfusion service in both server and client projects when using WebAssembly or Auto mode. However, this is incomplete - it should specify that service registration is required in BOTH projects for these modes.

Recommended fix:

N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you must register the Syncfusion® Blazor service in the **Program.cs** files of BOTH the server project and the client project (.Client) in the Blazor Web App. This ensures components work correctly in both rendering contexts.

This clarification is critical for developers to avoid runtime errors.

kmkrish001 · 2026-03-27T13:51:19Z

blazor/breadcrumb/getting-started-with-server-app.md


-N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default.
+N> If an Interactivity Location is set to `Global`, the render mode is already configured in the `App.razor` file by default.



Content Clarity (Minor)

The note about Global interactivity could be more specific about the render mode.

Recommended fix:

N> If an Interactivity Location is set to `Global` with the `Server` render mode, you don't need to define a render mode in the component as it's already configured globally in the `App.razor` file.

This clarifies that for Server mode specifically, the configuration is already handled globally.

kmkrish001 · 2026-03-27T13:51:21Z

blazor/breadcrumb/getting-started-with-server-app.md


-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at top of the `~Pages/Home.razor` file.



Content Clarity (Minor)

The phrase "define a render mode at top of" is missing "the" before "top".

Recommended fix:

Add the Syncfusion® Blazor Breadcrumb component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file.

kmkrish001 · 2026-03-27T13:51:22Z

blazor/breadcrumb/getting-started-with-server-app.md


 {% tabs %}
-{% highlight C# tabtitle="Blazor Server App" hl_lines="3 10" %}
+{% highlight C# tabtitle="Program.cs" hl_lines="2 4" %}


Content Clarity (Minor)

The highlighting in the code block (hl_lines="2 4") may not accurately reflect the actual line numbers after simplification.

Recommended fix: Verify that the highlighted lines correctly point to the Syncfusion import and service registration lines. Consider using descriptive highlighting:

{% highlight C# tabtitle="Program.cs" hl_lines="2 4" %} .... using Syncfusion.Blazor; // Line 2: Import namespace .... builder.Services.AddSyncfusionBlazor(); // Line 4: Register service ....

Or adjust the highlighting to match the actual visible lines in the simplified code.

kmkrish001 · 2026-03-27T13:51:24Z

blazor/breadcrumb/getting-started-with-web-app.md

-| Per page/component | Auto | @rendermode InteractiveAuto |
-|  | WebAssembly | @rendermode InteractiveWebAssembly |
-|  | None | --- |
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Breadcrumb component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at top of the `~Pages/*.razor` file. (e.g. `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).


Formatting Issue (Minor)

Similar to Badge component: grammatical error "at top of" should be "at the top of".

Recommended fix:

Add the Syncfusion® Blazor Breadcrumb component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`).

Also consider using "For example" instead of "e.g." for clarity.

kmkrish001 · 2026-03-27T13:51:25Z

blazor/badge/getting-started.md


-The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section of the **~/index.html** file.
+The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the **~/index.html** file.



Formatting Issue (Minor)

Missing space after the closing code block. This affects Markdown rendering.

Recommended fix:

```html <link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />

N> Check out the [Blazor Themes]...

Add a blank line between the code block and the note for proper Markdown formatting.

kmkrish001 · 2026-03-27T13:51:26Z

blazor/badge/getting-started-with-web-app.md

-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section in the **~/Components/App.razor** file as shown below:
+The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the **~/Components/App.razor** file.

 ```html


Content Clarity (Major)

This note statement could be clearer. The phrase "render mode is already configured" might confuse readers about whether they need to take action.

Recommended fix:

N> If an **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, you don't need to define a render mode as it's already configured globally in the `App.razor` file.

This makes it clearer that no action is needed when using Global interactivity location.

kmkrish001 · 2026-03-27T13:51:28Z

blazor/badge/getting-started-with-web-app.md

 ## Add stylesheet

-The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section in the **~/Components/App.razor** file as shown below:
+The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the **~/Components/App.razor** file.


Formatting Issue (Minor)

Minor formatting inconsistency: there's an extra space before the period in "file. (e.g.".

Recommended fix:

Add the Syncfusion® Blazor Badge component in the **~/Components/Pages/*.razor** file. If an interactivity location is set to `Per page/component` in the Web App, define a render mode at top of the `~Pages/*.razor` file. (e.g. `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`).

Remove the extra space after "file" and consider using "For example" instead of "e.g." for better readability.

Backiaraj added 2 commits March 27, 2026 19:03

Updated Getting Started UG documentation for Blazor components

18934f8

Merge branch 'development' of https://github.com/syncfusion-content/b…

bc282fd

…lazor-docs into 930500-UG

Backiaraj added the cs:not-used AI was NOT used. label Mar 27, 2026

kmkrish001 requested changes Mar 27, 2026

View reviewed changes


		N> If an Interactivity Location is set to `Global` and the Render Mode is set to `Server`, the render mode is configured in the `App.razor` file by default.
		N> If an Interactivity Location is set to `Global`, the render mode is already configured in the `App.razor` file by default.


		Add the Syncfusion<sup style="font-size:70%">®</sup> Blazor Breadcrumb component in the ~/Components/Pages/Home.razor file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `Home.razor` page.
		Add the Syncfusion<sup style="font-size:70%">®</sup> Blazor Breadcrumb component in the ~/Components/Pages/Home.razor file. If the interactivity location is set to `Per page/component`, define a render mode at top of the `~Pages/Home.razor` file.


		The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section of the ~/index.html file.
		The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the ~/index.html file.

Conversation

Backiaraj commented Mar 27, 2026

Description

Code Studio usage(Mandatory)

Type of Change

Reviewer Checklist (Mandatory)

Uh oh!

SyncfusionBuild commented Mar 27, 2026

Uh oh!

SyncfusionBuild commented Mar 27, 2026

Uh oh!

SyncfusionBuild commented Mar 27, 2026

Uh oh!

kmkrish001 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

📋 Review Summary

📊 Findings Overview

❌ Changes Requested

🎯 Positive Changes:

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

kmkrish001 left a comment •

edited

Loading