--- title: "Introducing the Syncfusion Blazor Code Generator for Visual Studio" published_at: "2021-04-20T11:29:34+00:00" modified_at: "2025-04-22T09:35:24+00:00" url: "https://www.syncfusion.com/blogs/post/introducing-the-syncfusion-blazor-code-generator-for-visual-studio" excerpt: "Syncfusion provides a Blazor Code Generator extension to add Syncfusion Blazor component code in Razor files and configure a Blazor application with Syncfusion. It generates Syncfusion Blazor component code very quickly with its required inputs and features. In this blog,..." taxonomy_category: - "Blazor" - "Visual Studio" - "Web" - "What's new" taxonomy_post_tag: - "Blazor" - "Code Generator" - "productivity" - "Visual Studio" - "Web Development" --- # Introducing the Syncfusion Blazor Code Generator for Visual Studio [Kalirajan Ganesan](https://www.syncfusion.com/blogs/author/kalirajan-ganesan) ![Introducing the Syncfusion Blazor Code Generator for Visual Studio](https://www.syncfusion.com/blogs/wp-content/uploads/2021/04/Introducing-the-Syncfusion-Blazor-Code-Generator-for-Visual-Studio.png) Syncfusion provides a Blazor Code Generator extension to add Syncfusion Blazor component code in Razor files and configure a Blazor application with Syncfusion. It generates Syncfusion Blazor component code very quickly with its required inputs and features. In this blog, I am going to explain how to install the Syncfusion Code Generator extension and how to add a Syncfusion [Blazor component](https://www.syncfusion.com/blazor-components) using it. ## **Prerequisites** - [Visual Studio 2019](https://visualstudio.microsoft.com/downloads/) ## **Installing Syncfusion Blazor Code Generator extension** The Syncfusion Blazor Code Generator extension for Visual Studio 2019 is available in the Syncfusion Blazor setup as of [Essential Studio® 2021 Volume 1](https://www.syncfusion.com/forums/164043/essential-studio-2021-volume-1-release-v19-1-0-54-is-available-for-download) . You can either install it from Visual Studio or download and install it from [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) . ## **Installing through Visual Studio Manage Extensions** The following steps illustrate how to install the extensions for Syncfusion Blazor from Visual Studio 2019 **Manage Extensions**: 1. Open Visual Studio 2019. 2. Open **Manage Extensions** in the ** Extension** menu. 3. Select the **Online** tab on the left and type “Syncfusion Blazor” in the ** search box**. ![Select the Syncfusion Blazor Template Studio extension](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Select-the-Syncfusion-Blazor-Template-Studio-extension-1.png) 4. Click the **Syncfusion Blazor Template Studio** extension, then click ** Download**.** Note:** The Syncfusion Blazor Code Generator was shipped within the Syncfusion Template Studio. 1. Once the extensions have been downloaded, close all Visual Studio instances to start the installation process. You will see the following VSIX installation prompt. ![Install the Syncfusion Blazor Template studio by selecting the Install option in the VSIX Installer Window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Install-the-Syncfusion-Blazor-Template-studio-by-selecting-the-Install-option-in-the-VSIX-Installer-Window.png) 1. Click **Install**. ## **Install from the Visual Studio Marketplace** The following steps illustrate how to download and install the Syncfusion Blazor Template Studio with the Code Generator extension from the Visual Studio Marketplace. **Note:** Syncfusion Blazor Code Generator was shipped within the Syncfusion Template Studio. 1. Download the [Syncfusion Blazor Template Studio](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) from the Visual Studio Marketplace. 2. Close all Visual Studio instances running, if any. 3. To install, double-click the downloaded VSIX file. You will see the VSIX installation prompts for the Visual Studio 2019 version. If you don’t install the Visual Studio 2019, then it will not be possible to install the extension. ![Install the Syncfusion Blazor Template studio by selecting the Install option in the VSIX Installer Window](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Install-the-Syncfusion-Blazor-Template-studio-by-selecting-the-Install-option-in-the-VSIX-Installer-Window-1.png) 4. Click **Install**. ## **How to use the Syncfusion Blazor Code Generator** The following steps illustrate how to add Syncfusion Blazor component code using the Syncfusion Code Generator: 1. Open the Blazor application to which you want to add the Syncfusion Blazor component. 2. To open the Syncfusion Blazor Code Generator wizard, follow one of these options in the Razor file: **Option 1:** Right-click in the Razor file code editor at the line position where you want to add a Syncfusion Blazor component and select the **Syncfusion Blazor Code Generator.**![Select the Syncfusion Blazor Code Generator from the menu](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Select-the-Syncfusion-Blazor-Code-Generator-from-the-menu.png)** Option 2:**Place the cursor in the required line in the Razor code editor and choose ** Extension -> Syncfusion -> Essential Studio® for Blazor -> Syncfusion Blazor Code Generator** from the ** Visual Studio Menu**. ![choose Extension -> Syncfusion -> Essential Studio Syncfusion Blazor Code Generator from the Visual Studio Menu.” width=”624″ height=”166″ /> 3. The Syncfusion Blazor Code Generator wizard will appear. Select the required control. ![Syncfusion Blazor Code Generator wizard](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Syncfusion-Blazor-Code-Generator-wizard.png)**Data Binding**: In this section, you can see the data operation fields if the selected control has required data. The data is listed from your application. It interacts with data models and reduces the amount of time to develop with data operations in your project. You can choose the required data model class, data source, ID, and more from your application.** Features:**In this section, you can see the list of control features for the selected control. You can choose the required features. ** Control Requirements:**In this section, you can see the required user input fields for the selected control. You can provide the required values for those fields to generate the control code. 4. After providing the input, click **Insert**. The selected control’s render code is generated and inserted at the cursor’s position. The project is configured with the required NuGet package, namespaces, styles, and services. ![Razor file showing the rendered code for the Syncfusion DataGrid control](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Razor-file-showing-the-rendered-code-for-the-Syncfusion-DataGrid-control.png) 5. In the output window, you will see the information about the changes made by the Syncfusion Blazor Code Generator. ![Output window showing the changes made by the Syncfusion Blazor Code Generator](https://www.syncfusion.com/blogs/wp-content/uploads/2021/03/Output-window-showing-the-changes-made-by-the-Syncfusion-Blazor-Code-Generator.png) ## **Conclusion** I hope you now have a clear idea about how to install the Syncfusion [Blazor Code Generator](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-Extension) and add a Syncfusion [Blazor component](https://www.syncfusion.com/blazor-components) using it. The Syncfusion Blazor Code Generator helps developers to add Syncfusion Blazor component code in less time. Syncfusion has 1,600 components and frameworks for [WinForms](https://www.syncfusion.com/winforms-ui-controls) , [WPF](https://www.syncfusion.com/wpf-ui-controls) , [WinUI](https://www.syncfusion.com/winui-controls) , ASP.NET ([Web Forms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls) , [MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls) , [Core](https://www.syncfusion.com/aspnet-core-ui-controls) ), [UWP](https://www.syncfusion.com/uwp-ui-controls) , [Xamarin](https://www.syncfusion.com/xamarin-ui-controls/) , [Flutter](https://www.syncfusion.com/flutter-widgets) , [JavaScript](https://www.syncfusion.com/javascript-ui-controls) , [Angular](https://www.syncfusion.com/angular-ui-components) , [Blazor](https://www.syncfusion.com/blazor-components) , [Vue](https://www.syncfusion.com/vue-ui-components) , and [React](https://www.syncfusion.com/react-ui-components) . Use them to boost your application development speed. If you aren’t a Syncfusion customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads) to check out our features. Also, try our samples from this [GitHub](https://github.com/syncfusion) location. If you wish to send us feedback, please use the comments section below. If you would like to submit any questions, please feel free to contact us through our [support forum](https://www.syncfusion.com/forums) , [Direct-Trac,](https://www.syncfusion.com/support/directtrac/) or [feedback portal](https://www.syncfusion.com/feedback/) . We are always happy to assist you! If you like this blog post, we think you’ll also like the following articles too:- [What’s New in 2021 Volume 1: Blazor](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-1-blazor.aspx) [Blog] - [Exploring Blazor Hybrid App using Mobile Blazor Bindings](https://www.syncfusion.com/blogs/post/blazor-hybrid-apps-using-mobile-blazor-bindings.aspx) [Blog] - [Visual Studio 2019 Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/visual-studio-2019-succinctly) [Ebook] - [Blazor Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/blazor-succinctly) [Ebook] - [Blazor WebAssembly Succinctly](https://www.syncfusion.com/succinctly-free-ebooks/blazor-webassembly-succinctly) [Ebook]