Blazor REPL is a new web-based tool for the Blazor community to write, run, save and share code snippets.
More recently, Blazor, a modern web framework that utilizes .NET and WebAssembly, emerged. After Blazor’s arrival, once again the real-time feedback has started to fade—that is until now. The team here at Progress introduced the Progress Telerik REPL for Blazor, the online Blazor code editor! Telerik REPL for Blazor is a new web-based tool for the Blazor community to write, run, save and share code snippets.
The first step in getting started is bookmarking the Telerik REPL for Blazor web application by directly visiting blazorrepl.telerik.com. If you’re already vising Microsoft’s Blazor homepage, you’ll also find a link there too, as the folks at Microsoft are huge fans!
Now that you’ve bookmarked the application, let’s address the elephant in the room. “Do I need a license to use Telerik REPL for Blazor?”
No! Telerik REPL for Blazor is free to use and does not require a license. Even when you are trying out Telerik UI for Blazor components within the REPL a license is not required.
If you would like to use Telerik UI for Blazor components in local projects running Visual Studio and Visual Studio Code, an active trial or license of the product will be needed. You can learn more about Telerik UI for Blazor and download a trial here.
Telerik REPL for Blazor is an interactive online environment that reads, compiles and immediately runs your Blazor code. The run-ready environment requires no installation, account or special tooling—just jump in and start coding. Writing and running code are just the beginning. Additional features include:
Telerik REPL for Blazor isn’t limited to simple snippets. Write, run and save basic examples like a Counter page to more advanced Blazor components. The built-in Monaco Editor, aka the code editor that powers VS Code, provides syntax checking, code completion and error/warning console.
In addition to editing .razor files, .cs files and static assets are supported for detailed and complete examples that can be easily shared.
Here’s how easy it is:
No code runs from first attempt (or almost none 😊). That’s why the Telerik REPL provides compilation diagnostics to ease the processes of fixing problems—informational messages, warnings and errors in the Error List located below the code pane. You can easily find your error precisely with the file name and line number shown in the Error List.
The Telerik REPL can save a library of snippets you have created and shared. To enable this feature you’ll need a free Telerik account. An account is created by clicking the User Library icon from the menu, then choose “Log In.” The Log In page will be displayed with the opportunity to login to an existing account or create a new one.
Once a REPL is saved, it can be shared by copying the URL directly or using the share icon from the top toolbar. The share icon makes it easy to share to your favorite social platforms.
If logged into a Telerik account, any snippet that is shared will be displayed in the User Library. You can load, rename and delete any item from your User Snippets library without interrupting snippets you have previously shared.
Sharing Blazor code is a quick way to communicate a creative idea, get help from community members or teach others.
In addition to sharing links, REPLs can be embedded. Selecting the Embed tab from the Share menu generates a configurable iframe. The iframe may include the code, the output and/or the error console. Embedding is great for blog posts and documentation where you would like to show a Blazor example and allow the user to interact without leaving your site, like the live example below.
Share directly to Telerik REPL for Blazor by installing our Visual Studio extension or Visual Studio Code extension. The extensions add context menus to their respective IDE, simply highlight the code you intend to share as a REPL and choose “Share as Telerik REPL for Blazor” from the right-click context menu.
Clicking share will copy the highlighted code directly to a new REPL where it can be edited, run, saved and shared. This experience not only allows you to work from within your favorite IDE, but it also can serve as a quick way to get help— if you’re in a pinch, simply highlight, share and post the link to Stack Overflow or your social media account.
The .NET ecosystem is already full of great libraries that make Blazor apps do amazing things. With Telerik REPL for Blazor you can use your favorite NuGet packages to show off Blazor’s best assets. Whether you’re parsing markdown with Markdig or learning to use Fluent Validation with Blazor, NuGet is just a few clicks away. Once your NuGet package is installed, you can even configure any services that are required through Startup.cs.
Telerik REPL for Blazor makes technical support and interaction with our community better and more efficient. We will be utilizing the REPL throughout support, feedback and forum portals, and we hope that using it as a code playground will speed and ease the process of resolving technical questions.
In addition to that, all Telerik customers and new users can effortlessly reference the Telerik UI for Blazor components inside the REPL code runner and also interact with their sample code directly from their online demos. In addition, Teleirk components can be created using the the built-in scaffolding menu. Scaffolding makes Telerik components easy to access by generating code with a basic working implementation.
To scaffold a Telerik component, choose the Snippets & Scaffolders menu. Then, choose a component that you would like to generate. Next, click the gear icon for the component to display the scaffolding options. If you’ve never used the component before, make sure to enable the "mock model" option—this option will generate a sample data set and bind it to the component.
In the embedded REPL below we can see a TelerikGantt component fully scaffolded with a sample model. Use the Telerik REPL to interact with the example below.
As theming plays important role in the UI, we embedded a theming dropdown with the three themes and multiple swatches, so you can change the appearance of the components with a click of a button. Just choose the Telerik menu and select one of many built-in themes to see it change in real-time.
Telerik REPL for Blazor is ready to use and we’re excited to see what the community does with it. We look forward to seeing the community build a catalog of examples showcasing their favorite Blazor bits while learning, teaching and collaborating along the way.
What we know here at Progress is that the Blazor community is positive and eager to share knowledge, and we want Telerik REPL to make creating and sharing that spirit as effortless as possible. If you would like to share your thoughts and feedback, let us know what and how we can improve by visiting our feedback forum.
Subscribe to be the first to get our expert-written articles and tutorials for developers!
All fields are required