Side Project: Vitraux - a free .NET library for manipulating the HTML DOM in WebAssembly applications

#dotnet #webassembly #html #blazor

Hi DEV! 👋👋👋

I'm building a free library to map your .NET ViewModels to HTML in WebAssembly called Vitraux as an alternative to Blazor WebAssembly.

📢 What it does?

Vitraux is a .NET library for manipulating the HTML DOM in WebAssembly applications.
Using a declarative approach, it maps .NET ViewModels directly to standard HTML elements, maintaining a clear separation of concerns between frontend and backend. This makes your code easier to maintain, more readable, and highly scalable.

👉 Give it a try on GitHub: https://github.com/sebastiantramontana/Vitraux

🚀 Key Benefits

Clean HTML and C#: No need for custom components or mixing .NET logic with HTML. Your frontend remains pure HTML5 and your backend pure .NET.
True Decoupling: Keeps business logic (backend) and presentation (frontend) fully separated, making collaboration and maintenance easier.
Declarative Mapping: Define the mapping between ViewModels and HTML elements in a simple, expressive way.
Easy Integration: Just define your mappings and call an update method. Everything else is handled automatically.
Efficient DOM Updates: Works with DOM objects in memory as much as possible, updating the UI only when strictly necessary for optimal performance.
Compatible and Scalable: Works with anything from vanilla HTML and Web Components to any frontend tool that outputs HTML.
HTML Modularization: Lets you break your HTML into fragments stored in templates or external URIs, which you can design and structure however you like.

✨ Features

Change Tracking: Sends and updates only the data that actually changed since the last update, minimizing data transfer and avoiding unnecessary re-renders.
Flexible Element Selection Strategies: Multiple ways to select HTML elements, adaptable to any view structure.
Custom JavaScript Function Mapping: Call your own JavaScript functions in response to ViewModel changes.
Modular Mapping: Split your mapping into sub-mappings for better readability and reuse.
Auto-Generated Function Caching: Initialization and update functions generated by Vitraux can be cached for faster load times.
Shadow DOM Support: Optionally encapsulate styles and structure using Shadow DOM, depending on project needs.