The latest articles on DEV Community by Sebastián Tramontana (@sebastiantramontana). https://dev.to/sebastiantramontana https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3448684%2F6251f0ec-2151-4861-9675-486d48b44aeb.png https://dev.to/sebastiantramontana en Sebastián Tramontana Fri, 22 Aug 2025 16:35:01 +0000 https://dev.to/sebastiantramontana/side-project-vitraux-a-free-net-library-for-manipulating-the-html-dom-in-webassembly-3p8j https://dev.to/sebastiantramontana/side-project-vitraux-a-free-net-library-for-manipulating-the-html-dom-in-webassembly-3p8j <p>Hi DEV! 👋👋👋</p> <p>I'm building a free library to map your .NET ViewModels to HTML in WebAssembly called <strong>Vitraux</strong> as an alternative to Blazor WebAssembly.</p> <h2> 📢 What it does? </h2> <p>Vitraux is a .NET library for manipulating the HTML DOM in WebAssembly applications.<br> 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.</p> <p>👉 <strong>Give it a try on GitHub:</strong> <a href="https://github.com/sebastiantramontana/Vitraux" rel="noopener noreferrer">https://github.com/sebastiantramontana/Vitraux</a></p> <h2> 🚀 Key Benefits </h2> <ul> <li>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.</li> <li>True Decoupling: Keeps business logic (backend) and presentation (frontend) fully separated, making collaboration and maintenance easier.</li> <li>Declarative Mapping: Define the mapping between ViewModels and HTML elements in a simple, expressive way.</li> <li>Easy Integration: Just define your mappings and call an update method. Everything else is handled automatically.</li> <li>Efficient DOM Updates: Works with DOM objects in memory as much as possible, updating the UI only when strictly necessary for optimal performance.</li> <li>Compatible and Scalable: Works with anything from vanilla HTML and Web Components to any frontend tool that outputs HTML.</li> <li>HTML Modularization: Lets you break your HTML into fragments stored in templates or external URIs, which you can design and structure however you like.</li> </ul> <h2> ✨ Features </h2> <ul> <li>Change Tracking: Sends and updates only the data that actually changed since the last update, minimizing data transfer and avoiding unnecessary re-renders.</li> <li>Flexible Element Selection Strategies: Multiple ways to select HTML elements, adaptable to any view structure.</li> <li>Custom JavaScript Function Mapping: Call your own JavaScript functions in response to ViewModel changes.</li> <li>Modular Mapping: Split your mapping into sub-mappings for better readability and reuse.</li> <li>Auto-Generated Function Caching: Initialization and update functions generated by Vitraux can be cached for faster load times.</li> <li>Shadow DOM Support: Optionally encapsulate styles and structure using Shadow DOM, depending on project needs.</li> </ul> <h2> 💬 I'd love your feedback </h2> <p>I would really appreciate your thoughts here, or you can contribute on github with discussion and opening issues.</p> <p>🙂 Thanks!</p> dotnet webassembly html blazor