Syncfusion® Blazor Template Studio

16 Jul 202613 minutes to read

The Syncfusion® Blazor Template Studio creates a new Syncfusion® Blazor project preconfigured with required NuGet packages, theme styles, namespaces, and initial render code for the components you select. The Template Studio uses a step-by-step wizard so you can quickly scaffold an application with your choices for runtime, theme, authentication, and sample data.

NOTE

The Syncfusion® Blazor extensions for Visual Studio require Essential Studio® versions 31.2.10 or later.

Quick start

  1. Open Visual Studio 2022 or 2026.

  2. Create a new Syncfusion Blazor project using one of these options:

    • Extension: Extension → Syncfusion® → Essential Studio® for Blazor → Create New Syncfusion Project…

      CreateMenu

    • File: File → New → Project. In the New Project dialog, filter by Syncfusion or search for “Syncfusion” to find the Blazor templates.

      CreateNewWindow

  3. Select Syncfusion® Blazor Template Studio, configure the project name and location, and click Next.

    CreateNewWizard

  4. The Template Studio wizard opens. It guides you through the Project Type, Controls, Features, and Configuration tabs.

    Note: Refer to the .NET SDK support for Blazor Components here.

    Project type - choose a template that matches your installed .NET SDK.

    .NET SDK version Application type
    .NET 10.0, .NET 9.0, .NET 8.0 Blazor Web App
    .NET 10.0, .NET 9.0, .NET 8.0 Blazor WebAssembly App

    For the Blazor Web App type you can set Interactivity type (Server, WebAssembly, Auto) and Interactivity location (Global or per page/component).

    WebAppTemplate

    For Blazor WebAssembly projects you can enable Progressive Web Application (PWA) where supported.

    WASMTemplate

  5. Click Next or open the Controls tab to pick the Syncfusion Blazor components to include in the project. Use the search box to filter the component list.

    Controls Section

    Select at least one control to enable Features and Configuration options.

  6. Use the Features tab to choose component features. Use the Configuration tab to set the target .NET version, theme, HTTPS, PWA (for WebAssembly), localization, and authentication options.

    Supported authentication types depend on the application type:

    Application type Supported authentication types
    Blazor Web App None, Individual Accounts
    Blazor WebAssembly App None, Individual Accounts, Microsoft Identity Platform

    WebAppConfiguration
    WASMConfiguration

  7. Review the Project details panel to modify selected controls or change configuration values.

    ProjectDetails

  8. Click Create. Template Studio generates the project with the required Syncfusion NuGet packages, styles, namespaces, and initial component render code.

    Readme

  9. The created project includes the chosen theme, Syncfusion NuGet package versions, authentication settings, and sample render code for the selected components.

  10. If you installed the trial setup or NuGet packages from nuget.org, register the Syncfusion® license key in your application. Syncfusion® introduced the licensing system in the 2018 Volume 2 (v16.2.0.41) Essential Studio® release. Navigate to the help topic to generate and register the Syncfusion® license key. Refer to this blog post for background on the licensing changes introduced in Essential Studio®.

Authentication Configuration

Register the created application in the Google API Console for Individual Accounts, or in Azure Active Directory for the Microsoft Identity Platform. The Google API Console registration provides the client ID for Individual Accounts, while the Azure Active Directory registration provides the tenant ID and application client ID for the Microsoft Identity Platform. Configure these ID values in the created application so it runs correctly with authentication support.

Individual Accounts Authentication

Web Application and Progressive Web Application

  1. Go to the credentials page in the Google Cloud Platform API Console.

    https://console.cloud.google.com/apis/credentials?project=aerobic-furnace-244104&pli=1

  2. Click Create Credentials and OAuth Client Id.

    Google API console credentials page

    Google API Oauth client Id

  3. Select Application type as Web Application in client Id creation.

    ApplicationType

  4. Add your publish URL link as an Authorized URI and login URL as Redirected URI.

    RedirectedURI

  5. Click save then OAuth client id will be created and copy that credential.

    ClientIdCreation

  6. Add the Client Id and RedirectUri in the appsettings.json file of your application. Example keys:

    ClinetIdConfiguration

  7. Change the build configuration binding from Local to google in the Program.cs file.

    buildconfigurationbind

Microsoft Identity Platform Authentication

