# .NET 8: Working with HTMX and Razor Components
Razor components are files written in [Razor](https://learn.microsoft.com/en-us/aspnet/core/mvc/views/razor?view=aspnetcore-8.0) syntax, a templating language that combines HTML and C# code to generate HTML. It serves the same purpose for .NET as JSX does for React.
The introduction of the [RazorComponentResult](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-8.0) type in .NET 8 has the potential to take our HTMX development to the next level. In our previous post, [Getting Started with HTMX: A Beginner's Guide](https://blog.raulnq.com/getting-started-with-htmx-a-beginners-guide#heading-hx-triggerhttpshtmxorgattributeshx-trigger), we used the `HtmlContentBuilder` class to generate HTML. Now, with the `RazorComponentResult` class, we can harness the power of Razor components to achieve the same goal.
Let's begin migrating our project [here](https://github.com/raulnq/htmx-and-net) to use Razor components. Create the `TodoItemComponent.razor` file to render a single `Todo` item using the following content:
```xml
@code {
[Parameter]
public TodoItem Model { get; set; } = new();
}
```
The `TodoFormComponent.razor` file will contain the `Form` for adding a new `Todo` item:
```xml
@code {
}
```
The `TodoItemListComponent.razor` file will use the previous components:
```xml
@foreach (var item in Model)
{
}
@code {
[Parameter]
public List Model { get; set; } = new();
}
```
And finally, the root component for our application is the `DocumentComponent.razor` file:
```xml
@code {
}
```
The final `Program.cs` file will be as follows:
```csharp
using Microsoft.AspNetCore.Http.HttpResults;
using TodoApi;
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddRazorComponents();
var app = builder.Build();
var db = new List()
{
new TodoItem() { Id = Guid.NewGuid(), Name = "abc", IsCompleted = true },
new TodoItem() { Id = Guid.NewGuid(), Name = "123", IsCompleted = false },
};
app.MapGet("/", () =>
{
return new RazorComponentResult();
});
app.MapGet("/todos", () => new RazorComponentResult(new { Model = db }));
app.MapPost("/todos/{id}/toggle", (string id) =>
{
var todo = db.First(t => t.Id.ToString() == id);
todo.IsCompleted = !todo.IsCompleted;
return new RazorComponentResult(new { Model = todo });
});
app.MapDelete("/todos/{id}", (string id) =>
{
var todo = db.First(t => t.Id.ToString() == id);
db.Remove(todo);
});
app.MapPost("/todos", (AddTodoItem command) =>
{
var todo = new TodoItem { Id = Guid.NewGuid(), Name = command.Name, IsCompleted = false };
db.Add(todo);
return new RazorComponentResult(new { Model = todo });
});
app.Run();
```
Razor components allow us to embed C# code in HTML in a clean, readable way, making it easier to design, reuse, and maintain HTML. As a result, implementing our HTMX endpoint becomes much simpler, giving the impression that .NET 8 was designed with HTMX in mind (In fact, it was the support for server-side rendering that made this possible). You can find the final code [here](https://github.com/raulnq/htmx-and-net/tree/razor). Thank you, and happy coding.