Lib.rs

›

#html-template #html #react #markup #template #jsx #element

simple-rsx

A simple JSX-like syntax implementation for Rust

6 releases

Uses new Rust 2024

new 0.1.5	May 11, 2025
0.1.4	May 11, 2025

#127 in Template engine

149 downloads per month

MIT license

11KB
177 lines

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
Event handling
Conditional rendering
Looping
List rendering
Custom components (partial support through functions)
Props validation
State management
Lifecycle hooks
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>
        {if show {
            rsx!(<p>This is shown.</p>)
        } else {
            rsx!(<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!