--- title: "Syncfusion Blazor Extension in Visual Studio Code for Mac: A Time-Saving Tool" published_at: "2021-11-10T10:45:59+00:00" modified_at: "2026-01-15T15:05:33+00:00" url: "https://www.syncfusion.com/blogs/post/syncfusion-blazor-extension-in-visual-studio-code-for-mac-a-time-saving-tool" excerpt: "Syncfusio’s Blazor Visual Studio Code Extension includes Blazor project templates, code snippets, conversion, and migration tools. It allows you to create a Blazor project using prebuilt templates. Now, the Blazor Extension in Visual Studio Code is also available for the..." taxonomy_category: - "Blazor" - "Extensions" - "Visual Studio Code" taxonomy_post_tag: - "Blazor" - "extensions" - "macOS" - "productivity" - "Visual Studio Code" - "WebAssembly" --- # Syncfusion Blazor Extension in Visual Studio Code for Mac: A Time-Saving Tool [Abishake Dakshinamoorthy](https://www.syncfusion.com/blogs/author/abishake-dakshinamoorthy) ![Syncfusion Blazor Extension in Visual Studio Code for Mac: A Time-Saving Tool](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Syncfusion-Blazor-Extension-in-Visual-Studio-Code-for-Mac-A-Time-Saving-Tool.png) Syncfusio’s [Blazor Visual Studio Code Extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) includes Blazor project templates, code snippets, conversion, and migration tools. It allows you to create a [Blazor](https://en.wikipedia.org/wiki/Blazor) project using prebuilt templates. Now, the Blazor Extension in Visual Studio Code is also available for the [Mac](https://en.wikipedia.org/wiki/MacOS) operating system. In this blog, we will see how to use the Blazor Extension in Visual Studio Code for Mac OS to: - [Create a Syncfusion Blazor application](#creating-the-syncfusion-blazor-application) . - [Convert a Blazor application into a Syncfusion Blazor application](#converting-a-blazor-application-to-a-syncfusion-blazor-application) . - [Migrate Syncfusion Blazor applications from one version to another](#migrating-a-syncfusion-blazor-application-from-one-version-to-another) . ## Prerequisites The prerequisites for creating a Blazor application are: - [Visual Studio Code](https://code.visualstudio.com/download) - [.NET Core 3.1 SDK](https://dotnet.microsoft.com/download/dotnet-core) or later - [C# extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp) ## Installing the Syncfusion Blazor extension The Syncfusion Blazor extension for Visual Studio Code is available in the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) . ### Installing from Visual Studio Marketplace To install the Syncfusion Blazor extension from the Visual Studio Marketplace, follow these steps: 1. First, open Visual Studio Code. 2. Then, open the Command Palette by navigating to **View**> ** Command Palette**. 3. Search for **Install Extensions** in the **Command Palette** and expand it when it appears. 4. Search for **Syncfusion Blazor** in the search box to locate **Blazor VSCode Extensions – Syncfusion**. 5. Then, install the **Blazor VSCode Extensions- Syncfusion** extension. ### Installing from a VSIX package To install the Syncfusion Blazor extension from a VSIX package, follow these steps: 1. Download the [Syncfusion Blazor VSCode extension](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) from the Visual Studio Marketplace. 2. Then, open **Visual Studio Code**. 3. Now, open the **Command Palette** by navigating to **View** > ** Command Palette**. 4. Search for **Install**, and then click ** Install from VSIX**in the Command Palette. 5. Finally, select the **Syncfusion Blazor Extension** from the **Browse** options. Then, the extension will be installed. ## Creating the Syncfusion Blazor application The Syncfusion Blazor extension in Visual Studio Code for Mac helps developers to create Blazor applications with Syncfusion [Blazor UI components](https://www.syncfusion.com/blazor-components) , saving them significant time. To create an app, follow these steps: 1. Open **Visual Studio Code**. 2. Now, open the **Command Palette** by navigating to **View** > ** Command Palette**. ![Open the Command Palette by navigating to View > Command Palette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Open-the-Command-Palette-by-navigating-to-View-and-then-Command-Palette.png) 3. Select **Syncfusion Blazor Template Studio: Launch** by searching for **Syncfusion Blazor** in the search text box. ![Select the Syncfusion Blazor Template Studio Launch option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Select-the-Syncfusion-Blazor-Template-Studio-Launch-option.png) 4. Now, the Syncfusion Blazor Template Studio wizard will open. This UI design looks user-friendly and attractive. You can provide project-related details without any guidance or confusion via this UI design. It helps you easily select the application requirements. Provide the project name and location in which you want to store the application. ![Provide the project name and location](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Provide-the-project-name-and-location.png) 5. Now, select the required Blazor application type: - Syncfusion Blazor Server App. - Syncfusion Blazor Web Assembly App. ![Select the required Blazor application type](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Select-the-required-Blazor-application-type.png) 1. 1. In the **Configuration** tab, choose the .NET Core version, a theme, HTTPS configuration, and Blazor Web Assembly project types (ASP.NET Core-hosted and Progressive Web Application). Then, click **Create**.****![In the Configuration tab, choose the .NET Core version and themes, and then click Create](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/In-the-Configuration-tab-choose-the-.NET-Core-version-and-themes-and-then-click-Create.png)****** Note:** In the Syncfusion Blazor Web Assembly App project type, we can choose ASP.NET Core-hosted, Progressive Web Application, or both. 1. Once the project is created, the **Creating Your Project** dialog will appear. Click **Open Project**. Refer to the following screenshot. ![Click on the OpenProject button](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Click-on-the-OpenProject-button.png) Now, the Blazor application has been created with the required Syncfusion NuGet packages and the CDN links of the Syncfusion Blazor components. ![Explorer window showing the created Blazor project](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Explorer-window-showing-the-created-Blazor-project.png)Now, you can develop your application with Syncfusion Blazor components. While creating the Syncfusion Blazor application, the code snippets for the [Calendar](https://www.syncfusion.com/blazor-components/blazor-calendar) , [DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) , and [Button](https://www.syncfusion.com/blazor-components/blazor-button) components will be added by default. You can run these components without any change in the source file. **Note:** Refer to the [Creating a Syncfusion Blazor application documentation](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/visual-studio-code-extensions/create-project) to render the code and run the application. ### Debugging the application The Debug and Release modes are configured while creating the project. So, you don’t need to configure them manually. When debugging a Syncfusion Blazor app, the NuGet packages will be automatically restored. Then, the app will be compiled and start to run in the default browser. By default, the Blazor application runs in Debug mode. You can change it to Release mode by choosing the Debug option from the **Debug** tab or pressing the ** Ctrl**+** Shift**+** D** shortcut key. ![Debugging the Blazor application](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Debugging-the-Blazor-application.png) ## Converting a Blazor application to a Syncfusion Blazor application The Syncfusion Blazor conversion is an add-in for the Extension in Visual Studio Code for Mac. It converts an existing Blazor app into a Syncfusion Blazor web app by adding the required NuGet packages and themes. With this, you can easily add Syncfusion Blazor components to the app. To do so, follow these steps: 1. Open an existing Blazor web app or create a new Microsoft Blazor web app in Visual Studio Code. 2. Right-click on the **Project file** from Explorer (Workspace). Then, select ** Convert to Syncfusion Blazor App** from the context menu. Refer to the following screenshot. ![Select the Convert to Syncfusion Blazor App… option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Select-Convert-to-Syncfusion-Blazor-App%E2%80%A6.png) 3. Then, select the required Blazor version (which is published in the [NuGet Gallery](https://www.nuget.org/) ) from the dropdown that appears. ![Select the Blazor version from the dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Select-the-Blazor-version-from-the-palette-appears.png) 1. Now, choose the required theme from the dropdown that appears. ![Choose the required theme from the palette](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Choose-the-required-theme-from-the-palette-appears.png) Now, the application is configured with the required Syncfusion Blazor NuGet packages and themes. **Note:** For more details, refer to the [Converting Blazor application to Syncfusion Blazor application](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/visual-studio-code-extensions/convert-project) documentation. ## Migrating a Syncfusion Blazor application from one version to another The Syncfusion Blazor migration is an add-in for the Extension in Visual Studio Code for Mac. It migrates a Syncfusion Blazor app from one version to another by changing the Syncfusion NuGet package version in the app. Follow these steps to migrate a Syncfusion Blazor app: 1. Open an existing Syncfusion Blazor app or create a new Syncfusion Blazor app in Visual Studio Code. 2. Right-click on the project file from Explorer (Workspace). Then, select **Migrate Syncfusion Blazor App to another version** from the context menu. Refer to the following screenshot. ![Select the Migrate Syncfusion Blazor App to another version… option](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Select-the-Migrate-Syncfusion-Blazor-App-to-another-version%E2%80%A6-option.png) 1. Then, select the required Blazor version (which is published in the [NuGet Gallery](https://www.nuget.org/) ) from the dropdown that appears. ![Select the Blazor version from the dropdown](https://www.syncfusion.com/blogs/wp-content/uploads/2021/11/Select-the-Blazor-version-from-the-palette-appears.png) Finally, the Syncfusion NuGet packages references are updated to the selected version in the application. **Note:** For more details, refer to the [Upgrading Syncfusion Blazor application to the latest version](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/visual-studio-code-extensions/upgrade-project) documentation. ## Special mention: Syncfusion® Document Viewer Extension If you often find yourself switching between apps just to check a Word or Excel file, this handy tool is for you. The [Syncfusion® Document Viewer Extension](https://www.syncfusion.com/free-tools/document-viewer-extension) for Visual Studio Code lets you open and view documents like Word, Excel, and more; right inside your coding environment. You can preview high-fidelity files and even make light edits such as text changes and formatting tweaks, all without leaving VS Code. It’s a simple way to stay focused and keep your project documentation within reach. Available for free download on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Document-Viewer-VSCode-Extensions) . ## Conclusion Thanks for reading! In this blog post, we have seen how to use our Syncfusion [Blazor Extension in Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Blazor-VSCode-Extensions) to create, convert and migrate a Blazor app in the MAC operating system. This will help you create attractive web applications with Syncfusion Blazor UI components in less time. Try out the procedures in this blog post and leave your feedback in the comments section below! Syncfusion provides more than 65 high-performance, lightweight, modular, and responsive [Blazor UI controls](https://www.syncfusion.com/blazor-components) such as [Data Grid](https://www.syncfusion.com/blazor-components/blazor-datagrid) , [Charts](https://www.syncfusion.com/blazor-components/blazor-charts) , and [Scheduler](https://www.syncfusion.com/blazor-components/blazor-scheduler) to ease the work of developers. Try them out for yourself. You can also 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/xamarin-forms) . We are always happy to assist you! ## Related blogs - [Introducing the Syncfusion Blazor Code Generator for Visual Studio](https://www.syncfusion.com/blogs/post/introducing-the-syncfusion-blazor-code-generator-for-visual-studio.aspx) - [Introducing a UI for the Syncfusion Blazor Project Template for Visual Studio Code](https://www.syncfusion.com/blogs/post/introducing-a-ui-for-the-syncfusion-blazor-project-template-for-visual-studio-code.aspx) - [Easily Visualize Online Maps in a Blazor Application](https://www.syncfusion.com/blogs/post/easily-visualize-online-maps-in-a-blazor-application.aspx) - [Elegantly Visualize Data with the World’s Fastest Blazor Charts](https://www.syncfusion.com/blogs/post/elegantly-visualize-data-with-the-worlds-fastest-blazor-charts.aspx)