Convert a Blazor Project to Syncfusion® Blazor

26 Jun 20263 minutes to read

The Syncfusion® Blazor extension for Visual Studio Code upgrades a Blazor project by adding the required NuGet packages and configuring the selected theme automatically.

Supported project types

  • Blazor Web App (Server or WebAssembly rendering)
  • Blazor Server App
  • Blazor WebAssembly App (standalone or ASP.NET Core hosted)
  • Blazor WebAssembly App (Progressive Web Application)

Conversion steps

  1. Open the Blazor project in Visual Studio Code.

  2. In Explorer, right-click the project .csproj file and choose Convert to Syncfusion Blazor App….

    Context menu showing Convert to Blazor Application option

  3. In the Command Palette, pick Select Blazor Version and choose the desired Blazor release (pulled from nuget.org).

    Command Palette showing Blazor version selection

  4. Choose the theme from the theme list. Refer to the Blazor Themes documentation for the full list.

    Command Palette showing theme selection options

    NOTE

    The conversion process will run automatically. This may take a few moments as NuGet packages are downloaded and the project is configured.

After conversion, the project contains the required Blazor NuGet packages and the selected theme stylesheet.

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.

What changes are made during conversion

  • NuGet packages: Adds Syncfusion.Blazor (and other required packages depending on project type).

    Project file showing NuGet package references

  • Theme: Adds the chosen theme reference to the appropriate file based on application type:

    Application Type Theme file location
    Blazor Web App (Server or WebAssembly) Components/App.razor
    Blazor WebAssembly (standalone) wwwroot/index.html
    Blazor WebAssembly (ASP.NET Core hosted) Client project: wwwroot/index.html
    Blazor WebAssembly (PWA) wwwroot/index.html

    Example showing where the theme link is added in the project

See also