Syncfusion AI Assistant

How can I help you?

Create a Blazor application

26 Jun 20265 minutes to read

The Syncfusion® Blazor Template Studio for Visual Studio Code scaffolds a Blazor application preconfigured with Syncfusion® NuGet packages, namespaces, themes, and sample component render code. Use the guided wizard to quickly create an application tailored to your platform and selected controls.

NOTE

Blazor project templates require Essential Studio v17.4.0.39 and later are supported by the Syncfusion® Visual Studio Code project template.

Use the following steps to create Syncfusion® Blazor applications in Visual Studio Code:

  1. Open the Command Palette (Ctrl+Shift+P) and search for Syncfusion to list available commands.

    Command Palette showing commands

  2. Choose Syncfusion Blazor Template Studio: Launch and provide the project name and path in the wizard.

    Template Studio wizard with Project name and Project path fields

  3. On the Project type tab, select the application type that matches your installed .NET SDK.

    Supported .NET SDKs and application types:

    Application Type Supported .NET SDK Versions
    Blazor Web App .NET 8.0, 9.0, 10.0
    Blazor WebAssembly App .NET 8.0, 9.0, 10.0

    In the Blazor Web App type you can choose interactivity (Server, WebAssembly, Auto) and interactivity location (global or per page/component).

    Project type selection showing Blazor Web App options

    For WebAssembly projects, you can opt into Progressive Web Application (PWA) support.

    Project type selection showing Blazor WebAssembly and PWA option

  4. On the Controls tab, pick the Blazor components to include in the project by selecting their tiles.

    Controls tab listing Blazor components

    NOTE

    Select at least one control to enable the Features and Configuration tabs.

  5. On the Features tab, choose per-control features you want included in the scaffolded pages.

    FeaturesSection

  6. On the Configuration tab, set .NET target version, theme, HTTPS, localization, authentication type, and other app-specific options.

    Authentication options vary by application type:

    Application type Authentication
    Blazor Web App None, Individual Accounts
    Blazor WebAssembly App None, Individual Accounts, Microsoft Identity Platform

    Configure interactivity options for Blazor Web App and PWA settings for WebAssembly as needed.

    Configuration panel showing interactivity options for Blazor Web App

    Configuration panel showing PWA option for Blazor WebAssembly

    Use the Project details panel to review selections, remove controls, or change the app configuration before creating the project.

    Project Details panel showing selected controls and configuration summary

  7. Click Create. The Template Studio generates the project with the selected NuGet packages, theme references, namespaces, and component render code.

  8. Run the project using the terminal command or the debugger:

dotnet run

Alternatively, press F5 or go to Run > Start Debugging to launch the application.

Running the generated Blazor project in Visual Studio Code

What Template Studio configures for you

  • NuGet: Adds the Syncfusion.Blazor package (and individual packages when applicable).

    NuGetPackage

  • Theme: Adds the chosen theme reference to the appropriate location (~/Components/App.razor for Blazor Web App, or wwwroot/index.html for WebAssembly projects).

    Theme reference location examples

  • Namespaces: Inserts namespaces into _Imports.razor.

    Imports file showing namespaces

  • Component render code: Adds sample usage (Calendar, Button, DataGrid) into the Pages folder (Index/Counter/FetchData).

    Index page updated with components

NOTE

If you installed the trial setup or NuGet packages from nuget.org, you must register the license key. Refer to the licensing overview for details on generating and registering your license key.

See also