From 69134491ab05850a241273ae623f0103647ee15a Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 23 Jun 2026 19:32:51 +0530 Subject: [PATCH 1/2] 1034381 - Removed the word syncfusion from markdown-editor,mcp-server, media-query topic --- blazor/markdown-editor/accessibility.md | 6 +-- blazor/markdown-editor/custom-format.md | 4 +- .../markdown-editor/getting-started-webapp.md | 26 +++++------ .../getting-started-with-server-app.md | 28 +++++------ blazor/markdown-editor/getting-started.md | 26 +++++------ .../how-to/retrieve-characters.md | 2 +- .../how-to/retrieve-content.md | 4 +- blazor/markdown-editor/insert-image.md | 8 ++-- blazor/markdown-editor/insert-table.md | 8 ++-- blazor/markdown-editor/keyboard-support.md | 6 +-- blazor/markdown-editor/markdown-preview.md | 10 ++-- blazor/markdown-editor/mention-support.md | 6 +-- blazor/markdown-editor/supported-markdown.md | 10 ++-- blazor/markdown-editor/toolbar.md | 8 ++-- .../agentic-ui-builder/getting-started.md | 28 +++++------ .../agentic-ui-builder/prompt-library.md | 16 +++---- .../ai-coding-assistant/getting-started.md | 22 ++++----- .../ai-coding-assistant/prompt-library.md | 46 +++++++++---------- blazor/mcp-server/overview.md | 20 ++++---- blazor/mcp-server/release-notes.md | 8 ++-- blazor/media-query/break-points.md | 4 +- blazor/media-query/getting-started-webapp.md | 30 ++++++------ .../getting-started-with-server-app.md | 26 +++++------ blazor/media-query/getting-started.md | 26 +++++------ blazor/media-query/media-query-integration.md | 2 +- blazor/media-query/media-query-reusable.md | 2 +- 26 files changed, 191 insertions(+), 191 deletions(-) diff --git a/blazor/markdown-editor/accessibility.md b/blazor/markdown-editor/accessibility.md index 7418e4774f..a9b728fae7 100644 --- a/blazor/markdown-editor/accessibility.md +++ b/blazor/markdown-editor/accessibility.md @@ -1,7 +1,7 @@ --- layout: post -title: Accessibility in Blazor Markdown Editor Component | Syncfusion -description: Checkout and learn here all about accessibility in Syncfusion Blazor Markdown Editor component and more. +title: Accessibility in Blazor Markdown Editor Component | Syncfusion® +description: Checkout and learn here all about the accessibility in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -101,4 +101,4 @@ N> You can refer to our [Blazor Rich Text Editor](https://www.syncfusion.com/bla ## See also -* [Accessibility in Syncfusion® Blazor components](../common/accessibility) +* [Accessibility in Blazor components](../common/accessibility) diff --git a/blazor/markdown-editor/custom-format.md b/blazor/markdown-editor/custom-format.md index cec2818479..616f6ed9f9 100644 --- a/blazor/markdown-editor/custom-format.md +++ b/blazor/markdown-editor/custom-format.md @@ -1,7 +1,7 @@ --- layout: post -title: Customize Markdown Syntax in Blazor Markdown Editor | Syncfusion -description: Learn how to customize Markdown syntax in the Syncfusion Blazor Markdown Editor component, including formatting options, toolbar customization, and more. +title: Customize Markdown Syntax in Blazor Markdown Editor | Syncfusion® +description: Learn how to customize Markdown syntax in the Blazor Markdown Editor component, including formatting options, toolbar customization, and more. platform: Blazor control: MarkdownEditor documentation: ug diff --git a/blazor/markdown-editor/getting-started-webapp.md b/blazor/markdown-editor/getting-started-webapp.md index c62823177b..55295a42ba 100644 --- a/blazor/markdown-editor/getting-started-webapp.md +++ b/blazor/markdown-editor/getting-started-webapp.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion Markdown Editor in Blazor Web App -description: Check out the documentation for getting started with Syncfusion Blazor Markdown Editor Components in Blazor Web App. +title: Getting started with Markdown Editor in Blazor Web App | Syncfusion® +description: Check out the documentation for getting started with Blazor Markdown Editor Components in Blazor Web App. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Markdown Editor in Blazor Web App -This section explains how to integrate [Syncfusion® Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section explains how to integrate [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section explains how to integrate [Syncfusion&re ## Create a new Blazor Web App in Visual Studio -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): @@ -85,7 +85,7 @@ cd BlazorWebApp.Client N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install the following NuGet packages in your project: @@ -162,7 +162,7 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. @@ -178,7 +178,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. ## Add stylesheet and script resources @@ -194,7 +194,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A 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. -## Add Syncfusion® Blazor Markdown Editor component +## Add Blazor Markdown Editor component Add the Syncfusion Blazor Markdown Editor 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`). @@ -218,7 +218,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Markdown Editor component in the default web browser. +To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Blazor Markdown Editor component in the default web browser. N> When using the .NET CLI or Visual Studio Code, ensure that you run the application from the **server (host) project directory**, not from the `.Client` project. The client project does not run independently and is hosted by the server application. @@ -226,11 +226,11 @@ N> When using the .NET CLI or Visual Studio Code, ensure that you run the applic ## See also -* [Getting Started with Syncfusion® Blazor for Web app in .NET Core CLI](../getting-started/blazor-web-app-dotnet-cli) +* [Getting Started with Blazor for Web app in .NET Core CLI](../getting-started/blazor-web-app-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Web app](../getting-started/blazor-web-app) +* [Getting Started with Blazor for Web app](../getting-started/blazor-web-app) * [How to insert special characters](https://blazor.syncfusion.com/demos/rich-text-editor/insert-special-characters?theme=bootstrap5) diff --git a/blazor/markdown-editor/getting-started-with-server-app.md b/blazor/markdown-editor/getting-started-with-server-app.md index da62f72341..c154b097e1 100644 --- a/blazor/markdown-editor/getting-started-with-server-app.md +++ b/blazor/markdown-editor/getting-started-with-server-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion Markdown Editor in Blazor Server App -description: Check out the documentation for getting started with Syncfusion Blazor Markdown Editor Components in Blazor Server App. +title: Getting started with Markdown Editor in Server App | Syncfusion® +description: Check out the documentation for getting started with Blazor Markdown Editor Components in Blazor Server App. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Markdown Editor Component in Server App -This section briefly explains about how to include [Syncfusion® Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua ## Create a new Blazor App in Visual Studio Code -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). @@ -83,7 +83,7 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install the following NuGet packages in your project: @@ -158,9 +158,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. +Register the Blazor service in the **Program.cs** file of your Blazor Server App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -188,9 +188,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A 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 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 Blazor application. -## Add Syncfusion® Blazor Markdown Editor component +## Add Blazor Markdown Editor component -Add the Syncfusion® Blazor Markdown Editor 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. +Add the Blazor Markdown Editor 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. N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. @@ -212,17 +212,17 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Markdown Editor component in the default web browser. +To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Blazor Markdown Editor component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLxZIVksPOJhmrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.webp)" %} ## See also -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) * [Blog posting using Rich Text Editor](https://blazor.syncfusion.com/demos/rich-text-editor/usecase?theme=bootstrap5) diff --git a/blazor/markdown-editor/getting-started.md b/blazor/markdown-editor/getting-started.md index 146245afbf..902229f654 100644 --- a/blazor/markdown-editor/getting-started.md +++ b/blazor/markdown-editor/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Markdown Editor in Blazor | Syncfusion +title: Getting Started with Markdown Editor in Blazor | Syncfusion® description: Checkout and learn about getting started with the Markdown Editor in Blazor WebAssembly Application. platform: Blazor control: MarkdownEditor @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Markdown Editor in Blazor -This section briefly explains about how to include [Syncfusion® Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). N> Explore our [Blazor Markdown Editor](https://blazor.syncfusion.com/demos/markdown-editor/overview?theme=bootstrap5) example to knows how to render and configure the Markdown editor tools. @@ -25,7 +25,7 @@ N> Explore our [Blazor Markdown Editor](https://blazor.syncfusion.com/demos/mark ## Create a new Blazor App in Visual Studio -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. {% endtabcontent %} @@ -37,7 +37,7 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). @@ -85,7 +85,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install the following NuGet packages in your project: @@ -160,9 +160,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -190,9 +190,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A 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 the 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 the Blazor application. -## Add Syncfusion® Blazor Markdown Editor component +## Add Blazor Markdown Editor component -Add the Syncfusion® Blazor Markdown Editor component in the **~/Pages/Home.razor** file. +Add the Blazor Markdown Editor component in the **~/Pages/Home.razor** file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -209,17 +209,17 @@ Add the Syncfusion® Blazor Markdown Editor {% endhighlight %} {% endtabs %} -To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Syncfusion® Blazor Markdown Editor component in the default web browser. +To launch the application, press Ctrl+F5 in Visual Studio, run `dotnet run` from the CLI or integrated terminal in VS Code, or use the Run command in your preferred IDE to render the Blazor Markdown Editor component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LjLxZIVksPOJhmrP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Markdown Editor Component](./images/blazor-markdownteditor.webp)" %} ## See also -* [Getting Started with Syncfusion® Blazor for webassembly](../getting-started/blazor-webassembly-app) +* [Getting Started with Blazor for webassembly](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion® Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for client-side in .NET Core CLI](../getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for server-side in .NET Core CLI](../getting-started/blazor-server-side-dotnet-cli) * [How to insert special characters](https://blazor.syncfusion.com/demos/rich-text-editor/insert-special-characters?theme=bootstrap5) diff --git a/blazor/markdown-editor/how-to/retrieve-characters.md b/blazor/markdown-editor/how-to/retrieve-characters.md index 862fd71013..64e0d89dc0 100644 --- a/blazor/markdown-editor/how-to/retrieve-characters.md +++ b/blazor/markdown-editor/how-to/retrieve-characters.md @@ -1,6 +1,6 @@ --- layout: post -title: How to Get Character Count in Blazor Markdown Editor | Syncfusion +title: How to Get Character Count in Blazor Markdown Editor | Syncfusion® description: Checkout and learn about how to get character count of characters in Blazor Markdown Editor component of Syncfusion, and more details. platform: Blazor control: MarkdownEditor diff --git a/blazor/markdown-editor/how-to/retrieve-content.md b/blazor/markdown-editor/how-to/retrieve-content.md index 941e88dac4..cf136426e5 100644 --- a/blazor/markdown-editor/how-to/retrieve-content.md +++ b/blazor/markdown-editor/how-to/retrieve-content.md @@ -1,7 +1,7 @@ --- layout: post -title: How to Retrieve the Content in Blazor Markdown Editor | Syncfusion -description: Checkout and learn about how to retrieve the formatted content in Blazor Markdown Editor component of Syncfusion, and more details. +title: How to Retrieve the Content in Blazor Markdown Editor | Syncfusion® +description: Checkout and learn about how to retrieve the formatted content in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug diff --git a/blazor/markdown-editor/insert-image.md b/blazor/markdown-editor/insert-image.md index 99ded35e30..87e304281f 100644 --- a/blazor/markdown-editor/insert-image.md +++ b/blazor/markdown-editor/insert-image.md @@ -1,7 +1,7 @@ --- layout: post -title: Insert Image in Blazor Markdown Editor Component | Syncfusion -description: Checkout and learn here all about Insert Image in Syncfusion Blazor Markdown Editor component and more. +title: Insert Image in Blazor Markdown Editor Component | Syncfusion® +description: Checkout and learn here all about Insert Image in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # How to Insert Images in Blazor Markdown Editor Component -The Syncfusion® Blazor Markdown Editor allows users to insert images using the built-in toolbar. This feature supports embedding images from online sources directly into the editor content. +The Blazor Markdown Editor allows users to insert images using the built-in toolbar. This feature supports embedding images from online sources directly into the editor content. ## Steps to Insert an Image @@ -21,7 +21,7 @@ To insert an image in the Markdown Editor: The image will be added to the editor content at the current cursor position. -The following example demonstrates how to enable image insertion in the Syncfusion® Blazor Markdown Editor. +The following example demonstrates how to enable image insertion in the Blazor Markdown Editor. {% tabs %} {% highlight razor %} diff --git a/blazor/markdown-editor/insert-table.md b/blazor/markdown-editor/insert-table.md index 9876d43a66..b1c86d916d 100644 --- a/blazor/markdown-editor/insert-table.md +++ b/blazor/markdown-editor/insert-table.md @@ -1,7 +1,7 @@ --- layout: post -title: Insert Table in Blazor Markdown Editor Component | Syncfusion -description: Checkout and learn here all about Insert Table in Syncfusion Blazor Markdown Editor component and more. +title: Insert Table in Blazor Markdown Editor Component | Syncfusion® +description: Checkout and learn here all about Insert Table in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # How to Insert Table in Blazor Markdown Editor Component -The Syncfusion® Blazor Markdown Editor provides built-in support for inserting tables, allowing users to create and customize tables effortlessly within the editor. +The Blazor Markdown Editor provides built-in support for inserting tables, allowing users to create and customize tables effortlessly within the editor. ## Steps to Enable Table Insertion @@ -28,7 +28,7 @@ When a table is inserted, it includes: This default layout allows users to begin formatting and adding content immediately. -The following example demonstrates how to enable table insertion in the Syncfusion Blazor Markdown Editor. +The following example demonstrates how to enable table insertion in the Blazor Markdown Editor. {% tabs %} {% highlight razor %} diff --git a/blazor/markdown-editor/keyboard-support.md b/blazor/markdown-editor/keyboard-support.md index d2531fcf76..1c2fd61ce4 100644 --- a/blazor/markdown-editor/keyboard-support.md +++ b/blazor/markdown-editor/keyboard-support.md @@ -1,7 +1,7 @@ --- layout: post -title: Keyboard support in Markdown Editor Component | Syncfusion -description: Checkout and learn here all about Keyboard support in Syncfusion Blazor Markdown Editor component and more. +title: Keyboard support in Markdown Editor Component | Syncfusion® +description: Checkout and learn here all about Keyboard support in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -13,7 +13,7 @@ You can use the following keyboard shortcuts when the Rich Text Editor is set to ## Overview -The Syncfusion Blazor Markdown Editor supports a wide range of keyboard shortcuts to enhance productivity and streamline text editing. These shortcuts cover toolbar access, content formatting, insertion of elements, clipboard operations, and more. This guide provides a comprehensive list of available shortcuts for both Windows and Mac platforms. +The Blazor Markdown Editor supports a wide range of keyboard shortcuts to enhance productivity and streamline text editing. These shortcuts cover toolbar access, content formatting, insertion of elements, clipboard operations, and more. This guide provides a comprehensive list of available shortcuts for both Windows and Mac platforms. ## Toolbar diff --git a/blazor/markdown-editor/markdown-preview.md b/blazor/markdown-editor/markdown-preview.md index 01e82ef60d..c6dea87843 100644 --- a/blazor/markdown-editor/markdown-preview.md +++ b/blazor/markdown-editor/markdown-preview.md @@ -1,7 +1,7 @@ --- layout: post -title: Markdown preview in Blazor Markdown Editor Component | Syncfusion -description: Checkout and learn here all about Markdown preview in Syncfusion Blazor Markdown Editor component and more. +title: Markdown preview in Blazor Markdown Editor Component | Syncfusion® +description: Checkout and learn here all about Markdown preview in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,14 +9,14 @@ documentation: ug # Live Markdown Preview in Blazor Markdown Editor -The Syncfusion® Blazor Markdown Editor provides an instant Markdown to HTML preview, allowing users to visualize formatted content in real time as they type or edit Markdown text. This feature enhances the editing experience by making formatting changes immediately visible. +The Blazor Markdown Editor provides an instant Markdown to HTML preview, allowing users to visualize formatted content in real time as they type or edit Markdown text. This feature enhances the editing experience by making formatting changes immediately visible. ## Overview -The Syncfusion Blazor Markdown Editor includes a live preview panel that renders the Markdown content into HTML format. It helps users verify formatting such as headings, lists, links, and emphasis, ensuring that the final output appears correctly before publishing or saving. +The Blazor Markdown Editor includes a live preview panel that renders the Markdown content into HTML format. It helps users verify formatting such as headings, lists, links, and emphasis, ensuring that the final output appears correctly before publishing or saving. ## Enable Markdown Preview in Blazor Markdown Editor -To enable the Markdown preview feature, the `Markdig` package is used to convert Markdown content into HTML. The following example demonstrates how to enable Markdown-to-HTML preview in the Syncfusion® Blazor Markdown Editor. +To enable the Markdown preview feature, the `Markdig` package is used to convert Markdown content into HTML. The following example demonstrates how to enable Markdown-to-HTML preview in the Blazor Markdown Editor. {% tabs %} {% highlight razor %} diff --git a/blazor/markdown-editor/mention-support.md b/blazor/markdown-editor/mention-support.md index 9bbf366479..ddce3a9738 100644 --- a/blazor/markdown-editor/mention-support.md +++ b/blazor/markdown-editor/mention-support.md @@ -1,7 +1,7 @@ --- layout: post -title: Mention support in Blazor Markdown Editor Component | Syncfusion -description: Checkout and learn here all about Mention support in Syncfusion Blazor Markdown Editor component and more. +title: Mention support in Blazor Markdown Editor Component | Syncfusion® +description: Checkout and learn here all about Mention support in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -21,7 +21,7 @@ When a user types the `@` symbol followed by a character, the Markdown Editor di ## Configuring Mention Properties -The Syncfusion® Mention component provides several customizable properties to enhance the tagging experience: +The Mention component provides several customizable properties to enhance the tagging experience: * [AllowSpaces](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_AllowSpaces) - Allow to continue search action if user enter space after mention character while searching. * [SuggestionCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfMention-1.html#Syncfusion_Blazor_DropDowns_SfMention_1_SuggestionCount) - The maximum number of items that will be displayed in the suggestion list. diff --git a/blazor/markdown-editor/supported-markdown.md b/blazor/markdown-editor/supported-markdown.md index 077ecf3666..b25721d664 100644 --- a/blazor/markdown-editor/supported-markdown.md +++ b/blazor/markdown-editor/supported-markdown.md @@ -1,7 +1,7 @@ --- layout: post -title: Markdown Syntax Supported in Blazor Editor Component | Syncfusion -description: Checkout and learn here all about Supported Markdown Syntax in Syncfusion Blazor Markdown Editor component and more. +title: Markdown Syntax Supported in Blazor Editor Component | Syncfusion® +description: Checkout and learn here all about Supported Markdown Syntax in Blazor Markdown Editor component and more. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,11 +9,11 @@ documentation: ug # Supported Markdown Syntax in Blazor Markdown Editor Component -The Syncfusion® [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor/wysiwyg-markdown-editor) supports a wide range of Markdown syntax for formatting text, creating lists, inserting links and images, and more. This guide provides a comprehensive reference to all supported Markdown commands, their syntax, and usage. +The [Blazor Markdown Editor](https://www.syncfusion.com/blazor-components/blazor-rich-text-editor/wysiwyg-markdown-editor) supports a wide range of Markdown syntax for formatting text, creating lists, inserting links and images, and more. This guide provides a comprehensive reference to all supported Markdown commands, their syntax, and usage. ## Markdown Syntax Guide for Blazor Markdown Editor -The following table lists the Markdown commands supported by the Syncfusion® Blazor Markdown Editor: +The following table lists the Markdown commands supported by the Blazor Markdown Editor: |Commands|Syntax| Description | |--------|------------------------------------------|------------| @@ -44,4 +44,4 @@ The following table lists the Markdown commands supported by the SyncfusionExample:
`\**`Bold text`**`| | HTML Entities | Copyright: © - `©`
Trade mark: ™ - `™`
Registered: ® - `®`
Ampersand: & - `&`
Less than: < - `<`
Greater than: > - `>` | For HTML entities, add & and ; to the front and back of the respective entities. | -N> Only the listed commands are supported in the Syncfusion® Markdown Editor. For unsupported features such as footnotes, definitions, math, and checklists, consider using HTML tags directly within the editor. +N> Only the listed commands are supported in the Markdown Editor. For unsupported features such as footnotes, definitions, math, and checklists, consider using HTML tags directly within the editor. diff --git a/blazor/markdown-editor/toolbar.md b/blazor/markdown-editor/toolbar.md index 42d47e5b62..808108a2e8 100644 --- a/blazor/markdown-editor/toolbar.md +++ b/blazor/markdown-editor/toolbar.md @@ -1,7 +1,7 @@ --- layout: post -title: Toolbar Configuration in Blazor Markdown Editor Component | Syncfusion -description: Checkout and learn here all about Toolbar Configuration in Syncfusion Blazor Markdown Editor component and more. +title: Toolbar Configuration in Blazor Markdown Editor | Syncfusion® +description: Checkout and learn here all about Toolbar Configuration in Blazor Markdown Editor component and much more details. platform: Blazor control: MarkdownEditor documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Toolbar configuration in Markdown Editor Component -The Syncfusion® Blazor Markdown Editor provides a flexible toolbar that enhances the editing experience. Users can choose from multiple toolbar layouts, enable sticky behavior, and add custom tools based on their application requirements. This guide explains the available toolbar types, configuration options, and customization techniques. +The Blazor Markdown Editor provides a flexible toolbar that enhances the editing experience. Users can choose from multiple toolbar layouts, enable sticky behavior, and add custom tools based on their application requirements. This guide explains the available toolbar types, configuration options, and customization techniques. ## Default toolbar items @@ -21,7 +21,7 @@ These default items provide essential text editing features, including text form ## Type of toolbar -The Syncfusion® Markdown Editor allows you to configure different type of toolbars using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Type) property of the [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings). +The Blazor Markdown Editor allows you to configure different type of toolbars using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings_Type) property of the [RichTextEditorToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.RichTextEditor.RichTextEditorToolbarSettings.html#Syncfusion_Blazor_RichTextEditor_RichTextEditorToolbarSettings). The available toolbar types are: diff --git a/blazor/mcp-server/agentic-ui-builder/getting-started.md b/blazor/mcp-server/agentic-ui-builder/getting-started.md index 8ca4ffe21c..161ece8f41 100644 --- a/blazor/mcp-server/agentic-ui-builder/getting-started.md +++ b/blazor/mcp-server/agentic-ui-builder/getting-started.md @@ -1,8 +1,8 @@ --- layout: post -title: Getting Started with Blazor Agentic UI Builder | Syncfusion -description: Learn how to set up and use the Syncfusion Blazor UI Builder MCP Server for AI-powered assistance in building Blazor applications with Syncfusion components. -control: Getting started with Syncfusion Blazor UI Builder MCP Server +title: Getting Started with Blazor Agentic UI Builder | Syncfusion® +description: Learn how to set up and use the Blazor UI Builder MCP Server for AI-powered assistance in building Blazor applications with components. +control: Getting started with Blazor UI Builder MCP Server platform: blazor documentation: ug domainurl: ##DomainURL## @@ -10,28 +10,28 @@ domainurl: ##DomainURL## # Getting Started with Agentic UI Builder -The **Syncfusion® Blazor UI Builder** uses AI to help you build Blazor applications with natural language commands. Simply describe what you want to create, and it generates complete UI implementations with Syncfusion components. +The **Blazor UI Builder** uses AI to help you build Blazor applications with natural language commands. Simply describe what you want to create, and it generates complete UI implementations with Blazor components. ## Prerequisites Before you begin, ensure you have: * Required [Node.js](https://nodejs.org/en/) version >= 18 -* A **compatible MCP client** (VS Code, Visual Studio, Syncfusion® Code Studio, Cursor, etc.) -* Active [Syncfusion® API key](https://syncfusion.com/account/api-key) +* A **compatible MCP client** (VS Code, Visual Studio, Code Studio, Cursor, etc.) +* Active [API key](https://syncfusion.com/account/api-key) * Blazor application (existing or new); see [Quick Start](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -* Active Syncfusion® license (any of the following): +* Active license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) ## Installation -This section guides you through installing and configuring the Syncfusion MCP Server in your development environment. +This section guides you through installing and configuring the MCP Server in your development environment. ### Getting your API Key -Before proceeding with the MCP installation, generate your Syncfusion API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: +Before proceeding with the MCP installation, generate your API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: ```json "env": { @@ -187,7 +187,7 @@ Provides a catalog of pre-built, responsive UI layout templates and blocks for c ### Component Tool (`#sf_blazor_component`) -Provides quick reference guidelines for Syncfusion Blazor components, including properties, event handlers, methods, and usage examples. +Provides quick reference guidelines for Blazor components, including properties, event handlers, methods, and usage examples. **When to use:** To get basic component API information and structure details for implementing specific components correctly. @@ -198,13 +198,13 @@ Provides quick reference guidelines for Syncfusion Blazor components, including ### Style Tool (`#sf_blazor_style`) -Provides theme configuration, styling setup, and icon integration for Syncfusion Blazor components. Supports multiple themes (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), light/dark mode implementation, and icon patterns for consistent UI styling. +Provides theme configuration, styling setup, and icon integration for Blazor components. Supports multiple themes (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), light/dark mode implementation, and icon patterns for consistent UI styling. **When to use:** To apply themes, customize colors, modify the visual design of components, or integrate icons into your UI. **Example:** ``` -#sf_blazor_style How do I apply the Syncfusion Tailwind 3 dark theme and add a communication icon inside a button? +#sf_blazor_style How do I apply the Tailwind 3 dark theme and add a communication icon inside a button? ``` ## Best Practices @@ -229,7 +229,7 @@ If you encounter issues during installation or while using the MCP server, refer |-------|----------| | **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues | | **Server failed to start** | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE | -| **Invalid API key** | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) | +| **Invalid API key** | Verify your key is active at [Account Page](https://syncfusion.com/account/api-key) | | **Incorrect API key config** | For the file path: Verify file location and content. For inline key: Check key is properly updated | | **Wrong config file location** | VS Code: `.vscode/mcp.json`
CodeStudio: `.codestudio/mcp.json`
Cursor: `.cursor/mcp.json` in the workspace root | | **Check IDE logs** | VS Code/CodeStudio: Output panel → "MCP" • Cursor: Developer Console for MCP errors | @@ -240,4 +240,4 @@ Now that you've set up the Agentic UI Builder, explore these resources: * **[Prompt Library](./prompt-library)** - Ready-to-use prompts for common scenarios * **[Showcase Sample Projects](https://www.syncfusion.com/showcase-apps/blazor)** - Full application examples -* **[Component Examples](https://blazor.syncfusion.com/demos/)** - Interactive demos of all Syncfusion Blazor components +* **[Component Examples](https://blazor.syncfusion.com/demos/)** - Interactive demos of all Blazor components diff --git a/blazor/mcp-server/agentic-ui-builder/prompt-library.md b/blazor/mcp-server/agentic-ui-builder/prompt-library.md index f8f4eded00..94078ff1b3 100644 --- a/blazor/mcp-server/agentic-ui-builder/prompt-library.md +++ b/blazor/mcp-server/agentic-ui-builder/prompt-library.md @@ -1,8 +1,8 @@ --- layout: post -title: Blazor Agentic UI Builder Prompt Library | Syncfusion +title: Blazor Agentic UI Builder Prompt Library | Syncfusion® description: Explore the Agentic UI Builder Prompt Library to enhance Blazor productivity with layout blocks, component guidance, styling, and icons. -control: Syncfusion Blazor Agentic UI Builder Prompt Library +control: Blazor Agentic UI Builder Prompt Library platform: blazor documentation: ug domainurl: ##DomainURL## @@ -14,7 +14,7 @@ Speed up Blazor development with ready-made prompts for common scenarios. Use th ## How to Use -Ensure that the Syncfusion MCP Server is configured and running before executing prompts. +Ensure that the MCP Server is configured and running before executing prompts. * Select a prompt that aligns with your development requirements. * Copy the complete prompt, including the tool (e.g., #sf_blazor_ui_builder). @@ -72,7 +72,7 @@ The Layout tool orchestrates page structure, element positioning, and responsive ### Component Tool -The Component tool implements specific Syncfusion Blazor components with configured properties and event handlers. Use #sf_blazor_component for targeted component integration. +The Component tool implements specific Blazor components with configured properties and event handlers. Use #sf_blazor_component for targeted component integration. {% promptcards %} {% promptcard Advanced Data Grid Setup %} @@ -95,16 +95,16 @@ The Styling tool applies custom themes, color schemes, visual treatments, and ic {% promptcards %} {% promptcard Tailwind3 Dark Mode Setup %} -#sf_blazor_style Apply the Syncfusion Tailwind 3 dark theme to the application. Configure CSS variables for the dark mode color scheme and enable theme toggle functionality. +#sf_blazor_style Apply the Tailwind 3 dark theme to the application. Configure CSS variables for the dark mode color scheme and enable theme toggle functionality. {% endpromptcard %} {% promptcard Bootstrap5.3 Theme Customization %} -#sf_blazor_style Customize the Syncfusion Bootstrap 5.3 theme using CSS variables. Modify primary colors, component spacing, and typography to match brand guidelines. +#sf_blazor_style Customize the Bootstrap 5.3 theme using CSS variables. Modify primary colors, component spacing, and typography to match brand guidelines. {% endpromptcard %} {% promptcard Fluent2 Responsive Styling %} -#sf_blazor_style Apply the Syncfusion Fluent 2 theme with responsive adjustments. Customize component sizes, spacing, and layout breakpoints for mobile, tablet, and desktop views. +#sf_blazor_style Apply the Fluent 2 theme with responsive adjustments. Customize component sizes, spacing, and layout breakpoints for mobile, tablet, and desktop views. {% endpromptcard %} {% promptcard Material3 CSS Variables %} -#sf_blazor_style Configure the Syncfusion Material 3 theme CSS variables for a custom color palette, elevation shadows, border radius, and component-specific styling properties. +#sf_blazor_style Configure the Material 3 theme CSS variables for a custom color palette, elevation shadows, border radius, and component-specific styling properties. {% endpromptcard %} {% promptcard User Actions & Navigation %} #sf_blazor_style Add appropriate icons for common user interactions in the application toolbar, including editing capabilities, navigation controls, and accessing various options. diff --git a/blazor/mcp-server/ai-coding-assistant/getting-started.md b/blazor/mcp-server/ai-coding-assistant/getting-started.md index 7c9025b26b..8891c328dd 100644 --- a/blazor/mcp-server/ai-coding-assistant/getting-started.md +++ b/blazor/mcp-server/ai-coding-assistant/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with the AI Coding Assistant for Blazor | Syncfusion +title: Getting Started with the AI Coding Assistant for Blazor | Syncfusion® description: Learn how to configure and use AI Coding Assistant for intelligent code generation, documentation, and troubleshooting in Blazor apps. control: Getting Started with the AI Coding Assistant platform: blazor @@ -10,28 +10,28 @@ domainurl: ##DomainURL## # Getting Started with the AI Coding Assistant -The **Syncfusion® AI Coding Assistant** is designed to streamline the development workflow for Blazor applications that use Syncfusion® components. It leverages contextual knowledge of the Syncfusion component library to generate code snippets, configuration examples, and guided explanations—reducing documentation lookups and increasing productivity. +The **AI Coding Assistant** is designed to streamline the development workflow for Blazor applications that use Blazor components. It leverages contextual knowledge of the Blazor component library to generate code snippets, configuration examples, and guided explanations—reducing documentation lookups and increasing productivity. ## Prerequisites Before you begin, ensure you have: * Required [Node.js](https://nodejs.org/en/) version >= 18 -* A **compatible MCP client** (VS Code, Visual Studio, Syncfusion® Code Studio, Cursor, etc.) -* Active [Syncfusion® API key](https://syncfusion.com/account/api-key) +* A **compatible MCP client** (VS Code, Visual Studio, Code Studio, Cursor, etc.) +* Active [API key](https://syncfusion.com/account/api-key) * Blazor application (existing or new); see [Quick Start](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) -* Active Syncfusion® license (any of the following): +* Active license (any of the following): - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) - [Free Community License](https://www.syncfusion.com/products/communitylicense) - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) ## Installation -This section guides you through installing and configuring the Syncfusion MCP Server in your development environment. +This section guides you through installing and configuring the MCP Server in your development environment. ### Getting your API Key -Before proceeding with the MCP installation, generate your Syncfusion API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: +Before proceeding with the MCP installation, generate your API key from the [API Key page](https://www.syncfusion.com/account/api-key) and store it in a `.txt` or `.key` file: ```json "env": { @@ -161,7 +161,7 @@ Create a `.cursor/mcp.json` file in your workspace with the MCP server configura Activate the AI Coding Assistant in your IDE by using the `#sf_blazor_assistant` command followed by your query: ``` -#sf_blazor_assistant How do I enable paging and sorting in the Syncfusion Blazor Grid? +#sf_blazor_assistant How do I enable paging and sorting in the Blazor Grid? ``` @@ -176,7 +176,7 @@ Activate the AI Coding Assistant in your IDE by using the `#sf_blazor_assistant` ### Best Practices -1. **Be Specific**: Include platform and component (e.g., "Create a Syncfusion Blazor Grid with paging and filtering"). +1. **Be Specific**: Include platform and component (e.g., "Create a Blazor Grid with paging and filtering"). 2. **Provide Context**: Share versions, desired behavior, and constraints. 3. **Use Descriptive Queries**: Avoid vague questions. 4. **Troubleshooting**: Use AI suggestions for common issues; consult official [documentation](https://blazor.syncfusion.com/documentation) or [support](https://support.syncfusion.com/support/tickets/create) for complex problems. @@ -192,7 +192,7 @@ If you encounter issues during installation or while using the MCP server, refer |-------|----------| | **Clear npm cache** | Run `npx clear-npx-cache` and restart your IDE to resolve package caching issues | | **Server failed to start** | Update to Node.js 18+, verify JSON syntax in config file, and restart your IDE | -| **Invalid API key** | Verify your key is active at [Syncfusion Account Page](https://syncfusion.com/account/api-key) | +| **Invalid API key** | Verify your key is active at [Account Page](https://syncfusion.com/account/api-key) | | **Incorrect API key config** | For the file path: Verify file location and content. For inline key: Check key is properly updated | | **Wrong config file location** | VS Code: `.vscode/mcp.json`
CodeStudio: `.codestudio/mcp.json`
Cursor: `.cursor/mcp.json` in the workspace root | | **Check IDE logs** | VS Code/CodeStudio: Output panel → "MCP" • Cursor: Developer Console for MCP errors | @@ -202,5 +202,5 @@ If you encounter issues during installation or while using the MCP server, refer Now that you've set up the AI Coding Assistant, explore these resources: * **[Prompt Library](./prompt-library)** - Ready-to-use prompts for common scenarios -* **[Component Examples](https://blazor.syncfusion.com/demos/)** - Interactive demos of all Syncfusion Blazor components +* **[Component Examples](https://blazor.syncfusion.com/demos/)** - Interactive demos of all Blazor components * **[API Documentation](https://help.syncfusion.com/cr/blazor)** - Complete API reference diff --git a/blazor/mcp-server/ai-coding-assistant/prompt-library.md b/blazor/mcp-server/ai-coding-assistant/prompt-library.md index 0ffb0280e4..5bb3fbedd5 100644 --- a/blazor/mcp-server/ai-coding-assistant/prompt-library.md +++ b/blazor/mcp-server/ai-coding-assistant/prompt-library.md @@ -1,8 +1,8 @@ --- layout: post -title: Syncfusion AI Coding Assistant Prompt Library | Syncfusion +title: AI Coding Assistant Prompt Library | Syncfusion® description: Explore the AI Coding Assistant Prompt Library to enhance Blazor development productivity with code generation, configuration examples, and contextual guidance. -control: Syncfusion AI Coding Assistant Prompt Library +control: AI Coding Assistant Prompt Library platform: Blazor documentation: ug domainurl: ##DomainURL## @@ -10,7 +10,7 @@ domainurl: ##DomainURL## # Prompt Library - AI Coding Assistant -Speed up your Blazor projects using these ready-made prompts for popular Syncfusion components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. +Speed up your Blazor projects using these ready-made prompts for popular components. Each prompt is short, easy to understand, and focused on real tasks—like quick setups, tweaks, and fixes. ## How to use @@ -26,17 +26,17 @@ Before starting, make sure your MCP Server is set up and running. ### Grid -The Syncfusion Blazor Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. +The Blazor Data Grid delivers fast, flexible tables for large datasets with built-in interactivity. {% promptcards %} {% promptcard Paging and Sorting %} -#sf_blazor_assistant How do I enable paging and sorting in the Syncfusion Blazor Grid? +#sf_blazor_assistant How do I enable paging and sorting in the Blazor Grid? {% endpromptcard %} {% promptcard Grouping and Filtering %} #sf_blazor_assistant Show me an example of grouping and filtering data in the Grid component. {% endpromptcard %} {% promptcard CRUD Operations %} -#sf_blazor_assistant What’s the code to implement full CRUD operations in Syncfusion Blazor Grid? +#sf_blazor_assistant What’s the code to implement full CRUD operations in Blazor Grid? {% endpromptcard %} {% promptcard Grid Export to PDF and Excel %} #sf_blazor_assistant How can I add PDF and Excel export options to the Grid toolbar? @@ -48,7 +48,7 @@ The Syncfusion Blazor Data Grid delivers fast, flexible tables for large dataset #sf_blazor_assistant Create a multicolumn Grid to display product details with sorting and filtering. {% endpromptcard %} {% promptcard Chat Integration %} -#sf_blazor_assistant How can I integrate a chat widget inside each row of the Syncfusion Grid? +#sf_blazor_assistant How can I integrate a chat widget inside each row of the Grid? {% endpromptcard %} {% promptcard Advanced Grid Features %} #sf_blazor_assistant Show me a Grid with paging, sorting, grouping, filtering, and virtual scrolling @@ -69,17 +69,17 @@ The Syncfusion Blazor Data Grid delivers fast, flexible tables for large dataset ### Chart -The Syncfusion Blazor Chart suite offers versatile visualization tools across various series types for insightful data representation. +The Blazor Chart suite offers versatile visualization tools across various series types for insightful data representation. {% promptcards %} {% promptcard Local and Remote Data %} -#sf_blazor_assistant How do I bind both local and remote data sources to a Syncfusion Chart? +#sf_blazor_assistant How do I bind both local and remote data sources to a Chart? {% endpromptcard %} {% promptcard Range Selection %} -#sf_blazor_assistant Show me how to enable range selection in a Syncfusion Blazor Chart. +#sf_blazor_assistant Show me how to enable range selection in a Blazor Chart. {% endpromptcard %} {% promptcard Chart Types Overview %} -#sf_blazor_assistant What chart types are available in Syncfusion Blazor Chart and how to configure them? +#sf_blazor_assistant What chart types are available in Blazor Chart and how to configure them? {% endpromptcard %} {% promptcard Markers and Data Labels %} #sf_blazor_assistant How can I display markers and data labels on a line chart? @@ -88,19 +88,19 @@ The Syncfusion Blazor Chart suite offers versatile visualization tools across va #sf_blazor_assistant Add custom annotations to highlight specific data points in a chart. {% endpromptcard %} {% promptcard Chart Export to Image or PDF %} -#sf_blazor_assistant How do I export a Syncfusion Chart to PDF or image format? +#sf_blazor_assistant How do I export a Chart to PDF or image format? {% endpromptcard %} {% promptcard Print Support %} -#sf_blazor_assistant Enable print functionality for a Syncfusion Blazor Chart component. +#sf_blazor_assistant Enable print functionality for a Blazor Chart component. {% endpromptcard %} {% promptcard Dynamic Chart with Remote Data %} #sf_blazor_assistant Create a chart that updates dynamically with remote API data. {% endpromptcard %} {% promptcard Multiple Series Types %} -#sf_blazor_assistant How do I combine bar and line chart types in a single Syncfusion Chart? +#sf_blazor_assistant How do I combine bar and line chart types in a single Chart? {% endpromptcard %} {% promptcard Troubleshooting Chart Data Binding %} -#sf_blazor_assistant Why isn’t my remote data showing up in the Syncfusion Chart? +#sf_blazor_assistant Why isn’t my remote data showing up in the Chart? {% endpromptcard %} {% promptcard Interactive Range Selector %} #sf_blazor_assistant Configure a range selector for zooming and filtering in a time-series chart. @@ -112,7 +112,7 @@ The Syncfusion Blazor Chart suite offers versatile visualization tools across va ### Schedule -The Syncfusion Blazor Schedule component helps manage events, resources, and timelines with powerful views and customization. +The Blazor Schedule component helps manage events, resources, and timelines with powerful views and customization. {% promptcards %} {% promptcard Remote Data Binding %} @@ -125,7 +125,7 @@ The Syncfusion Blazor Schedule component helps manage events, resources, and tim #sf_blazor_assistant Enable virtual scrolling for large event datasets in the Schedule view. {% endpromptcard %} {% promptcard Timezone Support %} -#sf_blazor_assistant How can I configure timezone support in the Syncfusion Blazor Schedule? +#sf_blazor_assistant How can I configure timezone support in the Blazor Schedule? {% endpromptcard %} {% promptcard Export Schedule to PDF or Excel %} #sf_blazor_assistant Add export functionality to download the Schedule view as PDF or Excel. @@ -146,11 +146,11 @@ The Syncfusion Blazor Schedule component helps manage events, resources, and tim ### Kanban -The Syncfusion Blazor Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. +The Blazor Kanban organizes tasks in columns with drag-and-drop, swimlanes, and templating for agile workflows. {% promptcards %} {% promptcard Data Binding %} -#sf_blazor_assistant How do I bind local or remote data to the Syncfusion Blazor Kanban board? +#sf_blazor_assistant How do I bind local or remote data to the Blazor Kanban board? {% endpromptcard %} {% promptcard Sorting %} #sf_blazor_assistant Enable sorting of cards within columns in the Kanban component. @@ -189,11 +189,11 @@ The Syncfusion Blazor Kanban organizes tasks in columns with drag-and-drop, swim ### RichTextEditor -The Syncfusion Blazor RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. +The Blazor RichTextEditor offers a modern WYSIWYG editor with extensive formatting, media, and integration features. {% promptcards %} {% promptcard Toolbar Configuration %} -#sf_blazor_assistant How do I customize the toolbar options in the Syncfusion RichTextEditor? +#sf_blazor_assistant How do I customize the toolbar options in the RichTextEditor? {% endpromptcard %} {% promptcard Link Manipulation %} #sf_blazor_assistant Show me how to add, edit, and remove hyperlinks in RichTextEditor content. @@ -223,11 +223,11 @@ The Syncfusion Blazor RichTextEditor offers a modern WYSIWYG editor with extensi ### Calendar -The Syncfusion Blazor Calendar supports flexible date selection, localization, and custom rendering. +The Blazor Calendar supports flexible date selection, localization, and custom rendering. {% promptcards %} {% promptcard Date Range Selection %} -#sf_blazor_assistant How do I enable date range selection in the Syncfusion Blazor Calendar? +#sf_blazor_assistant How do I enable date range selection in the Blazor Calendar? {% endpromptcard %} {% promptcard Globalization Support %} #sf_blazor_assistant Configure the Calendar to support multiple cultures and languages. diff --git a/blazor/mcp-server/overview.md b/blazor/mcp-server/overview.md index e8922d4d75..fa931fdb2e 100644 --- a/blazor/mcp-server/overview.md +++ b/blazor/mcp-server/overview.md @@ -1,14 +1,14 @@ --- layout: post -title: AI and Smart Tooling for Blazor Development | Syncfusion -description: Accelerate Blazor development with Syncfusion MCP Server - instant access to component APIs, UI blocks, themes, and 600+ icons via MCP in your IDE. -control: Syncfusion Blazor MCP Server Overview +title: AI and Smart Tooling for Blazor Development | Syncfusion® +description: Accelerate Blazor development with MCP Server - instant access to component APIs, UI blocks, themes, and 600+ icons via MCP in your IDE. +control: Blazor MCP Server Overview platform: blazor documentation: ug domainurl: ##DomainURL## --- -# Syncfusion MCP Server Overview +# Overview of MCP Server for Blazor Components Syncfusion's MCP Server accelerate Blazor application development by providing deep context-aware knowledge directly in your AI-powered IDE. Through Model Context Protocol (MCP) integration, you get instant access to component APIs, pre-built UI blocks, styling configurations, icon libraries, and code generation - all without leaving your development environment. @@ -25,7 +25,7 @@ Use these tools to speed up development and follow best practices when building ## How it works -Syncfusion MCP Server are delivered as an npm-based Model Context Protocol (MCP) server that integrates seamlessly with AI-powered development environments. The server provides two specialized modes tailored to different development workflows: +MCP Server are delivered as an npm-based Model Context Protocol (MCP) server that integrates seamlessly with AI-powered development environments. The server provides two specialized modes tailored to different development workflows: **Agentic UI Builder** (`#sf_blazor_ui_builder`) Build complete UIs with coordinated tools for layout, components, styling, and icons. Perfect for creating pages, dashboards, and complex sections from scratch. @@ -43,13 +43,13 @@ For detailed setup instructions, see the [Installation Guide](installation). ## Available Tools -Syncfusion MCP Server includes five specialized tools that work together to streamline your development workflow: +MCP Server includes five specialized tools that work together to streamline your development workflow: * **UI Builder Orchestrator** - Analyzes requirements and coordinates multiple tools to build complete UIs * **Layout Tool** - Provides pre-built, responsive UI blocks (headers, footers, sidebars, dashboards, forms) -* **Component Tool** - Delivers API and implementation guidance for Syncfusion Blazor components +* **Component Tool** - Delivers API and implementation guidance for Blazor components * **Styling Tool** - Generates theme configurations for Tailwind CSS, Bootstrap, Material, and Fluent with light/dark mode support, and also provides a comprehensive icon library with component‑level integration patterns and accessibility guidance. -* **Coding Assistant Tool** - Provides contextual component documentation, code snippets, and configuration examples for individual Syncfusion Blazor components +* **Coding Assistant Tool** - Provides contextual component documentation, code snippets, and configuration examples for individual Blazor components ## Unlimited Access @@ -70,11 +70,11 @@ For optimal results, use high-performance AI models like **Claude Sonnet 4.5** ( ## Privacy & Security -The Syncfusion MCP Server are designed with privacy considerations: +The MCP Server are designed with privacy considerations: * The tools do not access project files or workspace contents directly. * User prompts are not stored or used for other purposes. -* Prompts are not used to train Syncfusion models. +* Prompts are not used to train models. * The assistant provides context; the final output is produced by the selected AI model. The MCP Server acts purely as a knowledge bridge, connecting your AI model with Syncfusion-specific expertise while respecting your privacy and maintaining security. diff --git a/blazor/mcp-server/release-notes.md b/blazor/mcp-server/release-notes.md index 618f0de4fd..c1460be4b4 100644 --- a/blazor/mcp-server/release-notes.md +++ b/blazor/mcp-server/release-notes.md @@ -1,4 +1,4 @@ -# Syncfusion Blazor MCP Server Release Notes +# Blazor MCP Server Release Notes This document provides information about the changes and new features included in each version of the [@syncfusion/blazor-assistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) MCP server package. @@ -9,7 +9,7 @@ This document provides information about the changes and new features included i - Introduced **Agentic UI Builder** — a composite MCP tool that analyzes your UI requirements and coordinates specialized tools (Layout, Component, and Styling) to generate complete Blazor applications using natural language prompts, significantly boosting your productivity and accelerating development workflow. - Agentic UI Builder sub-tools: - **Layout Tool** (#sf_blazor_layout) — Generates responsive UI blocks, grids, dashboards, and pre-built patterns. - - **Component Tool** (#sf_blazor_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Syncfusion Blazor components. + - **Component Tool** (#sf_blazor_component) — Provides full metadata, APIs, props, events, and configuration for 145+ Blazor components. - **Styling Tool** (#sf_blazor_style) — Applies theme configurations (Tailwind3 CSS, Bootstrap 5.3, Material 3, Fluent 2), dark mode, color customization, and icon integration. - Unlimited, unrestricted access with strict privacy (no project file access, no prompt storage or training). @@ -34,6 +34,6 @@ This document provides information about the changes and new features included i ### Features -- Initial release of AI Coding Assistant for Syncfusion Blazor components. -- Provides context-aware assistance for building Blazor applications with Syncfusion components. +- Initial release of AI Coding Assistant for Blazor components. +- Provides context-aware assistance for building Blazor applications with Blazor components. - Includes support for component APIs, properties, and troubleshooting guidance. diff --git a/blazor/media-query/break-points.md b/blazor/media-query/break-points.md index f1862a7ec0..bacdbb728e 100644 --- a/blazor/media-query/break-points.md +++ b/blazor/media-query/break-points.md @@ -1,7 +1,7 @@ --- layout: post -title: Breakpoints in Blazor Media Query Component | Syncfusion -description: Checkout and learn here all about Breakpoints in Syncfusion Blazor Media Query component and much more details. +title: Breakpoints in Blazor Media Query Component | Syncfusion® +description: Checkout and learn here all about Breakpoints in Blazor Media Query component and much more details. platform: Blazor control: Media Query documentation: ug diff --git a/blazor/media-query/getting-started-webapp.md b/blazor/media-query/getting-started-webapp.md index 671f040b7c..5edcfe417c 100644 --- a/blazor/media-query/getting-started-webapp.md +++ b/blazor/media-query/getting-started-webapp.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion Media Query in Blazor Web App -description: Check out the documentation for getting started with Syncfusion Blazor Media Query Components in Blazor Web App. +title: Getting Started with Media Query in Blazor Web App | Syncfusion® +description: Check out the documentation for getting started with Blazor Media Query Components in Blazor Web App. platform: Blazor control: Media Query documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting started with Blazor Media Query in Blazor Web App -This section briefly explains about how to include [Syncfusion® Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https: ## Create a new Blazor Web App in Visual Studio Code -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): @@ -85,7 +85,7 @@ cd BlazorWebApp.Client N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.Core](https://www.nuget.org/packages/Syncfusion.Blazor.Core) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -116,9 +116,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +Register the Blazor service in the **Program.cs** file of your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -132,7 +132,7 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. ## Add stylesheet and script resources @@ -148,9 +148,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A 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. -## Add Syncfusion® Blazor Media Query component +## Add Blazor Media Query component -Add the Syncfusion® Blazor Media Query 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`). +Add the Blazor Media Query 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`). N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. @@ -391,7 +391,7 @@ else {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Media Query component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Media Query component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBzXMKtikurjnwB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.png)" %} @@ -399,6 +399,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file diff --git a/blazor/media-query/getting-started-with-server-app.md b/blazor/media-query/getting-started-with-server-app.md index c5856bf346..13e7e4af4a 100644 --- a/blazor/media-query/getting-started-with-server-app.md +++ b/blazor/media-query/getting-started-with-server-app.md @@ -1,7 +1,7 @@ --- layout: post -title: Getting started with Syncfusion Media Query in Blazor Server App -description: Check out the documentation for getting started with Syncfusion Blazor Media Query Components in Blazor Server App. +title: Getting started Blazor Media Query in Blazor Server App | Syncfusion® +description: Check out the documentation for getting started with Blazor Media Query Components in Blazor Server App. platform: Blazor control: Media Query documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Media Query Component in Blazor Server App -This section briefly explains about how to include [Syncfusion® Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor Server App** by using the **Blazor Web App** template in Visua ## Create a new Blazor App in Visual Studio Code -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). @@ -83,7 +83,7 @@ cd BlazorApp N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.Core](https://www.nuget.org/packages/Syncfusion.Blazor.Core/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -112,9 +112,9 @@ After the package is installed, open the **~/_Imports.razor** file and import th {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor Server App. +Register the Blazor service in the **Program.cs** file of your Blazor Server App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -142,9 +142,9 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A 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 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 Blazor application. -## Add Syncfusion® Blazor Media Query component +## Add Blazor Media Query component -Add the Syncfusion® Blazor Media Query 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. +Add the Blazor Media Query 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. N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. @@ -385,7 +385,7 @@ else {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Media Query component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Media Query component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBzXMKtikurjnwB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.png)" %} @@ -393,5 +393,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file diff --git a/blazor/media-query/getting-started.md b/blazor/media-query/getting-started.md index 39c2089be7..9af89015d3 100644 --- a/blazor/media-query/getting-started.md +++ b/blazor/media-query/getting-started.md @@ -1,6 +1,6 @@ --- layout: post -title: Getting Started with Blazor Media Query Component | Syncfusion +title: Getting Started Blazor Media Query in Blazor WASM App | Syncfusion® description: Checkout and learn about getting started with Blazor Media Query component in Blazor WebAssembly Application. platform: Blazor control: Media Query @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Media Query Component -This section briefly explains about how to include [Syncfusion® Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). {% tabcontents %} @@ -21,7 +21,7 @@ This section briefly explains about how to include [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. {% endtabcontent %} @@ -33,7 +33,7 @@ Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates ## Create a new Blazor App in Visual Studio Code -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). @@ -81,7 +81,7 @@ cd BlazorApp {% endtabcontents %} -## Install Syncfusion® Blazor packages +## Install required Blazor packages Install [Syncfusion.Blazor.Core](https://www.nuget.org/packages/Syncfusion.Blazor.Core/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. @@ -110,9 +110,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -138,9 +138,9 @@ The theme stylesheet can be accessed from NuGet through [Static Web Assets](http 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 the Blazor application. -## Add Syncfusion® Blazor Media Query component +## Add Blazor Media Query component -Add the Syncfusion® Blazor Media Query component in the **~/Pages/Index.razor** file. +Add the Blazor Media Query component in the **~/Pages/Index.razor** file. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -370,12 +370,12 @@ else {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Media Query component in the default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Media Query component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rZBzXMKtikurjnwB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.png)" %} ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Syncfusion® Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) +* [Getting Started with Blazor for Server-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) diff --git a/blazor/media-query/media-query-integration.md b/blazor/media-query/media-query-integration.md index e84e730458..cec9bb3283 100644 --- a/blazor/media-query/media-query-integration.md +++ b/blazor/media-query/media-query-integration.md @@ -1,6 +1,6 @@ --- layout: post -title: Media Query component Integration with other components | Syncfusion +title: Media Query component Integration with other components | Syncfusion® description: Checkout and learn here all about how to integrate the Media Query with other component like Chart and much more details. platform: Blazor control: Media Query diff --git a/blazor/media-query/media-query-reusable.md b/blazor/media-query/media-query-reusable.md index 776cbe7f61..7e5179898a 100644 --- a/blazor/media-query/media-query-reusable.md +++ b/blazor/media-query/media-query-reusable.md @@ -1,6 +1,6 @@ --- layout: post -title: Reuse of Blazor Media Query component | Syncfusion +title: Reuse of Blazor Media Query component | Syncfusion® description: Checkout and learn here all about how to use the Media Query component at the global level reuse on all pages and much more. platform: Blazor control: Media Query From eeb9d5a012c60d8a495126d2f3b951cb4e77cd4a Mon Sep 17 00:00:00 2001 From: Gayathri4135 Date: Tue, 23 Jun 2026 20:10:02 +0530 Subject: [PATCH 2/2] Updated the md file --- blazor/media-query/media-query-integration.md | 6 +++--- blazor/media-query/media-query-reusable.md | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/blazor/media-query/media-query-integration.md b/blazor/media-query/media-query-integration.md index cec9bb3283..0d3c79bd82 100644 --- a/blazor/media-query/media-query-integration.md +++ b/blazor/media-query/media-query-integration.md @@ -84,12 +84,12 @@ Active media name: @activeBreakpoint ActiveBreakPoint as `Large`: -![Blazor Media Query integration in Grid with activeBreakpoint as large](images/blazor-media-query-large-with-grid.png) +![Blazor Media Query integration in Grid with activeBreakpoint as large](images/blazor-media-query-large-with-grid.webp) ActiveBreakPoint as `Medium`: -![Blazor Media Query integration in Grid with activeBreakpoint as medium](images/blazor-media-query-medium-with-grid.png) +![Blazor Media Query integration in Grid with activeBreakpoint as medium](images/blazor-media-query-medium-with-grid.webp) ActiveBreakPoint as `Small`: -![Blazor Media Query integration in Grid with activeBreakpoint as small](images/blazor-media-query-small-with-grid.png) +![Blazor Media Query integration in Grid with activeBreakpoint as small](images/blazor-media-query-small-with-grid.webp) diff --git a/blazor/media-query/media-query-reusable.md b/blazor/media-query/media-query-reusable.md index 7e5179898a..4a6866ea56 100644 --- a/blazor/media-query/media-query-reusable.md +++ b/blazor/media-query/media-query-reusable.md @@ -83,4 +83,4 @@ The active breakpoint is @activeBreakPoint {% endhighlight %} {% endtabs %} -![Reusable Blazor Media Query Component](images/blazor-media-query-reusable.gif) \ No newline at end of file +![Reusable Blazor Media Query Component](images/blazor-media-query-reusable.webp) \ No newline at end of file