Crate simple_rsx

Simple RSX - A React-inspired JSX Library for Rust

I created Simple RSX to bring the familiar feel of React’s JSX to Rust projects. If you’re coming from a React background, you’ll feel right at home. And if you’re new to both, don’t worry - I’ve made it super intuitive while keeping all the type safety and performance benefits of Rust.

Why Simple RSX?

I started this project while attempting to transit my portfolio from Next.js to Rust. I wanted to keep my codebase as simple as possible, and I wanted to use Rust’s powerful type system to ensure that my components were always correct. I tried existing libraries like yew and sycamore, but they were either too complex or didn’t feel quite like React. And so, here we are.

I know what you’re thinking - “Another UI library?” But here’s what makes Simple RSX special:

• React-like Syntax: Write your templates using the rsx! macro - it’s just like JSX!
• Type Safety: Get compile-time checks for your components and props
• Zero Runtime Overhead: All the magic happens at compile time
• Familiar Patterns: Components, props, fragments - all the React concepts you love

Let’s Get Started!

Here’s a quick taste of what you can do:

use simple_rsx::*;

// Create your first component - looks familiar, right?
let greeting = rsx!(
    <div class="greeting">
        <h1>Hello, {"World"}!</h1>
        <p>Welcome to Simple RSX</p>
    </div>
);

// Turn it into HTML - perfect for server-side rendering (P.S: This to me is my favorite feature)
println!("{}", greeting);

Features You’ll Love

JSX-style Elements - Write HTML, Get Rust

use simple_rsx::*;

// Self-closing tags? Check!
let img = rsx!(<img src="image.jpg" alt="An image" />);

// Nested elements? Of course!
let card = rsx!(
    <div class="card">
        <h2>Title</h2>
        <p>Content</p>
    </div>
);

// Fragments? No problem! Just use <> and the children will be flattened
let fragment = rsx!(
    <>
        <h1>Title</h1>
        <p>No wrapper needed</p>
    </>
);

Dynamic Content - Make It Come Alive

use simple_rsx::*;

let name = "World";
let count = 42;

// Drop in any Rust expression with {}
let dynamic = rsx!(
    <div>
        <h1>Hello, {name}!</h1>
        <p>Count: {count}</p>
    </div>
);

// Conditional rendering? Use the either! macro
let show = true;
let conditional = either!(show =>
    <p>Now you see me</p>
else
    <p>Now you don&apos;t</p>
);

// Conditional classes? Easy!
let is_active = true;
let button = rsx!(
    <button class={if is_active { "active" } else { "" }}>
        Toggle
    </button>
);

// Render lists with iterator magic
let items = vec!["A", "B", "C"];
let list = rsx!(
    <ul>
        {items.iter().map(|item| rsx!(<li>{item}</li>))}
    </ul>
);

Components and Props - Build Reusable UI

use simple_rsx::*;

// Define your props - just like React's PropTypes
#[derive(Default)]
struct ButtonProps {
    text: String,
    variant: String,
    children: Vec<Node>,
}

// Create a component - clean and simple
#[component]
fn Button(props: ButtonProps) -> Node {
    rsx!(
        <button class={format!("btn btn-{}", props.variant)}>
            {props.text}
            {props.children}
        </button>
    )
}

// Use it anywhere!
let button = rsx!(
    <Button text="Click me" variant="primary">
        <span>"→"</span>
    </Button>
);

HTML Data attributes

With simple RSX, HTML data attributes are the only props which do not get validated by the compiler. This allows you to use any valid literal or expression in the value of a data attribute.

use simple_rsx::*;

// Data attributes? No problem!
let element = rsx!(
    <div
        data_user="john"
        data_role="admin"
    />
);

Modules

dom

elements

signals

Macros

either

A procedural macro that transforms a conditional expression into a JSX-like syntax.

rsx

A procedural macro that provides JSX-like syntax for creating HTML elements in Rust.

Structs

Element

Represents an HTML element with its tag name, attributes, and children.

Enums

Node

Represents a node in the RSX tree.

Traits

Attribute

A trait for converting values into HTML attribute strings.

Component

A trait for creating reusable components.

OptionAttribute

A trait for handling optional attribute values.

Attribute Macros

component

A procedural macro that transforms a rust function into a component.