How it works

MeshWeaver's UI model has three interlocking ideas. Once they click, building rich interfaces is surprisingly straightforward.

1. Controls are immutable records

Every control is a plain C# record. With* methods return new instances — the original is never mutated:

var button1 = Controls.Button("Click me");
var button2 = button1.WithId("myButton");  // button1 is unchanged
button2

This means control definitions are pure data. You can safely share, copy, and compose them without worrying about side effects. A control doesn't render anything until it's placed in a layout area.

2. Rendering is declarative and area-based

Instead of describing how to update the DOM, you describe what each named area should show. Only the affected area re-renders when its data changes — sibling areas are never disturbed:

Controls.Stack
    .WithView(Controls.Html("<h1>Dashboard</h1>"))      // Static — rendered once
    .WithView(liveDataStream.Select(d => ShowData(d)))  // Dynamic — updates on each emission
    .WithView(Controls.Button("Refresh"))               // Static — rendered once

Container structure is fixed; only observable-backed slots re-render.

3. Reactivity comes from IObservable<T>

Pass any IObservable<T> as a view and the content updates automatically. Subscriptions are created and disposed for you as areas mount and unmount:

var counter = Observable.Interval(TimeSpan.FromSeconds(1));

Controls.Stack
    .WithView(counter.Select(n => Controls.Label($"Count: {n}")))

No callbacks to wire up. No teardown code to write — the counter below is ticking live.

Live example

Controls.Stack
    .WithView(Controls.Html("<b>MeshWeaver UI — live from the kernel</b>"))
    .WithView(Controls.Markdown($"Rendered at **{DateTime.Now:HH:mm:ss}** — controls are plain C# records."))
    .WithView(Controls.Button("A static button (no action wired here)"))

Where to go next

Browse the full set of controls, layout primitives, and data-binding guides: