Add Blazor Components Using Code Snippets

26 Jun 20262 minutes to read

The Syncfusion® Blazor extension for Visual Studio Code speeds up component insertion by providing ready-to-use Razor markup and placeholders for common features.

Quick start

  1. Open your Blazor project in Visual Studio Code and the target Razor file.
  2. Position the cursor where you want the component markup inserted.

  3. Type the sf prefix using the convention:

     sf<Syncfusion component name>-<feature>
 Example: `sfgrid-grouping` to insert a DataGrid with grouping enabled.

  4. Choose the snippet from the suggestions and press Enter or Tab. The component markup is inserted with editable placeholders.

    Animated demo showing insertion of a Blazor code snippet

  5. Use Tab to navigate placeholders and fill required values. Inline comments in the snippet highlight required fields.

    Snippet comments highlighting required placeholders

  6. Each snippet includes a help link at the top so you can quickly access the relevant documentation for the inserted component or feature.

    Help link shown at the top of the inserted snippet

After inserting a snippet - project configuration checklist

The snippet only adds Razor markup. To render Blazor components correctly, ensure the project is configured as follows:

  • Add the required NuGet package(s). Individual packages are recommended. Refer to Benefits of using individual NuGet packages for details.

    NuGet Package

  • Import required namespaces in ~/_Imports.razor.

    Namespace

  • Include a theme stylesheet in the page head:
    • ~/Components/App.razor — (Blazor Web App)
    • ~/Pages/_Host.cshtml — (Blazor Server)
    • ~/wwwroot/index.html — (Blazor WebAssembly)

    Themes

  • Register the Blazor service in the appropriate Program.cs files. For interactive Web App render modes WebAssembly or Auto, register in both Program.cs files when applicable.

    Registration of the Blazor service

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