syncfusion-content · prakashrajsf3945 · May 18, 2026
diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/getting-started-core.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/getting-started-core.md
@@ -38,7 +38,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core controls are av
 Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelper.
 
 {% tabs %}
-{% highlight C# tabtitle="~/_ViewImports.cshtml" %}
+{% highlight C# tabtitle="_ViewImports.cshtml" %}
 
 @addTagHelper *, Syncfusion.EJ2
 
@@ -50,7 +50,7 @@ Open `~/Pages/_ViewImports.cshtml` file and import the `Syncfusion.EJ2` TagHelpe
 Add the stylesheet and script references to the `<head>` section of the `~/Pages/Shared/_Layout.cshtml` file, as shown in the following example.
 
 {% tabs %}
-{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+{% highlight cshtml tabtitle="_Layout.cshtml" %}
 
 <head>
     ...
@@ -69,7 +69,7 @@ N> To learn other ways to load themes or scripts (such as NPM packages or [CRG](
 Register the script manager `<ejs-scripts>` at the end of the `<body>` element in the ASP.NET Core application, as shown in the following example.
 
 {% tabs %}
-{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+{% highlight cshtml tabtitle="_Layout.cshtml" %}
 
 <body>
     ...
@@ -90,7 +90,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Spreadshee
 {% endhighlight %}
 {% endtabs %}
 
-> **Note:** The [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) and [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save) section.
+N> The [`openUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_OpenUrl) and [`saveUrl`](https://help.syncfusion.com/cr/aspnetcore-js2/Syncfusion.EJ2.Spreadsheet.Spreadsheet.html#Syncfusion_EJ2_Spreadsheet_Spreadsheet_SaveUrl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-core/open-save) section.
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET Core Spreadsheet control will be rendered in the default web browser.
 

diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-CORE/overview.md
@@ -9,7 +9,9 @@ documentation: ug
 
 # Overview of the ASP.NET Core Spreadsheet Control
 
-The [ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [Syncfusion® ASP.NET Core Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-core-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with XLSX, XLS, CSV and PDF formats.
+
+![ASP.NET Core Spreadsheet Control](images/overview-banner.png)
 
 ## Key features
 

diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/getting-started-mvc.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/getting-started-mvc.md
@@ -24,7 +24,7 @@ This section briefly explains about how to include [Syncfusion<sup style="font-s
 
 Open the NuGet package manager UI in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for [Syncfusion.EJ2.MVC5](https://www.nuget.org/packages/Syncfusion.EJ2.MVC5) and then install it. Alternatively, you can utilize the following package manager command to achieve the same.
 
-> Make sure that the `Microsoft.AspNet.Mvc` package and its dependency packages are updated to the latest version.
+N> Make sure that the `Microsoft.AspNet.Mvc` package and its dependency packages are updated to the latest version.
 
 {% tabs %}
 {% highlight C# tabtitle="Package Manager" %}
@@ -40,20 +40,24 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC controls are ava
 
 Add **Syncfusion.EJ2** namespace reference in `~/Views/Web.config` file, as shown in the following example.
 
-```
+{% tabs %}
+{% highlight cshtml tabtitle="Web.config" %}
+
 ...
 <namespaces>
     ...
     <add namespace="Syncfusion.EJ2"/>
 </namespaces>
-```
+
+{% endhighlight %}
+{% endtabs %}
 
 ## Add stylesheet and script resources
 
 Add the stylesheet and script references to the `<head>` section of `~/Views/Shared/_Layout.cshtml` file, as shown in the following example.
 
 {% tabs %}
-{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+{% highlight cshtml tabtitle="_Layout.cshtml" %}
 
 <head>
     ...
@@ -73,7 +77,7 @@ N> To learn other ways to load themes or scripts (such as NPM packages or [CRG](
 Register the script manager `EJS().ScriptManager()` at the end of the `<body>` element in the `~/Views/Shared/_Layout.cshtml` file, as shown in the following example.
 
 {% tabs %}
-{% highlight cshtml tabtitle="~/_Layout.cshtml" %}
+{% highlight cshtml tabtitle="_Layout.cshtml" %}
 
 <body>
 ...
@@ -94,7 +98,7 @@ Add the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Spreadsheet
 {% endhighlight %}
 {% endtabs %}
 
-> **Note:** The [`openUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#open) and [`saveUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#save) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save) section.
+N> The [`openUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#open) and [`saveUrl`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save#save) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`Open and Save`](https://help.syncfusion.com/document-processing/excel/spreadsheet/asp-net-mvc/open-save) section.
 
 Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to run the app. Then, the Syncfusion<sup style="font-size:70%">&reg;</sup> ASP.NET MVC Spreadsheet control will be rendered in the default web browser.
 

diff --git a/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md b/Document-Processing/Excel/Spreadsheet/ASP-NET-MVC/overview.md
@@ -9,7 +9,9 @@ documentation: ug
 
 # Overview of the ASP.NET MVC Spreadsheet Control
 
-The [ASP.NET MVC Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-mvc-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [Syncfusion® ASP.NET MVC Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/asp-net-mvc-spreadsheet-editor) is an user interactive control to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with XLSX, XLS, CSV and PDF formats.
+
+![ASP.NET MVC Spreadsheet Control](images/overview-banner.png)
 
 ## Key features
 

diff --git a/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md b/Document-Processing/Excel/Spreadsheet/Angular/getting-started.md
@@ -32,7 +32,7 @@ ng new spreadsheet-app
 cd spreadsheet-app
 ```
 
-> **Note:** When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools.
+N> When prompted during project creation, select the default options: **CSS** for stylesheet, **No** for SSR/SSG, and **None** for AI tools.
 
 ## Install the Syncfusion® Angular Spreadsheet package
 
@@ -52,7 +52,9 @@ npm install @syncfusion/ej2-angular-spreadsheet@ngcc --save
 
 Add the following Spreadsheet and dependent component style references to the `[src/styles.css]` file.
 
-```css
+{% tabs %}
+{% highlight css tabtitle="styles.css" %}
+
 @import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
 @import '../node_modules/@syncfusion/ej2-inputs/styles/tailwind3.css';
 @import '../node_modules/@syncfusion/ej2-buttons/styles/tailwind3.css';
@@ -63,9 +65,11 @@ Add the following Spreadsheet and dependent component style references to the `[
 @import '../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind3.css';
 @import '../node_modules/@syncfusion/ej2-grids/styles/tailwind3.css';
 @import '../node_modules/@syncfusion/ej2-angular-spreadsheet/styles/tailwind3.css';
-```
 
-> **Note:** Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
+{% endhighlight %}
+{% endtabs %}
+
+N> Refer to the [Themes topic](https://ej2.syncfusion.com/angular/documentation/appearance/overview) to learn more about built-in themes and different ways to refer to themes in an Angular project.
 
 ## Add the Syncfusion® Angular Spreadsheet component to the application
 
@@ -86,7 +90,7 @@ export class App { }
 {% endhighlight %}
 {% endtabs %}
 
-> **Note:** The [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services).
+N> The [`openUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#openurl) and [`saveUrl`](https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/index-default#saveurl) endpoints used in this example are provided only for demonstration purposes. For development and production use, we strongly recommend configuring your own local or hosted web service for the Open and Save actions instead of relying on the online demo service. For more information, refer to the [`link`](https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services).
 
 ## Run the application
 
@@ -103,7 +107,7 @@ You can also explore the Spreadsheet interactively using the live sample below.
 
 {% previewsample "/document-processing/samples/spreadsheet/angular/spreadsheet-cs1" %}
 
-> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-angular-spreadsheet-component).
+N> [View Sample in GitHub](https://github.com/SyncfusionExamples/getting-started-with-the-angular-spreadsheet-component).
 
 ## Video tutorial
 

diff --git a/Document-Processing/Excel/Spreadsheet/Angular/overview.md b/Document-Processing/Excel/Spreadsheet/Angular/overview.md
@@ -9,7 +9,9 @@ documentation: ug
 
 # Overview of the Angular Spreadsheet Component
 
-The [Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with xlsx, xls, CSV and PDF formats.
+The [Syncfusion® Angular Spreadsheet](https://www.syncfusion.com/spreadsheet-editor-sdk/angular-spreadsheet-editor) is an user interactive component to organize and analyze data in tabular format with configuration options for customization. It will load data by importing an Excel/CSV file or from local and remote data sources such as JSON, RESTful services, OData services, and more. The populated data can be exported as Excel with XLSX, XLS, CSV and PDF formats.
+
+![Angular Spreadsheet Component](./images/overview-banner.png)
 
 ## Key features
 

diff --git a/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md b/Document-Processing/Excel/Spreadsheet/Blazor/blazor-hybrid-maui-app.md
@@ -73,63 +73,102 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
 
 ## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
 
-Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Spreadsheet` namespaces.
+In the **~/_Imports.razor** file, add the following namespaces:
 
 {% tabs %}
-{% highlight razor tabtitle="~/_Imports.razor" %}
+{% highlight razor tabtitle="_Imports.razor" %}
 
 @using Syncfusion.Blazor
 @using Syncfusion.Blazor.Spreadsheet
 
 {% endhighlight %}
 {% endtabs %}
 
-Next, register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the MauiProgram.cs file of the MAUI Blazor App.
+Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/MauiProgram.cs** file.
 
 {% tabs %}
-{% highlight C# tabtitle="~/MauiProgram.cs" %}
+{% highlight c# tabtitle="MauiProgram.cs" hl_lines="3 26" %}
 
+using Microsoft.Extensions.Logging;
+using MauiBlazorWindow.Data;
 using Syncfusion.Blazor;
-    ....
-    builder.Services.AddSyncfusionBlazor();
-    ....
+
+namespace MauiBlazorWindow;
+
+public static class MauiProgram
+{
+    public static MauiApp CreateMauiApp()
+    {
+        var builder = MauiApp.CreateBuilder();
+        builder
+            .UseMauiApp<App>()
+            .ConfigureFonts(fonts =>
+            {
+                fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
+            });
+
+        builder.Services.AddMauiBlazorWebView();
+
+#if DEBUG
+        builder.Services.AddBlazorWebViewDeveloperTools();
+        builder.Logging.AddDebug();
+#endif
+
+        builder.Services.AddSingleton<WeatherForecastService>();
+        builder.Services.AddSyncfusionBlazor();
+        return builder.Build();
+    }
+}
 
 {% endhighlight %}
 {% endtabs %}
 
 ## Add stylesheet and script resources
 
-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 and script references in the `<head>` of the **~wwwroot/index.html** file.
+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 in the `<head>` and the script at the end of the `<body>` in the **~wwwroot/index.html** file as shown below:
+
+{% tabs %}
+{% highlight html tabtitle="index.html" %}
 
-```html
 <head>
     ....
     <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
     <script src="_content/Syncfusion.Blazor.Spreadsheet/scripts/syncfusion-blazor-spreadsheet.min.js" type="text/javascript"></script>
 </head>
-```
-N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
+
+{% endhighlight %}
+{% endtabs %}
+
+N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to explore supported ways (such as static assets, CDN, and CRG) to apply themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
 
 ## Add Blazor Spreadsheet component
 
-Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the ~/Home.razor page under the **~/Components/Pages** folder.
+Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Spreadsheet component in any Razor file. In this example, the Spreadsheet component is added to the **~/Home.razor** page under the **~/Components/Pages** folder.
 
 {% tabs %}
-{% highlight razor %}
+{% highlight razor tabtitle="Home.razor" %}
 
-<SfSpreadsheet DataSource="@DataSourceBytes">
+@page "/"
+@using Syncfusion.Blazor.Spreadsheet
+
+<SfSpreadsheet>
     <SpreadsheetRibbon></SpreadsheetRibbon>
 </SfSpreadsheet>
 
-@code {
-    public byte[] DataSourceBytes { get; set; }
-
-    protected override void OnInitialized()
-    {
-        string filePath = "wwwroot/Sample.xlsx";
-        DataSourceBytes = File.ReadAllBytes(filePath);
-     }
-}
-
 {% endhighlight %}
 {% endtabs %}
+
+In the Visual Studio toolbar, click the **Windows Machine** to build and run the app. Ensure the run profile is set to `Windows Machine` before starting the app.
+
+![Maui Tool](images/maui-build.png)
+
+N> To run the application on Android or iOS, refer to [MAUI Getting Started](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-8.0#run-the-app-in-the-android-emulator) for setup instructions.
+
+![Blazor Spreadsheet](images/getting-started.png)
+
+N> To learn how to open workbooks, bind data, or save files in the Spreadsheet component, see [Open and Save](open-and-save.md). For a hands-on reference with working code examples, explore the sample projects available on [GitHub](https://github.com/SyncfusionExamples/syncfusion-maui-blazor-spreadsheet-integration).
+
+## See Also
+
+- [Getting started with the Blazor Spreadsheet in a Blazor WebAssembly App](./getting-started.md)
+- [Getting started with the Blazor Spreadsheet in a Blazor Web app Server app](./getting-started-webapp.md)