The client-side is fully declarative, not needing custom code to fetch data from the server. Hydrating the UI component is done by the id attribute convention, which only needs to match the name of server-side view model property serving as the data source.

The server-side view model provides both the configuration and the data, and can utilize the dotNetify’s run-time reactive properties and fluent methods to make the code simple, concise and readable.

Simple Reactive Forms

Creating client-side forms can be quite a chore, from setting up the UI, getting the initial setup, tracking dirty state, performing client-side and server-side validations, showing errors, to submitting the input.

Elements gives you a powerful abstraction to tackle even the most complex, nested forms with ease and simplicity. All configurations and validations are declared on the C# view models, but this doesn’t mean inefficient, constant chatters with the browser, thanks to the built-in client-side logic that submits data to the server only at the appropriate time.

Example of getting input with client- and server-side validations.

Simple Layout System

The task of positioning and styling UI elements is usually quite time-consuming, especially for developers that don’t normally work on the web front-end. CSS is very powerful, but takes time to master, which may be prohibitive to a developer who just wants to quickly put together some front-end for an internal app or a weekend project. This is where Elements can help.

Elements provides a responsive main layout grid, and beyond that a system of Panels that only needs minutes to understand. Each Panel can automatically position its child elements with a fixed gap in-between, arrange them vertically or horizontally, and fit the available space, among other things.

A system of panels for quick and nice layout.

The Panels are also fully customizable with CSS you can pass in as a string, which is scoped to just that component.

Simple Real-Time Visualization

DotNetify alone already gives you a simple, lightweight abstraction to send data to the browser in real-time using SignalR. Elements raises the bar further by leveraging other open source libraries, wrapping them up with consistent APIs that hook directly to the C# view models.