Reactor

Microsoft.UI.Reactor (Reactor) is a declarative UI framework for building native Windows desktop apps in pure C#. No XAML. No data binding. No view models. You describe your UI as a function of state, and Reactor keeps the screen in sync.

If you want to...	Start here
Build your first Reactor app	Getting Started
Understand the mental model	Thinking in Reactor
Port a XAML/WinUI/WPF app	Reactor for XAML Developers
Look up a hook or modifier	API Reference
Read how the runtime works	Architecture Overview

Why Reactor?

Pure C# from top to bottom. Your entire app — layout, styling, state, logic — lives in .cs files. No markup languages, no code-behind split, no designer files.

Declarative rendering. You write a Render() method that returns your UI. When state changes, Reactor diffs the old and new element trees and patches only what changed in the native WinUI controls.

Hooks for state management. UseState, UseReducer, UseEffect, and friends give you React-style state management without the JavaScript.

Native performance. Reactor renders to real WinUI 3 controls. Your app is a standard Windows desktop app — no web views, no Electron, no interpretation layer.

Quick Look

A complete Reactor app in one file:

class HelloWorld : Component
{
    public override Element Render()
    {
        return VStack(12,
            TextBlock("Hello from Reactor!").FontSize(24).Bold(),
            TextBlock("No XAML. No data binding. Just C#.")
        ).Padding(24);
    }
}

State and interactivity in a few lines:

class QuickCounter : Component
{
    public override Element Render()
    {
        var (count, setCount) = UseState(0);

        return HStack(8,
            Button("- 1", () => setCount(count - 1)),
            TextBlock($"{count}").FontSize(20).SemiBold().Width(40)
                .HAlign(HorizontalAlignment.Center),
            Button("+ 1", () => setCount(count + 1))
        ).Padding(24);
    }
}

Built-in text styling:

class StyledText : Component
{
    public override Element Render()
    {
        return VStack(8,
            Heading("Heading element"),
            SubHeading("SubHeading element"),
            TextBlock("Regular text with modifiers")
                .FontSize(14).Foreground("#0078D4"),
            Caption("Caption for fine print")
        ).Padding(24);
    }
}

How It Works

1. You define components — classes with a Render() method that returns an element tree.
2. You manage state with hooks — UseState, UseReducer, UseEffect, and more — called inside Render().
3. When state changes, Reactor calls Render() again, diffs the result, and updates only the WinUI controls that changed.

That's it. No event subscriptions to manage, no property-changed notifications to wire up, no dispatcher threading to worry about.

Documentation

The docset is organized as ten sections, working from "first app on screen" to "how the runtime is built". XAML developers should read sections 1, 8, and 9 first; everyone else can follow the order.

1. Get Started

• Getting Started — Create your first app, manage state, build a todo list
• Thinking in Reactor — Mental-model essay: UI as a function of state
• Reactor for XAML Developers — Migration cookbook: XAML, bindings, MVVM, navigation
• Reactor vs XAML — Architectural essay: DependencyProperty → modifier, Binding → closure

2. Learn the framework

• Components — Component classes, props, function components, composition
• Hooks — UseState, UseReducer, UseEffect, UseMemo, UseRef, UseCallback
• Effects and Lifecycle — UseEffect patterns, cleanup, async work, timers
• Context — Share state across the component tree without prop drilling
• Commanding — Commands, keyboard shortcuts, async actions
• Advanced Patterns — ErrorBoundary, Memo, observable binding, performance tuning

3. UI surface

• Layout — VStack, HStack, Grid, ScrollView, Border, responsive patterns
• Flex Layout — Flexible box layout for adaptive UIs
• Styling and Theming — Colors, typography, dark/light themes, custom styles
• Animation — Transitions, keyframes, interaction states, choreography
• Input and Gestures — Pointer events, taps, gestures, access keys

4. Controls catalog

• Controls — Thumbnail-indexed catalog of every control
• Forms and Input — Text fields, checkboxes, sliders, validation, data entry
• Collections — ListView, LazyVStack, VirtualList for large datasets
• Text and Media — TextBlock, MarkdownTextBlock, Image, MediaPlayerElement, WebView2, InkCanvas
• Status and Info — InfoBar, InfoBadge, ProgressBar, TeachingTip, PipsPager
• Dialogs and Flyouts — ContentDialog, MenuFlyout, CommandBarFlyout, Popup
• Data System — DataGrid with sort, filter, search, inline editing
• Charting — Line, bar, area, pie charts with the ReactorCharting library

