Abies (/ˈa.bi.eːs/)

A WebAssembly library for building MVU-style web applications with .NET.

Overview

Abies is a pure functional web framework for .NET that brings the Model-View-Update (MVU) pattern to WebAssembly. Inspired by Elm, it provides:

• Virtual DOM with efficient diffing and patching
• Type-safe routing with parser combinators
• Unidirectional data flow for predictable state management
• Pure functional architecture - no side effects in your domain logic

Quick Start

Using Templates (Recommended)

# Install the Abies templates (one-time)
dotnet new install Abies.Templates

# Create a new Abies application
dotnet new abies -n MyApp
cd MyApp
dotnet run

Counter Example

using Abies;
using static Abies.Html.Elements;
using static Abies.Html.Attributes;
using static Abies.Html.Events;

await Runtime.Run<Counter, Arguments, Model>(new Arguments());

public record Arguments;
public record Model(int Count);

public record Increment : Message;
public record Decrement : Message;

public class Counter : Program<Model, Arguments>
{
    public static (Model, Command) Initialize(Url url, Arguments argument)
        => (new Model(0), Commands.None);

    public static (Model, Command) Update(Message message, Model model)
        => message switch
        {
            Increment => (model with { Count = model.Count + 1 }, Commands.None),
            Decrement => (model with { Count = model.Count - 1 }, Commands.None),
            _ => (model, Commands.None)
        };

    public static Document View(Model model)
        => new("Counter",
            div([], [
                button([onclick(new Decrement())], [text("-")]),
                text(model.Count.ToString()),
                button([onclick(new Increment())], [text("+")])
            ]));

    public static Message OnUrlChanged(Url url) => new Increment();
    public static Message OnLinkClicked(UrlRequest urlRequest) => new Increment();
    public static Subscription Subscriptions(Model model) => SubscriptionModule.None;
    public static Task HandleCommand(Command command, Func<Message, System.ValueTuple> dispatch)
        => Task.CompletedTask;
}

Subscriptions

Subscriptions let you react to external event sources (timers, browser events) without putting side effects in Update.

public record Tick : Message;
public record ViewportChanged(ViewportSize Size) : Message;
public record SocketEvent(WebSocketEvent Event) : Message;

public static Subscription Subscriptions(Model model) =>
    SubscriptionModule.Batch([
        SubscriptionModule.Every(TimeSpan.FromSeconds(1), _ => new Tick()),
        SubscriptionModule.OnResize(size => new ViewportChanged(size)),
        SubscriptionModule.WebSocket(
            new WebSocketOptions("wss://example.com/socket"),
            evt => new SocketEvent(evt))
    ]);

Example Application

The repository includes Conduit, a full implementation of the RealWorld specification - a Medium.com clone with:

• User authentication (login/register)
• Article CRUD operations
• Comments and favorites
• User profiles and following
• Tag filtering and pagination

Project Structure

Project	Description
Abies	Core framework library
Abies.Templates	dotnet new project templates
Abies.Conduit	RealWorld example app (frontend)
Abies.Conduit.Api	RealWorld example app (backend)
Abies.Counter	Minimal counter example
Abies.SubscriptionsDemo	Subscriptions demo app
Abies.Tests	Unit tests

See docs/subscriptions-demo.md for the demo walkthrough (including the mock WebSocket feed).

Requirements

• .NET 10 SDK or later
• A modern browser with WebAssembly support

Performance

Abies includes comprehensive benchmarks for the Virtual DOM diffing algorithm. Performance is continuously monitored with automated quality gates.

📊 View Benchmark Results — Interactive charts with historical trends

Scenario	Typical Performance
Small DOM diff (2-3 elements)	~235 ns
Medium DOM diff (15-20 elements)	~310 ns
Large DOM diff (150+ elements)	~256 ns

See docs/benchmarks.md for details on running benchmarks locally.

Building

dotnet build

Running the Example

# Start the API server
dotnet run --project Abies.Conduit.Api

# In another terminal, start the frontend
dotnet run --project Abies.Conduit

Documentation

See the docs folder for:

• Documentation Index
• Installation
• Your First App
• Project Structure
• MVU Architecture
• Commands & Effects
• Components (Elements)
• Subscriptions
• Testing
• Runtime API
• Virtual DOM

Tutorials

Step-by-step guides to learn Abies:

1. Counter App — Your first Abies app
2. Todo List — Managing collections
3. API Integration — HTTP commands
4. Routing — Multi-page apps
5. Forms — Input handling & validation
6. Subscriptions — External events
7. Real World App — Complete example
8. Tracing — OpenTelemetry integration

Contributing

We welcome contributions! Abies follows trunk-based development with protected main branch.

Quick Contribution Guide

1. Fork and clone the repository
2. Create a feature branch from main
3. Make your changes with tests
4. Ensure all tests pass locally
5. Submit a pull request following our PR template

For detailed guidelines, see CONTRIBUTING.md.

Code of Conduct

• Be respectful and constructive
• Follow code style guidelines
• Write tests for new features
• Keep PRs small and focused
• All changes require peer review

Branch Protection

The main branch is protected and requires:

• ✅ Pull request with 0+ approval (allows self-approval for solo dev)
• ✅ GitHub Copilot automated code review (optional but recommended)
• ✅ All CI checks passing (CD, E2E, CodeQL, PR validation)
  • Note: E2E timeouts are warnings only (see E2E Timeout Handling)
• ✅ Up-to-date branch
• ✅ All conversations resolved

See Branch Protection Guide for details.

For solo development: You can approve your own PRs, but all automated checks must still pass. GitHub Copilot provides automated code review feedback. See Copilot Review Guide.

The Name

Abies is a Latin name meaning "fir tree".

Pronunciation

• A: as in "father" [a]
• bi: as in "machine" [bi]
• es: as in "they" but shorter [eːs]

Stress: First syllable (A-bi-es)
Phonetic: AH-bee-ehs

License

Apache 2.0