Introduction

Natrix is a Rust-first frontend framework. Embracing Rust’s strengths—leveraging smart pointers, derive macros, the builder pattern, and other idiomatic Rust features to create a truly native experience.

A Simple Example

A simple counter in Natrix looks like this:

use natrix::prelude::*;

#[derive(State)]
struct Counter {
    value: Signal<usize>,
}

fn render_counter() -> impl Element<Counter> {
    e::button()
        .text(|ctx: RenderCtx<Counter>| *ctx.value)
        .on::<events::Click>(|mut ctx: EventCtx<Counter>, _| {
            *ctx.value += 1;
        })
}

Standout features

• ✅ No macro DSL – Macro-based DSLs break formatting & Rust Analyzer support. Natrix avoids them completely for a smoother dev experience.
• ✅ Callbacks use references to state – Instead of closures capturing state setters, Natrix callbacks take a reference to the state, which better aligns with Rust’s ownership model.
• ✅ JS style bundling solution – Natrix has a compile time css and asset bundling solution that works with dependencies out of the box.

Design Goals

• Developer experience first – Natrix is designed to feel natural for Rust developers.
• Idiomatic Rust – We use Rust-native features & patterns, not what worked for js.
• Stop porting JS to Rust – Rust is an amazing language, let’s build a frontend framework that actually feels like Rust.

Getting Started

Install the natrix cli from github:

cargo install --git https://github.com/Serpent-Tools/natrix natrix-cli

Then use natrix new my-app to create a simple hello world app, then edit its resulting Cargo.toml to point to github:

natrix = { git = "https://github.com/Serpent-Tools/natrix", package = "natrix" }

Now you can run the project with natrix dev, for learning the framework you can use cargo doc and read the Book