Timesaving Blazor Extension for Visual Studio

Blazor is rapidly becoming a go-to technology for building full-featured web apps using C# and .NET. Whether you’re working on a Blazor WebAssembly app, a Blazor Server project, or even hybrid apps for mobile and desktop, productivity is crucial. In his 9-minute video titled "Timesaving Blazor Extension for Visual Studio", Tim Corey walks through a powerful Visual Studio extension designed to remove friction from everyday Blazor development tasks.

Instead of diving deep into theory, Tim provides a hands-on demonstration of how this tool—developed by Jimmy Engström—helps create, manage, and refactor Blazor files more efficiently inside Visual Studio. We’ll walk through this tutorial in detail, matching the video timeline so you can follow along.

Quick Overview: Making Blazor Development Easier

Tim begins by explaining the goal: to help developers using Blazor in Visual Studio streamline their workflow. He says this extension targets small annoyances like managing razor files, namespaces, and code-behind separation—tasks that can become repetitive when working with multiple Blazor components or razor pages.

This Visual Studio extension isn’t just about convenience; it’s about boosting rendering performance, simplifying UI interactivity, and speeding up your .NET development cycle—especially for Blazor web apps.

Installing the Extension by Jimmy Engström

Tim introduces a Visual Studio extension called BLM, created by Jimmy Engström. You can find it via Extensions > Manage Extensions in Visual Studio by searching for “BLM extension.” Once installed, Visual Studio must be restarted.

Tim notes that the extension includes excellent documentation, directly pulled from its GitHub README file. That means even new developers can understand how to use it without needing to leave the IDE.

Setting Up a Blazor Project

After installation, you’ll need to either create a new Blazor project or open an existing one. Tim loads up a sample project called “SuggestionApp,” a Blazor Server project using .NET Core. This is a great example because it shows a mix of Razor syntax and code-behind logic in components.

Working with Razor Files and Code-Behind

Tim opens a Profile.razor file and explains that it contains both Razor markup and C# logic. If you want to separate the logic into a code-behind file, the extension makes it as simple as a right-click > Create Code Behind. This generates a .razor.cs file tied to the .razor component.

Although the example already contains some code, Tim deletes it to simulate starting fresh and creates a new component named Test.razor.

Writing and Linking Razor Components

In Test.razor, Tim defines a simple string variable:

string test = "hello world";

string test = "hello world";

He then uses the @test expression in the Razor markup to render it in the browser. After compiling the project, the component is fully functional. This example showcases the default behavior of rendering dynamic content in Blazor components using the .NET runtime and compiled assemblies.

Visual Studio’s Extract to Code-Behind Feature

Tim demonstrates a native Visual Studio feature: extracting inline Razor logic into a code-behind file using Quick Actions > Refactor > Extract to Code Behind. This separates the logic layer from the UI, a good practice for maintainability and testing.

Extension Adds the Reverse Functionality

Here’s where the extension shows its real value. While Visual Studio supports moving code to a .razor.cs file, it does not allow moving it back. With the extension, Tim right-clicks the .razor.cs file and chooses “Move Code Behind to Razor.” Instantly, the C# logic is moved back into the Razor file.

Though this feature is marked beta, Tim finds it stable and helpful for when developers want to simplify files or debug logic inline.

Creating Isolated CSS and JS Files

Tim showcases another timesaver: right-click > Create Isolated CSS. This creates a file named Test.razor.css, a pattern Blazor uses for component-specific styling. Tim explains that without the extension, you'd need to manually create the file via Add > New Item, and ensure naming matches.

The same feature exists for JavaScript isolation, allowing scoped behavior to be easily attached to individual components—an important part of web development when building interactive and secure components.

Find Component Usages in the Entire App

In another helpful feature, Tim right-clicks the NotAuthorized component and selects “Find Component Usages.” This quickly shows all files where that component is referenced. It’s incredibly useful for refactoring, especially in large .NET projects where components are reused across pages and layouts.

Generate BUnit Tests from Components

Testing is a vital part of any web app. Tim demonstrates how to auto-generate BUnit tests—a testing framework for Blazor. Right-clicking a component and choosing “Generate BUnit Test” lets you choose between Razor or C# syntax.

The tool generates the necessary test scaffold, enabling quick setup for UI tests. This is perfect for developers wanting to implement security, response validation, or UI behavior through automated tests.

Extract Shared UI into Reusable Components

Next, Tim shows how you can highlight any Razor UI block and choose “Extract to Component.” In his demo, he extracts a button inside a container into a new component called TestButton. This enables cleaner code, better reuse, and modular UI design—especially important when developing mobile apps, Blazor hybrid apps, or large-scale web applications.

Visualizing Routes in Your Blazor App

Another standout feature is Show Blazor Routes, accessed via Extensions > BLM > Show Blazor Routes. This tool lists all defined routes from across your project—those defined with the @page directive in Razor files.

Tim demonstrates that modifying the @page directive in Test.razor instantly updates the route list. You can double-click any route in the list to open the corresponding component. This makes navigation management much more efficient, especially in apps using enhanced navigation, multiple render modes, or deeply nested components.

Running the Project with .NET Watch

Tim shares an important performance tip: using .NET Watch via PowerShell instead of relying on Visual Studio’s built-in hot reload. He explains that the traditional reload is slower and less consistent. But with the extension, you can right-click on your project and select “Run .NET Watch.”

This launches a PowerShell window and runs the app using the following command:

dotnet watch

dotnet watch

This enables live reload, faster startup, and more responsive development. For developers deploying to a web server, or building formally referred to progressive apps, this speed boost can significantly enhance the development experience.

Final Thoughts: Why You Should Install This Extension

In the final minute, Tim recaps the power of this Visual Studio extension for Blazor development. Whether you’re building a Blazor WebAssembly app, a server-side project, or anything in between, this tool provides:

• Faster file and component creation

• Cleaner separation of Razor and C# code

• Easier testing and route discovery

• Improved render tree understanding

• Better management of compiled syntax and markup

Tim highly recommends that anyone working with .NET, C#, or Blazor apps should install this extension and consider integrating it into their default toolchain.

Conclusion: Blazor + Visual Studio = Even Better with This Extension

If you’re developing modern web apps using Blazor in Visual Studio, Tim Corey’s walkthrough shows just how powerful this small extension can be. With features that enhance file handling, testing, routing, and build efficiency, it provides big gains with minimal setup.

Thanks to Jimmy Engström’s work, developers now have access to a tool that aligns perfectly with the Blazor and .NET Core ecosystem—reducing manual work, enabling better component design, and improving overall project interactivity and maintainability.

Whether you’re working on mobile, desktop, or web apps, this extension helps unlock the full potential of Blazor, Visual Studio, and the .NET runtime. For more details do watch Tim's video and subscribe his Channel for more insightful videos on C# and development.