simple-rsx

Crates.io	simple-rsx
lib.rs	simple-rsx
version	0.1.9
created_at	2025-05-10 08:48:59.939941+00
updated_at	2025-05-20 10:13:04.746555+00
description	A simple JSX-like syntax implementation for Rust
homepage
repository	https://github.com/elcharitas/simple-rsx
max_upload_size
id	1668221
size	113,769

Jonathan Irhodia (elcharitas)

documentation

https://docs.rs/simple-rsx

README

Simple RSX

A lightweight and intuitive JSX-like syntax implementation for Rust, enabling HTML-like templating with the full power of Rust's type system.

Features

JSX-like syntax support in Rust
Self-closing tags (<div />)
Element attributes
Nested elements
String literals as children
Fragment support (<></>)
Basic error handling and validation
Tag matching validation
Procedural macro implementation
Basic HTML element rendering
Expression support in braces ({expr})
attribute value concatenation and interpolation
Conditional attributes
Conditional rendering
Looping
List rendering
Custom components
Props validation
Props binding
State management
Lifecycle hooks
Event handling
Server-side rendering

Installation

Add this to your Cargo.toml:

[dependencies]
simple-rsx = "0.1"

Why Simple RSX?

I started this project while attempting to transit my portfolio from Next.js to Rust. I tried using dioxus, yew, and hypertext, but I found them to be too complex and verbose for my needs. I wanted a simple and intuitive way to write HTML-like templates in Rust, while still leveraging the full power of Rust's type system.

Simple RSX aims to provide a straightforward and intuitive way to write HTML-like templates in Rust, while still leveraging the full power of Rust's type system. By using Rust's syntax and features, Simple RSX enables you to write expressive and type-safe code while still maintaining the simplicity and readability of HTML.

Usage

use simple_rsx::*;

// Self-closing tag with attributes
let element = rsx!(<div class="container" id="app" />);

// Nested elements with text content
let nested = rsx!(
    <div class="container" id="app">
        <p>Hello, world!</p>
    </div>
);

// element with attributes and children
let element_with_children = rsx!(
    <div class="container" id="app">
        <p>Hello, world!</p>
        <p>Another paragraph.</p>
    </div>
);

// Fragment syntax
let fragment = rsx!(
    <>
        <h1>Title</h1>
        <p>Content</p>
    </>
);

// Expression support
let count = 42;
let expression = rsx!(<p>Count: {count}</p>);

// Conditional rendering
let show = true;
let conditional = rsx!(
    <div>
        {either!(show => <p>This is shown.</p>) else <p>This is hidden.</p>}
    </div>
);

// List rendering
let items = vec!["Item 1", "Item 2", "Item 3"];
let list = rsx!(
    <ul>
        {items.iter().map(|item| rsx!(<li>{item}</li>))}
    </ul>
);

// Server-side rendering
let nodes = rsx!(
    <html>
        <head>
            <title>"My Page"</title>
        </head>
        <body>
            <h1>"Welcome to my page!"</h1>
        </body>
    </html>
);
let html = nodes.to_string();

Project Structure

simple-rsx: Main library crate
simple-rsx-macros: Procedural macros implementation

Development Status

This project is currently in active development. While basic JSX syntax is supported, many advanced features are still in progress. Contributions are welcome!