---
title: "Introducing the Syncfusion Web Projects Template for Visual Studio Code"
published_at: "2021-01-11T09:56:51+00:00"
modified_at: "2025-07-22T09:28:54+00:00"
url: "https://www.syncfusion.com/blogs/post/introducing-the-syncfusion-web-projects-template-for-visual-studio-code"
excerpt: "The Syncfusion web Template Studio provides an extension to create Angular, React, and Vue projects with Syncfusion components in Visual Studio Code, providing a UI and reducing the time it takes to create an application. In this blog, I am..."
taxonomy_category:
  - "Angular"
  - "React"
  - "Syncfusion"
  - "Tips and Tricks"
  - "Visual Studio Code"
  - "Vue"
  - "Web"
taxonomy_post_tag:
  - "Angular"
  - "React"
  - "Syncfusion"
  - "Tips"
  - "Visual Studio Code"
  - "Vue"
  - "Web"
---

# Introducing the Syncfusion Web Projects Template for Visual Studio Code

[Kannan](https://www.syncfusion.com/blogs/author/skannan)

![Introducing the Syncfusion Web Projects Template for Visual Studio Code](https://www.syncfusion.com/blogs/wp-content/uploads/2021/01/Introducing-the-Syncfusion-Web-Projects-Template-for-Visual-Studio-Code.png)


The Syncfusion web Template Studio provides an extension to create [Angular](https://angular.io/)
, [React](https://reactjs.org/)
, and [Vue](https://vuejs.org/)
 projects with Syncfusion components in Visual Studio Code, providing a UI and reducing the time it takes to create an application.

In this blog, I am going to explain how to install the Syncfusion web extension and create a Syncfusion Angular application using the Syncfusion web Template Studio with the new user interface in Visual Studio Code.

## **Prerequisites**

The prerequisites for creating an Angular web application are:

- Visual Studio Code
- Angular 4 or higher
- TypeScript 2.6 or higher
- [C# extension for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.csharp)

## **Installing the Syncfusion web extension**

The Syncfusion web extension for Visual Studio Code is available in the Syncfusion Essential JS 2 setup in the Syncfusion [Essential Studio® 2020 Volume 3 Service Pack](https://www.syncfusion.com/forums/159441/essential-studio-2020-volume-3-service-pack-release-v18-3-0-47-is-available-for-download)
 release and higher releases. The extension is also available in the [Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions)
.

## **Installing from Visual Studio Marketplace**

To install the Syncfusion web extension from Visual Studio Marketplace, follow these steps:

1. Open Visual Studio Code.
2. Open the Command Palette by navigating to **View** > ** Command Palette**.
3. Search for **Install Extensions** in the ** Command Palette** and expand Install Extensions when it appears.
4. Search for **Syncfusion Web** in the search box to locate the Syncfusion Web extension package.
5. Install the Syncfusion Blazor extension by clicking **Install**.

## **Installing from a VSIX package**

To install the Syncfusion web extension from a VSIX package, follow these steps:

1. Open **Visual Studio Code**.
2. Open the **Command Palette** by navigating to ** View** > ** Command Palette**.
3. Search for **Install** and then click ** Install from VSIX** in the Command Palette.
4. Select **Syncfusion Web VSCode Extension** from the ** Browse** options. The extension will be installed.

## **Creating a Syncfusion web application**

The Syncfusion web extension helps developers create Angular, React, and Vue applications with Syncfusion components. The following steps create a Syncfusion web application:

1. Open **Visual Studio Code**.
2. Open the **Command Palette** by navigating to ** View** > ** Command Palette**.
3. Select the **Syncfusion Web Template Studio: Launch** option by searching for ** Syncfusion Web**. ![Select the Syncfusion Web Template Studio: Launch option by searching for Syncfusion Web.](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Select-the-Syncfusion-Web-Template-Studio-Launch-option-by-searching-for-Syncfusion-Web.png)
4. Now the Syncfusion web Template Studio wizard will appear. The web Template Studio UI is designed in such a way that providing the project details is easy. First, provide the project name and the location in which to store the application. ![Provide the project name and the location in which to store the application](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Provide-the-project-name-and-the-location-in-which-to-store-the-application.png)
5. Select a Framework. I am selecting Angular. ![Select Angular Framework](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Select-Angular-Framework.png)
6. In the **Configuration** tab, choose the theme, and then click ** Create**. ![In the Configuration tab, choose the theme, and then click Create](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/In-the-Configuration-tab-choose-the-theme-and-then-click-Create.png)
7. Once the project is created, you can open it by clicking **Open Project**. ![Once the project is created, you can open it by clicking Open Project](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Once-the-project-is-created-you-can-open-it-by-clicking-Open-Project.png)

And that’s it. The Angular application is now created with the required Syncfusion NPM packages for the Syncfusion components installed in the project.

Now, you can develop your application with Syncfusion components. In the created Syncfusion Angular application, code to include the Data Grid, Chart, and Scheduler components is added by default. You can run the created Angular application without any code changes and work with the included components.

![Explorer Window showing the created Angular application](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Explorer-Window-showing-the-created-Angular-application.png)Refer to the following documentation to render the code and run the application.

**Angular**: [https://ej2.syncfusion.com/angular/documentation/introduction/](https://ej2.syncfusion.com/angular/documentation/introduction/)

**React**: [https://ej2.syncfusion.com/react/documentation/introduction/](https://ej2.syncfusion.com/react/documentation/introduction/)

**Vue**: [https://ej2.syncfusion.com/vue/documentation/introduction/](https://ej2.syncfusion.com/vue/documentation/introduction/)

## **Debugging the application**

Use either the F5 key or **Run->Start Debugging** to run the application. When debugging the Syncfusion Angular application, it will restore the NuGet packages, compile the application, and run it in the default browser.

## **![Output](https://www.syncfusion.com/blogs/wp-content/uploads/2020/12/Output-2.png)**

## 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**

I hope you now have a clear idea about installing and using the [Syncfusion web Template Studio](https://marketplace.visualstudio.com/items?itemName=SyncfusionInc.Web-VSCode-Extensions)
 to create various web applications. The Syncfusion web Template Studio is designed to help developers create web applications in less time. The controls included in the web application will jump-start your application development.

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!