Avalonia.Svelte Svelte Themes

Avalonia.svelte

Avalonia.Svelte

δΈ­ζ–‡

πŸš€ AOT-Friendly, Zero-XAML, Svelte-like Reactive Framework for Avalonia UI.

Avalonia.Svelte brings the fluid reactive experience of modern web development to .NET desktop development. Build modern, high-performance cross-platform applications using pure C#, saying goodbye to verbose XAML and embracing type safety and code completion.

✨ Key Features

  • Zero XAML: Build UI entirely in C#, enjoying the full power of refactoring tools and compile-time checks.
  • Svelte-like Reactivity: Fine-grained reactivity system based on State<T> and Computed<T> that automatically tracks dependencies.
  • AOT Friendly: No reflection magic, perfectly adapted for NativeAOT, ensuring fast startup and smaller footprint.
  • Declarative Syntax: Fluent chainable API (.Class(), .BindText()) and control flow components (Svelte.If, Svelte.Each).
  • Built-in Routing: Includes a complete Router, Page, and Layout system, supporting route guards and parameter parsing.
  • Cross-Platform: Windows, macOS, Linux, iOS, Android, Browser (WASM).

⚑ Quick Preview

Writing a simple counter component has never been easier:

using Avalonia.Controls;
using Avalonia.Svelte.Core;

public class CounterPage : Component
{
    // 1. Define State
    private readonly State<int> _count = new(0);

    // 2. Define Computed Property (automatically tracks _count)
    private readonly Computed<string> _label;

    public CounterPage()
    {
        _label = new Computed<string>(() => $"Current Count: {_count.Value}");
        
        // 3. Build UI
        Content = new StackPanel()
            .Spacing(10)
            .Children(
                new TextBlock()
                    .BindTextContent(_label) // Bind text
                    .Class("h1"),            // Apply style class

                new Button()
                    .Content("Increment")
                    .OnClick(_ => _count.Value++), // Modify state directly

                // 4. Control Flow
                Svelte.If(_count > 10, () => 
                    new TextBlock()
                        .Text("Wow! That's high!")
                        .Color(Colors.Red)
                )
            );
    }
}

πŸ“š Documentation

  • Quick Start Tutorial: A step-by-step guide to building a complete Todo List application.
  • User Guide: Deep dive into state management, routing, layouts, and styling systems.
  • Architecture: Understand the internal workings of the framework.

πŸ“¦ Installation

(Coming soon to NuGet)

Currently, you can reference the projects in the src/ directory as source code in your solution.

🀝 Contribution

Issues and PRs are welcome! Let's redefine the .NET desktop development experience together.

πŸ“„ License

MIT License

Top categories

Loading Svelte Themes