Css2Avalonia 1.0.0

Css2Avalonia

Renders HTML-like node trees with CSS styling to native Avalonia controls. No WebView required.

What it does

Takes a tree of HtmlNode objects (elements with tags, inline styles, and children) and produces Avalonia Control instances. Supports CSS property parsing, stylesheet matching, and variable resolution.

Supported HTML elements

div, p, span, br, a, b, i, em, strong, small, sub, sup, ul, ol, li, table, tr, td, th, thead, tbody, tfoot, ruby, rt, rp, img, details, summary

Supported CSS properties

• Display: none, block, flex, inline-flex, inline-block
• Colors: hex, named colors via Color.TryParse
• Font: font-size (px, em, rem, pt, %), font-weight, font-style, text-decoration
• Spacing: margin, padding (all sides + shorthand)
• Borders: border, border-width, border-color, border-style, border-radius, per-side borders
• Layout: flex-direction, flex-wrap, text-align, vertical-align
• Sizing: width, height, max-width, max-height, min-width
• Text: letter-spacing, line-height, white-space, text-indent
• Other: overflow, CSS variables with var() fallbacks, logical properties (margin-block, padding-inline, etc.)

Usage

Build the node tree

using Css2Avalonia.Parser;

var nodes = new List<HtmlNode>
{
    new HtmlElementNode
    {
        Tag = "div",
        Style = new() { ["color"] = "#ff0000", ["font-weight"] = "bold" },
        Children =
        [
            new HtmlTextNode { Text = "Hello " },
            new HtmlElementNode
            {
                Tag = "span",
                Style = new() { ["font-style"] = "italic" },
                Children = [new HtmlTextNode { Text = "world" }]
            }
        ]
    }
};

Render to Avalonia controls

using Css2Avalonia.Controls;

Control control = StructuredContentRenderer.Render(nodes);
myPanel.Children.Add(control);

With a CSS stylesheet

using Css2Avalonia.Css;

var stylesheet = new CssStylesheet("span[data-sc-headword] { font-weight: bold; font-size: 1.3em; }");
Control control = StructuredContentRenderer.Render(nodes, stylesheet);

CSS utilities standalone

using Css2Avalonia.Css;

IBrush? brush = CssResolver.ParseColor("#ff0000");
double? size = CssResolver.ParseFontSize("1.5em");
Thickness? margin = CssResolver.ParseThickness("4px 8px");
string resolved = CssResolver.ResolveVariables("var(--color, red)"); // "red"

API reference

Requirements

• .NET 9.0+
• Avalonia 11.x