Telerik UI for Blazor Productivity Tools for Visual Studio Code
The Progress® Telerik® UI for Blazor Productivity Tools within Visual Studio Code increase developer productivity and simplifies the process of creating Blazor projects with Telerik UI components. The tools can be installed as an extension and launched on Windows, Linux and Mac and include:
Telerik UI for Blazor Scaffolder
The scaffolding feature within the productivity tools creates new pages in your Blazor apps with the most used data-bound Telerik Blazor components: Data Grid, TreeList, Scheduler, Chart, ListView, Gantt, Form, Drawer, Menu, DropDownList, Upload, ComboBox and more. When adding a new project item, the scaffolder will prompt you to input the service and model names and will allow you to configure multiple component-specific properties. For example, if you scaffold a new page with Telerik Blazor Data Grid, you will be able to set its sorting, filtering, grouping, column resizing and more features.
To start the scaffolder, from the file explorer, use the context menu for a Blazor .csproj file (if you are using an ASP.NET hosted WASM app, rightclick on the client .csproj), and select
Then select the component you wish to add from the scaffolding wizard.
Project Templates with Telerik UI for Blazor Components
You can create a Telerik Blazor project by accessing the project template feature from the Visual Studio Code Extensions menu. To open the menu, use
Choose whether to start from a Blank project or use the Admin Dashboard Template, select a Project Name and the Output Path. Next, pick the type of project (Blazor WebAssembly or Server project), the target framework, and the type of license you are using – trial or paid. For easy getting started journey you also have the option to pick a page template – Grid, Chart, Form inputs, Chart and more. Style your project at its creation, choosing from Default, Bootstrap or Material themes and select your preferred swatches with different color variations.
To run the application, you need to open the Terminal on your project and find the Server folder. Note that if you chose a Server type of project, the folder will hold the name of your project. If your project is WebAssembly, the folder you will be looking for is called Server folder. Execute the dotnet run command and you will have your Blazor project up and running.
Please review our documentation page for more information.
Telerik UI for Blazor Code Snippets
The Telerik Visual Studio Code extension provides a handy feature for increased developer productivity – code snippets for fast UI component reference and configuration. You can take advantage of the tens of code snippets that can be easily invoked in the IDE by typing a shortcut
To make the most out of snippets:
Telerik UI for Blazor Snippets Catalog
Instead of manually adding the NuGet package, static assets and other references, you can take advantage of a simple convert command provided by the extension. It will create on your behalf all the necessary references to your Blazor project and you can immediately start using Telerik UI for Blazor components within it.
For more details on how to use the convert command see the dedicated article in the product documentation.
Telerik REPL for Blazor
The productivity tools also provides integration with Telerik REPL for Blazor which is a browser-based playground for creating, saving, running and sharing of Blazor code snippets.
Using the Share to Telerik REPL for Blazor option from the code editor context menu, you can easily export your code snippet while coding in your favorite IDE and share the generated URL to social media, community forums or send it to a team mate.
Share Using the Code Editor Context Menu
To share your code using Share to Telerik REPL for Blazor from the code editor's context menu:
Share Using the Code Editor Command Palette
To share your code with Share to Telerik REPL for Blazor from the command palette:
Share Using the File Explorer Context Menu
To use Share to Telerik REPL for Blazor from the VS Code's file explorer's context menu:
a. Learn More about Telerik UI for Blazor Components