HTML semantics for native Avalonia UI
HtmlML
Write familiar HTML-shaped markup and script native Avalonia controls—without embedding a browser.
Overview
An HTML-inspired markup system for native Avalonia controls, paired with a reusable JavaScript and TypeScript runtime, DOM-style APIs, events, styling, and Canvas rendering.
HtmlML maps familiar HTML-shaped elements onto native Avalonia controls. Its companion JavaScript.Avalonia runtime adds a Jint engine, DOM traversal and mutation, routed-event bridging, modules, timers, animation frames, TypeScript transpilation, and Canvas APIs without hosting a browser engine.
Native HTML-like Avalonia elements
CSS-inspired classes and inline styles
JavaScript, TypeScript, DOM, and events
Canvas 2D and WebGL-oriented scripting
Built for
Where it fits.
- Avalonia teams bringing web markup concepts into native applications
- Tool authors embedding scriptable native UI surfaces
- Developers building hybrid C#/JavaScript or TypeScript workflows without a WebView
Compatibility & status
Native desktop targets
Embedded Jint runtime
Embedded transpilation
Publication planned
In the work
Real output,
not a mockup.
Architecture
Clear layers.
Replaceable seams.
Markup
HTML-like XAML tags map to concrete Avalonia controls and document structure.
Style
Classes, inline declarations, stylesheets, and converters apply CSS-inspired values through Avalonia properties.
DOM + events
JavaScript.Avalonia exposes visual-tree queries, mutation, event propagation, timers, modules, and native object access.
Canvas
2D and WebGL-oriented contexts record drawing commands against Avalonia rendering surfaces.
Inside HtmlML
One repository.
Multiple serious systems.
Explore the focused capabilities, their package boundaries, architecture, installation, and smallest useful example.
HtmlML provides HTML-shaped XAML elements for headings, text, lists, navigation, sections, media, links, scripts, styles, and Canvas while creating normal native Avalonia controls.
1 module→02 · Web-shaped values, Avalonia propertiesCSS-inspired StylingStylesheet links, style elements, classes, inline declarations, selectors, and value converters translate familiar CSS-oriented authoring into Avalonia styling and properties.
1 module→03 · Script native UI without a WebViewJavaScript.AvaloniaA standalone Jint-powered runtime exposes window, document, DOM queries and mutation, routed events, timers, animation frames, CommonJS modules, HTTP/assets, and embedded TypeScript transpilation to any Avalonia TopLevel.
1 module→04 · Scriptable drawing and live experimentsCanvas & PlaygroundCanvas 2D, WebGL-oriented rendering, pointer events, animation frames, editable scripts, XAML preview, file bridges, console output, and TypeScript demos form an immediate native scripting laboratory.
2 modules→Quick start
From package
to first frame.
Choose the package workflow used by your repository, then start from the smallest working example. Replace VERSION with the current stable or prerelease version shown on NuGet.
git clone https://github.com/wieslawsoltes/HtmlML.git# Reference src/HtmlML and, optionally, src/JavaScript.Avalonia.<html xmlns="https://github.com/avaloniaui" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <body class="app-body"> <section class="card"> <h1>Hello HtmlML</h1> <canvas id="draw" width="400" height="200" /> </section> </body></html>Package surface
Start focused.
Compose as needed.
Source, docs, samples, and releases
The repository is the source of truth.
Use the current documentation and samples, inspect changes, report issues, or support continued open-source maintenance.