Blazor is a powerful tool that helps build convenient and beautiful interfaces in C#. It was originally intended for web development, but we will use it to build UI for our scripts—settings panels, overlays, pop‑ups. All of this can be done through the API available to you.
¶ Examples from this series
All examples can be downloaded here. I recommend downloading the whole pack rather than trying to import it into the current version.
¶ Creating our first overlay
It's very easy:
- Create a new aura
- Add
C# Overlay v3
- Done
At this point you already have a fully working interactive UI.
If you click the Click Me button, the counter in the program will start updating!
¶ Why Blazor?
Blazor is great for building interfaces because it combines the flexibility and performance of C# with the incredible capabilities of HTML/CSS and JavaScript. Over the last two decades no stack has received as much investment from the largest companies in the world. As a result we now have a tool that lets us render virtually anything you can imagine. Check out https://codepen.io/ for inspiring examples of what this “magnificent trio” can do.
Now that we've looked at the strengths of HTML/CSS/JS, let's understand the role C#/Blazor plays in all this. In short, Blazor lets us generate HTML and bridge the world of web programming with C#. Our application is split into two parts: Razor and the C# backend. Razor is responsible for rendering data, and C# for preparing it.
EyeAuras—and therefore your scripts—lives at the intersection of these two technologies. Let's dive into the essentials you'll work with.
¶ HTML
It's the markup language on which the entire Internet is built. It controls where elements like text, buttons, tables, etc. appear. You use HTML to define the page layout that you later style with...
¶ CSS
Cascading Style Sheets control how your buttons, text and everything else look. They change colors, transparency, animations and many other details.
¶ Razor
Razor is a markup language from Microsoft that lets you mix HTML, CSS and C# in one file.
Let's create our first component and break down its parts. It will contain text and a button that increases a counter when clicked.
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int currentCount = 0;
private void IncrementCount() => currentCount++;
}
In this small piece of code HTML and C# live together and complement each other. C# defines what happens when we click the button, while HTML/CSS define how everything looks.