5. App architecture

• Navigation — NavigationView, TabView, multi-page apps, routing
• Windows — Top-level windows, tray icons, OpenWindow, shutdown policy
• Docking Windows — Rearrangeable dock panes: splits, tabs, side pins, floating tear-outs, persistence
• Async Resources — UseResource, UseInfiniteResource, UseMutation, Pending
• Persistence — UsePersisted, scopes, migration
• Localization — Multi-language support, resource strings, RTL layouts
• Accessibility — Screen readers, keyboard navigation, focus trapping, runtime scanning

6. Patterns & recipes

• Recipes — Gallery of end-to-end patterns (login, master-detail, paginated list, command palette, …)
• Cheat Sheet — Single-page reference card
• Rules of Reactor — Hook rules, render purity, anti-patterns
• Theming Tokens — Full token catalog with swatches

7. Tooling & process

• Dev Tooling — mur CLI, MCP server, VS Code panel, dotnet watch, in-app dev menu
• Testing — Headless renderer, snapshot tests, async test patterns
• Performance — ETW, EventDispatch, flame graphs
• Packaging — MSIX, single-file, ARM64, AOT considerations

8. Interop & integration

• WinForms Interop — Host Reactor components inside WinForms apps via XAML Islands
• WPF Interop — Host Reactor components inside WPF apps

(XAML migration lives in Section 1 — XAML developers are a primary entry path.)

9. Under the hood

The runtime explained — for readers who want to know why it works the way it does, not just how to use it.

• Architecture Overview — Declarative shell → element records → reconciler → WinUI tree
• Reactivity Model — setState → re-render; why hooks not INotifyPropertyChanged
• Reactor vs XAML — (also in §1) the architectural essay
• Hooks Internals — Hook slot table, dispatcher, closure capture
• Reconciliation — Element-record diff, identity, the three phases
• Control Reconciler Protocol — The per-control handler protocol: IElementHandler, descriptors, children strategies, pooling
• Extending Reactor Controls — Cookbook: add a native control end-to-end with a descriptor
• Element Pool — Allocation reduction under scroll-heavy lists
• Effects Scheduling — When effects run; dep semantics; cleanup ordering
• Threading and Dispatch — UI-thread invariants, trampoline, batched renders
• Source Mapping — How stack traces and devtools attribute work back to user source
• Modifier System — How .FontSize(24).Bold() actually works
• Analyzer Architecture — Roslyn analyzers shipped with Reactor; authoring your own
• DevTools Internals — Dev menu, reconcile-highlight, layout-cost overlay, MCP protocol
• Animation Pipeline — Composition API end-to-end; 4 animation systems
• Focus and Input Internals — UseFocus dispatcher, FocusTrap container, pointer event flow
• Perf Instrumentation — ETW sources, frame-aligned sampling, layout-cost attribution

10. API Reference

Auto-generated from XML doc comments in src/Reactor*/. Each member gets a uniform Summary / Parameters / Returns / Discussion / Examples / See Also page.

• Hooks — every Use* hook
• Factories — every element factory (coming soon)
• Modifiers — every chainable modifier (coming soon)
• Elements — every Element record type (coming soon)
• System — App, Window, Navigation, Context, Command (coming soon)

Minimal Project Setup

Create a console project, then edit the .csproj:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <OutputType>WinExe</OutputType>
    <TargetFramework>net10.0-windows10.0.22621.0</TargetFramework>
    <UseWinUI>true</UseWinUI>
    <WindowsPackageType>None</WindowsPackageType>
  </PropertyGroup>
  <ItemGroup>
    <PackageReference Include="Microsoft.WindowsAppSDK" Version="2.0.*" />
    <ProjectReference Include="..\Reactor\Reactor.csproj" />
  </ItemGroup>
</Project>

Replace App.cs with a component and a ReactorApp.Run<T>() call, and run with dotnet run. That's your first Reactor app.

Tips

Start with function components. For quick experiments, use ReactorApp.Run("Title", ctx => { ... }) — no class needed.

Read the hooks page. Hooks are the core of Reactor. Understanding UseState and UseEffect unlocks everything else.

Keep components small. Extract pieces into their own components early. Composition is always easier to reason about than a single giant Render().

Next Steps

• Getting Started — Build your first app, manage state, ship a todo list.
• Hooks — UseState, UseEffect, UseMemo, and the rest of the core state primitives.
• Components — Component classes, props, and function components in detail.
• Reactor for XAML Developers — Migration cookbook for XAML, bindings, MVVM, and navigation.