Server Application

  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps

  2. Click New Registration in App Registration page.

    AppRegistration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI like {Redirect URI}/signin-oidc and click Register.

    Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Id token check box.

    Access token and Id token

  6. Get client tenant id and application id form overview page.

    Clinet tenat id

  7. Configure the client tenant id, application id, and domain in your application’s appsettings.json file. Example keys:

    Project configuration

Web Application and Progressive Web Application

  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps

  2. Click New Registration in App Registration page.

    AppRegistration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI and click Register.

    Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Access token an Id token check box.

    Access token and Id token

  6. Migrate the API by clicking the highlighted arrow like in below image.

    API Migration

    Migration configuration

  7. Get client tenant id and application id form overview page.

    Clinet tenat id

  8. Configure the client tenant id and application id in your application’s appsettings.json file.

    Clinet ID and Tenant ID configuration

ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application

Client project Registration and Configuration

  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps

  2. Click New Registration in App Registration page.

    AppRegistration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI and click Register.

    Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Access token an Id token check box.

    Access token and Id token

  6. Migrate the API by clicking the highlighted arrow like in below image.

    API Migration

    Migration configuration

  7. Get client tenant id and application id form overview page.

    Clinet tenat id

  8. Configure those client tenant id and application id in your application appsettings.json file.

    Clinet ID and Tenant ID configuration

Server project Registration and configuration

  1. Go to below Azure Active Directory App Registration page.

    https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/RegisteredApps

  2. Click New Registration in App Registration page.

    Server App Registration

  3. Give name of the application and selected supported type as single tenant.

    Name and supported Account type

  4. Dropdown the page, select platform as web and give your application Redirect URI and click Register.

    Server Platform and Redirect URI

  5. App will be registered, go to the Authentication page and tick Access token an Id token check box.

    Access token and Id token

  6. Migrate the API by clicking the highlighted arrow like in below image.

    API Migration

    Migration configuration

  7. Add a scope API in Expose an API page.

    Add scope API

  8. Give scope name, admin consent display name, and admin consent description and click Add scope. Scope API will be created, copy those scope API Value.

    Add scope API configuration

  9. Get client tenant id and application id form overview page.

    Clinet tenat id

  10. Configure the client tenant id, application id, added scope api id, and domain in your application’s appsettings.json file.

    Project configuration

  11. Configure the scope API in the client application’s Program.cs file at the highlighted location.

    Scope API configuration

Run application

Run the application to see the Syncfusion® components you selected. Select a component to view its output.

Blazor Template output page

You can select a culture from the combo box at the top right of the output page to apply the culture in the application.

Blazor Template output page

NOTE

Note: The culture combo box is enabled in the sample output only if the Enable localization option is selected in the Configuration window of the Syncfusion® Blazor Template Studio wizard.

Register and Login Application

Individual Authentication

Blazor Web App

Apply database migrations and user registration in .NET 8.0, .NET 9.0, and .NET 10 Blazor Web App
Apply database migrations

In the Blazor Web App, it’s essential to apply pending migrations to the database before proceeding with user registration. Choose one of the following options:

Option 1: Using Visual Studio Package Manager Console

Navigate to View -> Other Windows -> Package Manager Console in Visual Studio.

Run the following command in the Package Manager Console:

Update-Database

Option 2: Using Command Prompt

Open a command prompt in your project directory and execute the following command:

dotnet ef database update

User registration

  1. Launch the application and register by submitting your email address and creating a password.

    Register the WebApp

  2. Confirm your registration by clicking Click here to confirm your account.

    Confirming the WebApp registration

  3. Submit your registered email address and password to log in to the application.

    LogIn to the WebApp

Server Application, ASP.NET Core hosted Web Application, and Progressive Web Application with ASP.NET Core hosted

  1. To register the application, submit your email address and create a password.

    Register the application

  2. Confirming registration by clicking Click here to confirm your account.

    Register the confirmation

  3. Submit your registered email address and password to login the application.

    login to the application

Web Application and Progressive Web Application

  1. Login to the application using Gmail accounts.

    Google login

Microsoft Identity Platform

Server Application, Web Application, Progressive Application, ASP.NET Core Hosted Web Application, and ASP.NET Core Hosted with Progressive Web Application

  1. Log in to your application using your Microsoft account.

  2. Accept the permission request for your application.

    Accept permission