GPUI-RSX

https://github.com/wsafight/gpui-rsx
Admin
GPUI-RSX is a Rust procedural macro that provides JSX-like syntax for GPUI, turning markup into...
Tokens:28,875
Snippets:415
Trust Score:9.5
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Run documentation site locally

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Commands to install dependencies and start the local development server for the documentation.

```bash
cd docs
bun install
bun run dev
```

--------------------------------

### Build documentation site

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Build the documentation site for navigation and example verification.

```bash
cd docs
bun run build
```

--------------------------------

### Clone and Setup Repository

Source: https://github.com/wsafight/gpui-rsx/blob/main/CONTRIBUTING.md

Commands to clone the repository and add the upstream remote.

```bash
git clone https://github.com/YOUR_USERNAME/gpui-rsx.git
cd gpui-rsx
```

```bash
git remote add upstream https://github.com/wsafight/gpui-rsx.git
```

--------------------------------

### Implement a CounterView with GPUI-RSX

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

A complete example demonstrating how to define a view and render it using the rsx! macro.

```rust
use gpui::*;
use gpui::prelude::*;
use gpui_platform::application;
use gpui_rsx::rsx;

struct CounterView {
    count: i32,
}

impl Render for CounterView {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        rsx! {
            <div class="flex flex-col gap-4 p-4">
                <h1>{format!("Count: {}", self.count)}</h1>
                <div class="flex gap-2">
                    <button
                        bg={rgb(0x3b82f6)}
                        text_color={rgb(0xffffff)}
                        px_4
                        py_2
                        rounded_md
                        onClick={cx.listener(|view, _, _window, cx| {
                            view.count += 1;
                            cx.notify();
                        })}
                    >
                        {"Increment"}
                    </button>
                    <button
                        bg={rgb(0xef4444)}
                        text_color={rgb(0xffffff)}
                        px_4
                        py_2
                        rounded_md
                        onClick={cx.listener(|view, _, _window, cx| {
                            view.count -= 1;
                            cx.notify();
                        })}
                    >
                        {"Decrement"}
                    </button>
                </div>
            </div>
        }
    }
}

fn main() {
    application().run(|cx: &mut App| {
        cx.open_window(WindowOptions::default(), |_, cx| {
            cx.new(|_cx| CounterView { count: 0 })
        }).unwrap();
        cx.activate(true);
    });
}
```

--------------------------------

### Define a Complete GPUI View

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/getting-started.md

A full example implementing the Render trait and running the application.

```rust
use gpui::*;
use gpui::prelude::*;
use gpui_platform::application;
use gpui_rsx::rsx;

struct HelloView;

impl Render for HelloView {
    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        rsx! {
            <div class="flex flex-col gap-3 p-4">
                <h1 class="text-xl font-bold">{"Hello GPUI-RSX"}</h1>
                <p class="text-gray-600">{"This markup expands to GPUI builder calls."}</p>
            </div>
        }
    }
}

fn main() {
    application().run(|cx: &mut App| {
        cx.open_window(WindowOptions::default(), |_, cx| {
            cx.new(|_cx| HelloView)
        }).unwrap();
        cx.activate(true);
    });
}
```

--------------------------------

### Rust function documentation and implementation

Source: https://github.com/wsafight/gpui-rsx/blob/main/CONTRIBUTING.md

Example of documenting a public API and defining a function in Rust.

```rust
/// Parses an RSX element from the token stream.
///
/// # Arguments
///
/// * `input` - The token stream to parse
///
/// # Returns
///
/// Returns a `Result` containing the parsed element or an error.
///
/// # Examples
///
/// ```rust
/// let element = parse_element(tokens)?;
/// ```
fn parse_element(input: ParseStream) -> Result<Element> {
    // Implementation details...
}
```

--------------------------------

### Common Styling Patterns

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Examples of conditional literals, the 'when' attribute for flexible styling, and dynamic string formatting.

```rust
// ✅ Conditional literal (compile-time, documented subset)
let button_class = if primary { "bg-blue-500 text-white" } else { "bg-gray-200 text-black" };

// ✅ when attribute (compile-time, fully flexible)
rsx! { <div when={(primary, |el| el.bg(rgb(0x3b82f6)).text_color(rgb(0xffffff)))} /> }

// ✅ Dynamic string with numeric prefix and arbitrary hex colors
let classes = format!("flex gap-{} bg-[#ff0000]", spacing);  // gap-7, gap-32, etc. all work
```

--------------------------------

### Expand Macros for Debugging

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Commands to install and use cargo-expand to inspect generated code.

```bash
# Install cargo-expand
cargo install cargo-expand

# View expanded code
cargo expand --lib
```

--------------------------------

### Static RSX Expansion

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Example of static RSX markup that is resolved during macro execution.

```rust
rsx! {
    <div class="flex gap-4 bg-blue-500">
        {"Hello"}
    </div>
}
```

--------------------------------

### Macro Invocation Example

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

The initial rsx! macro call defining a div element with attributes and children.

```rust
rsx! {
    <div class="flex gap-4 bg-blue-500" onClick={handler}>
        {"Hello"}
    </div>
}
```

--------------------------------

### Identify Method Name Errors

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Example of a common compilation error indicating an invalid method name used in the DSL.

```text
error[E0599]: no method named `flex_col` found for struct `Div`
```

--------------------------------

### Build and Test Project

Source: https://github.com/wsafight/gpui-rsx/blob/main/CONTRIBUTING.md

Standard commands to build the project and verify functionality.

```bash
cargo build
```

```bash
cargo test
```

--------------------------------

### Run demo applications

Source: https://github.com/wsafight/gpui-rsx/blob/main/demo/README.md

Execute specific binary targets within the demo directory.

```bash
cd demo
cargo run --bin hello
cargo run --bin counter
cargo run --bin palette
cargo run --bin task_list
cargo run --bin project_dashboard
cargo run --bin incident_console
cargo run --bin api_surface
cargo run --bin component
```

--------------------------------

### Update application startup logic

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/migration.md

Migrate from the legacy Application::new() pattern to the updated application() platform-based startup.

```rust
Application::new().run(|cx: &mut App| {
    cx.open_window(WindowOptions::default(), |_, cx| cx.new(|_| MyView));
});
```

```rust
use gpui_platform::application;

application().run(|cx: &mut App| {
    cx.open_window(WindowOptions::default(), |_, cx| {
        cx.new(|_| MyView)
    }).unwrap();
    cx.activate(true);
});
```

--------------------------------

### Run the Incident Console demo

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/examples/incident-console.md

Execute the application using the project's specific manifest and binary configuration.

```bash
cargo run --manifest-path demo/Cargo.toml --bin incident_console --locked
```

--------------------------------

### Run Demo Commands

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/getting-started.md

Commands to verify and run the demo application included in the repository.

```bash
cargo check --manifest-path demo/Cargo.toml --bins --locked
```

```bash
cargo run --manifest-path demo/Cargo.toml --bin incident_console --locked
```

--------------------------------

### Build and Test Commands

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Standard commands for building the project and running macro-specific tests.

```bash
cd gpui-rsx
cargo build
```

```bash
cargo test --test macro_tests
```

--------------------------------

### Verify all demo binaries

Source: https://github.com/wsafight/gpui-rsx/blob/main/demo/README.md

Run a check on all binaries to ensure build reproducibility after dependency updates.

```bash
cd demo
cargo check --bins
```

--------------------------------

### Use percentages and fractions for sizing

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/class.md

Sizing utilities support fractional and percentage-based values.

```rust
rsx! {
    <aside class="w-6/24 max-w-[40%]" />
}
```

--------------------------------

### Check API compatibility

Source: https://github.com/wsafight/gpui-rsx/blob/main/demo/README.md

Run the compile-only binary to verify API compatibility.

```bash
cd demo
cargo check --bin api_contract
```

--------------------------------

### Import GPUI-RSX macros

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/index.md

Import the primary macros used for building GPUI views.

```rust
use gpui_rsx::{rsx, rsx_expand, rsx_permissive, rsx_strict};
```

--------------------------------

### Hybrid GPUI and RSX View

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/migration.md

Demonstrates how to integrate new RSX components within an existing legacy GPUI builder structure.

```rust
rsx! {
    <div>
        {self.legacy_gpui_builder()}
        <section class="flex flex-col gap-4">
            {self.render_new_rsx_panel()}
        </section>
    </div>
}
```

--------------------------------

### Using GPUI-RSX Macros

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/class.md

Demonstrates the use of strict and permissive macros for class validation and the expansion macro for debugging.

```rust
use gpui_rsx::{rsx_expand, rsx_permissive, rsx_strict};

rsx_strict! { <div class="flex w-[280px]" /> }
rsx_permissive! { <div class="hover:bg-blue-500 flex" /> }

let preview = rsx_expand! {
    <div class="flex gap-4 bg-blue-500" />
};
```

--------------------------------

### Create Feature Branch

Source: https://github.com/wsafight/gpui-rsx/blob/main/CONTRIBUTING.md

Command to initialize a new feature branch for development.

```bash
git checkout -b feature/amazing-feature
```

--------------------------------

### Migrate GPUI code to RSX

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Comparison between the legacy handwritten GPUI builder pattern and the modern RSX macro syntax.

```rust
div()
    .flex()
    .flex_col()
    .gap(px(16.0))
    .bg(rgb(0x3b82f6))
    .child("Hello")
```

```rust
rsx! {
    <div class="flex flex-col gap-4 bg-blue-500">
        {"Hello"}
    </div>
}
```

--------------------------------

### GPUI to RSX Syntax Mapping

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/migration.md

Common translation patterns for converting manual GPUI builder methods into RSX macro syntax.

```rust
div().child("Hello")
```

```rust
rsx! { <div>{"Hello"}</div> }
```

```rust
div().child(format!("Count: {count}"))
```

```rust
rsx! { <div>{format!("Count: {count}")}</div> }
```

```rust
.w(px(200.0)).h(px(100.0))
```

```rust
<div w={px(200.0)} h={px(100.0)} />
```

```rust
.flex().gap(px(4.0))
```

```rust
<div class="flex gap-4" />
```

```rust
builder constructor with arguments
```

```rust
<Button base={Button::new("id")} />
```

--------------------------------

### Run performance benchmarks

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Execute the class parsing and code generation benchmark target.

```bash
cargo bench --bench class_performance --no-run
```

--------------------------------

### Create Basic RSX Elements

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/getting-started.md

Define simple UI elements using the rsx! macro.

```rust
rsx! {
    <div>{"Hello, GPUI!"}</div>
}
```

```rust
rsx! {
    <div>
        "Count: "
        {self.count.to_string()}
    </div>
}
```

--------------------------------

### Verify Demo Check Command

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/compatibility.md

Command used to verify the demo project with the specified toolchain and lockfile.

```bash
cargo +1.95.0 check --manifest-path demo/Cargo.toml --bins --locked
```

--------------------------------

### Execute Development and Release Workflows

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Commands for iterating on codegen changes and verifying the final output before release.

```bash
scripts/check.sh --skip-demo
cargo test test_name
scripts/check.sh --release
cargo expand --test macro_tests
```

--------------------------------

### Structure UI with helper methods

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/best-practices.md

Extract reusable UI components into dedicated methods to improve readability when render blocks become complex.

```rust
impl MyView {
    fn render_header(&self) -> impl IntoElement {
        rsx! {
            <header class="flex items-center justify-between p-4 border-b border-gray-200">
                <h1 styled>{self.title.as_str()}</h1>
                {self.render_actions()}
            </header>
        }
    }

    fn render(&mut self, _window: &mut Window, _cx: &mut Context<Self>) -> impl IntoElement {
        rsx! {
            <div class="flex flex-col h-full">
                {self.render_header()}
                <main class="flex-1 min-h-0">{self.render_content()}</main>
            </div>
        }
    }
}
```

--------------------------------

### Desktop Three-Column Layout

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

A standard three-column layout pattern using min-w-0 to ensure the center pane shrinks appropriately.

```rust
rsx! {
    <div class="flex h-full w-full bg-zinc-100">
        <nav class="w-[72px] min-w-[72px] bg-zinc-950" />

        <aside class="w-[280px] min-w-[280px] border-r border-zinc-200 bg-white">
            {"Projects"}
        </aside>

        <main class="flex-1 min-w-0 p-[18px]">
            {"Conversation, plans, diff, and results"}
        </main>

        <aside class="w-6/24 min-w-[320px] max-w-[460px] border-l border-zinc-200 bg-white">
            {"Execution trace"}
        </aside>
    </div>
}
```

--------------------------------

### Traditional GPUI Render Method

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

The standard, more verbose builder-pattern approach for rendering components in GPUI.

```rust
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    div()
        .flex()
        .flex_col()
        .gap_4()
        .p_4()
        .child(
            div()
                .text_xl()
                .font_weight(FontWeight::BOLD)
                .child(format!("Count: {}", self.count))
        )
        .child(
            div()
                .flex()
                .gap_2()
                .child(
                    div()
                        .bg(rgb(0x3b82f6))
                        .text_color(rgb(0xffffff))
                        .px_4()
                        .py_2()
                        .rounded_md()
                        .on_click(cx.listener(|view, _, _window, cx| {
                            view.count += 1;
                            cx.notify();
                        }))
                        .child("Increment")
                )
                .child(
                    div()
                        .bg(rgb(0xef4444))
                        .text_color(rgb(0xffffff))
                        .px_4()
                        .py_2()
                        .rounded_md()
                        .on_click(cx.listener(|view, _, _window, cx| {
                            view.count -= 1;
                            cx.notify();
                        }))
                        .child("Decrement")
                )
        )
}
```

--------------------------------

### Compare RSX to Generated Code

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Demonstrates that generated GPUI code matches the structure of hand-written code.

```rust
// RSX
rsx! { <div class="flex gap-4" onClick={handler} /> }

// Generated (identical to handwritten after monomorphisation)
div().id("__rsx_div_0").flex().gap(px(4.0)).on_click(handler)
```

--------------------------------

### Project Module Structure

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Visual representation of the source directory layout and file responsibilities.

```text
src/
├── lib.rs                     (~123 lines) - Macro entry point
├── parser.rs                  (~307 lines) - RSX → AST
├── diagnostics.rs             (~210 lines) - Error messages
└── codegen/
    ├── mod.rs                 (~24 lines)  - Module orchestration
    ├── tables.rs              (~617 lines) - O(1) match-based lookup tables
    ├── class.rs               (~169 lines) - CSS class parsing
    ├── attribute.rs           (~79 lines)  - Attribute → method
    ├── element.rs             (~248 lines) - Element generation + auto ID
    └── runtime.rs             (~466 lines) - Dynamic class code generation
```

--------------------------------

### Configure dependencies for GPUI-RSX

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/gpui-component.md

Define the required dependencies in Cargo.toml to ensure consistent GPUI source resolution.

```toml
[dependencies]
gpui = { git = "https://github.com/zed-industries/zed" }
gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit", "runtime_shaders", "wayland", "x11"] }
gpui-rsx = { path = ".." }
gpui-component = { git = "https://github.com/longbridge/gpui-component" }
```

--------------------------------

### GPUI-RSX Architecture Diagram

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Visual representation of the transformation pipeline from RSX markup to generated GPUI code.

```text
┌─────────────────────────────────────────────────────────────────┐
│                         User Code (RSX)                         │
│  rsx! { <div class="flex gap-4" onClick={handler}> ... </div> }│
└────────────────────────┬────────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Parser (parser.rs)                           │
│  • Tokenization                                                 │
│  • Recursive descent parsing                                    │
│  • AST construction                                             │
└────────────────────────┬────────────────────────────────────────┘
                         │
                         ▼
                    ┌────────┐
                    │  AST   │
                    └────┬───┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│                 Code Generator (codegen/)                       │
│                                                                 │
│  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐         │
│  │   tables.rs  │  │   class.rs   │  │ attribute.rs │         │
│  │ (Lookups)    │◄─┤ (Parsing)    │◄─┤ (Methods)    │         │
│  └──────────────┘  └──────────────┘  └──────────────┘         │
│                          │                   │                  │
│                          └─────────┬─────────┘                  │
│                                    ▼                            │
│                  ┌──────────────────────────┐                   │
│                  │  element.rs (Generation) │                   │
│                  └────────────┬─────────────┘                   │
│                               │                                 │
│              ┌────────────────┘                                 │
│              ▼                                                   │
│  ┌──────────────────┐                                           │
│  │   runtime.rs     │  (dynamic class only)                     │
│  └──────────────────┘                                           │
└────────────────────────┬────────────────────────────────────────┘
                         │
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│                    Generated GPUI Code                          │
│  div().id("__rsx_div_0").flex().gap(px(4.0)).on_click(handler) │
└─────────────────────────────────────────────────────────────────┘
```

--------------------------------

### Configure Release Profile for Binary Size

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Sets profile options to minimize binary size by disabling stack unwinding and enabling LTO.

```toml
[profile.release]
lto = true
codegen-units = 1
panic = "abort"   # proc-macros never need stack unwinding
```

--------------------------------

### Implement a Todo App with gpui-rsx

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Defines a TodoApp struct and its rendering logic using the rsx! macro for declarative UI construction.

```rust
use gpui::*;
use gpui::prelude::*;
use gpui_rsx::rsx;

struct TodoApp {
    todos: Vec<Todo>,
    input: String,
}

struct Todo {
    id: usize,
    text: String,
    completed: bool,
}

impl Render for TodoApp {
    fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
        rsx! {
            <div class="flex flex-col gap-4 p-4">
                <h1 class="text-2xl font-bold">
                    {"Todo List"}
                </h1>

                <div class="flex gap-2">
                    <input
                        placeholder="Add a todo..."
                        value={self.input.clone()}
                    />
                    <button
                        class="bg-blue-500 text-white px-4 py-2 rounded-md"
                        onClick={cx.listener(|view, _, _window, cx| {
                            view.add_todo();
                            cx.notify();
                        })}
                    >
                        {"Add"}
                    </button>
                </div>

                <div class="flex flex-col gap-2">
                    {for todo in self.todos.iter() {
                        <div
                            class="flex gap-2 items-center p-2 rounded-md"
                            bg={if todo.completed {
                                rgb(0xf3f4f6)
                            } else {
                                rgb(0xffffff)
                            }}
                        >
                            <span>{todo.text.clone()}</span>
                        </div>
                    }}
                </div>
            </div>
        }
    }
}

impl TodoApp {
    fn add_todo(&mut self) {
        if !self.input.is_empty() {
            self.todos.push(Todo {
                id: self.todos.len(),
                text: self.input.clone(),
                completed: false,
            });
            self.input.clear();
        }
    }
}
```

--------------------------------

### Unified Prefix Handling for Text and Background

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Optimized logic for parsing text and background classes by unifying prefix stripping and branching.

```rust
// Before (two separate strip_prefix calls for text-xl, text-red-500, …):
if let Some(color_code) = parse_color_class(&method_name) { return color_code; }
if let Some(size) = method_name.strip_prefix("text_") { … }

// After (one strip_prefix, two branches):
if let Some(rest) = method_name.strip_prefix("text_") {
    if let Some(token) = parse_color_with_method(rest, "text_color") {
        return token;                                 // text-red-500 etc.
    }
    if is_valid_text_size(rest) {
        let size_ident = syn::Ident::new(&method_name, Span::call_site());
        return quote! { .#size_ident() };            // text-xl etc.
    }
}
if let Some(rest) = method_name.strip_prefix("bg_") {
    if let Some(token) = parse_color_with_method(rest, "bg") { return token; }
}
```

--------------------------------

### Import GPUI-RSX Modules

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/getting-started.md

Include the necessary imports for GPUI and the rsx macro in your Rust files.

```rust
use gpui::*;
use gpui::prelude::*;
use gpui_platform::application;
use gpui_rsx::rsx;
```

--------------------------------

### Preview RSX Expansion

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/best-practices.md

Use the rsx_expand! macro to inspect the generated code locally.

```rust
let preview = gpui_rsx::rsx_expand! {
    <div class="flex gap-4 bg-blue-500" />
};
```

--------------------------------

### Inspect Resolved GPUI Dependencies

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/compatibility.md

Command to inspect the dependency tree for the gpui crate to ensure the correct source and revision are being used.

```bash
cargo tree --manifest-path demo/Cargo.toml --locked -i gpui
```

--------------------------------

### Verify package contents

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/reference/release-checklist.md

Lists all files that will be included in the crates.io package to ensure only necessary files are present.

```bash
cargo package --list --allow-dirty
```

--------------------------------

### Run pre-release validation

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/reference/release-checklist.md

Executes the extended validation suite including formatting, tests, and clippy checks.

```bash
scripts/check.sh --release
```

```bash
scripts/check.sh --proxy --release
```

--------------------------------

### Inspect generated code with rsx_expand!

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Use this macro to verify if class paths are static or dynamic.

```rust
let preview = gpui_rsx::rsx_expand! {
    <div class={if active { "flex gap-4" } else { "block" }} />
};
```

--------------------------------

### Fluent API Method Chaining

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

GPUI utilizes a fluent API where methods return the element instance to allow chaining.

```rust
div().flex().gap(px(4.0)).child(...)
```

--------------------------------

### Dynamic Class Values

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Demonstrates various ways to handle dynamic styling, preferring compile-time attributes.

```rust
// ✅ Static literal (compile-time, documented subset — recommended)
rsx! { <div class="flex gap-4" /> }

// ✅ Individual attributes (compile-time, type-checked)
rsx! { <div bg={dynamic_color} flex /> }

// ✅ Conditional styling with `when` (compile-time, fully flexible)
rsx! { <div when={(is_active, |this| this.bg(rgb(0x3b82f6)))} /> }

// ✅ Dynamic expression with numeric prefix, arbitrary lengths, and arbitrary colors
let classes = if active { "flex gap-4" } else { "block" };
rsx! { <div class={classes} /> }
```

--------------------------------

### Verify compatibility with cargo

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/gpui-component.md

Use cargo commands to check for duplicate GPUI crate instances and verify dependency alignment.

```bash
cargo check --manifest-path demo/Cargo.toml --bins --locked
cargo tree --manifest-path demo/Cargo.toml --locked -i gpui
```

--------------------------------

### Project directory structure

Source: https://github.com/wsafight/gpui-rsx/blob/main/CONTRIBUTING.md

Overview of the source code organization.

```text
src/
├── lib.rs          # Main macro entry point
├── parser.rs       # Syntax parsing logic
└── codegen.rs      # Code generation logic
```

--------------------------------

### Use Builder-backed Components

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Use the base attribute to specify a custom constructor for components that require specific initialization arguments.

```rust
rsx! {
    <Button
        base={Button::new("continue")}
        label={"Continue"}
        small
        primary
    />
}
```

```rust
rsx! {
    <ui::TaskCard
        base={ui::TaskCard::new(task.id)}
        title={task.title.clone()}
    />
}
```

```rust
use gpui_component::button::{Button, ButtonVariants as _};
use gpui_component::Sizable as _;

rsx! {
    <Button
        base={Button::new("continue")}
        label={"Continue"}
        small
        primary
    />
}
```

--------------------------------

### View source layout structure

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/examples/incident-console.md

The directory structure for the incident console binary, organized by workflow concepts.

```text
demo/src/bin/incident_console/
├── main.rs         window startup only
├── domain.rs       incident types and lifecycle rules
├── model.rs        derived state and application transitions
├── sample_data.rs  initial incidents and deterministic signals
├── view.rs         top-level composition and metrics
├── sidebar.rs      scopes, automation, and history controls
├── queue.rs        filters and keyed incident rows
├── details.rs      overview actions and event timeline
└── tests.rs        metrics, lifecycle, simulation, and recovery tests
```

--------------------------------

### Verify Types with Cargo

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/best-practices.md

Run cargo check to perform full type checking and view compiler diagnostics.

```bash
cargo check --manifest-path demo/Cargo.toml --bins --locked
```

--------------------------------

### Handling Unsupported Static Classes

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/troubleshooting.md

Strict mode rejects unsupported static classes; use supported classes or alternative GPUI methods.

```rust
rsx_strict! {
    <div class="hover:bg-blue-500" />
}
```

--------------------------------

### Generate runtime class application code

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Implements the logic for applying dynamic classes using a match table and split_ascii_whitespace for performance.

```rust
{
    #[inline(never)]  // prevents match table inlining; enables LLVM ICF
    fn __rsx_apply_class<E: Styled>(el: E, class: &str) -> E {
        match class {
            "flex" => el.flex(),
            "gap-4" => el.gap(px(4.0)),
            // … ~58 pre-compiled classes …
            _ => el,  // unknown class → silently ignored
        }
    }
    let __class_expr = <expression>;
    let __class_str: &str = __class_expr.as_ref();  // zero-copy for &str
    // split_ascii_whitespace: faster than split_whitespace for ASCII-only class names
    if __class_str.is_empty() {
        __el                                         // fast-path: skip iterator creation
    } else {
        __class_str.split_ascii_whitespace().fold(__el, __rsx_apply_class)
    }
}
```

--------------------------------

### List Rendering

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Lists can be rendered using standard Rust iterators or the provided for-loop syntax sugar.

```APIDOC
## List Rendering

### Description
Use `for` loops for cleaner list rendering. When elements inside a loop have stateful attributes (like `onClick`), a `key` attribute must be provided to ensure unique identification.

### Example
```rust
rsx! {
    <ul>
        {for item in &self.items {
            <li key={item.id} onClick={handler}>{item.name.clone()}</li>
        }}
    </ul>
}
```
```

--------------------------------

### Applying Dynamic Classes

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/troubleshooting.md

Use the whenClass attribute or direct GPUI methods for dynamic classes that must always be applied.

```rust
rsx! {
    <div
        class="flex"
        w={px(width)}
        whenClass={(active, "bg-blue-500 text-white")}
    />
}
```

--------------------------------

### Render lists with references

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/best-practices.md

Avoid unnecessary cloning by iterating over references in render loops.

```rust
rsx! {
    <ul>
        {for item in &self.items {
            <li>{item.name.as_str()}</li>
        }}
    </ul>
}
```

--------------------------------

### Implement data-driven controls

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/examples/incident-console.md

Use RSX loop syntax and stable keys to render interactive filter buttons.

```rust
{for filter in SeverityFilter::OPTIONS.iter() {
    <button
        key={filter.label()}
        class={if view.severity_filter == *filter {
            filter.selected_class()
        } else {
            "px-10 py-6 rounded-md text-zinc-500 cursor-pointer"
        }}
        onClick={cx.listener({
            let filter = *filter;
            move |view, _, _window, cx| {
                view.severity_filter = filter;
                cx.notify();
            }
        })}
    >
        {filter.label()}
    </button>
}}
```

--------------------------------

### Component Splitting

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Break complex UIs into smaller, reusable methods to improve readability.

```rust
// ✅ Recommended: Split into multiple methods
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
	rsx! {
		<div>
			{self.render_header()}
			{self.render_content()}
			{self.render_footer()}
		</div>
	}
}

fn render_header(&self) -> impl IntoElement {
	rsx! { <header>{"Header"}</header> }
}
```

--------------------------------

### Apply arbitrary length utilities

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/class.md

Arbitrary lengths can be specified using bracket syntax for precise sizing and spacing.

```rust
rsx! {
    <div class="w-[280px] h-[18rem] max-w-[37.5%] gap-[14px]" />
}
```

--------------------------------

### Macro Modes and Expansion

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Use rsx_strict! for compile-time validation and rsx_expand! to preview generated expressions.

```rust
use gpui_rsx::{rsx_expand, rsx_permissive, rsx_strict};

rsx_strict! { <div class="flex w-[280px]" /> }
rsx_permissive! { <div class="hover:bg-blue-500 flex" /> }

let preview = rsx_expand! {
    <div class="flex w-[280px] bg-[rgba(15,23,42,0.8)]" />
};
assert!(preview.contains("rgba"));
```

--------------------------------

### Define Custom Components in Rust

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Create reusable UI elements by defining functions that return impl IntoElement using the rsx! macro.

```rust
fn render_card(&self, title: &str, content: &str) -> impl IntoElement {
    rsx! {
        <div class="rounded-lg shadow-md p-6">
            <h2 class="text-xl font-bold">
                {title}
            </h2>
            <p class="text-gray-600">
                {content}
            </p>
        </div>
    }
}

fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    rsx! {
        <div>
            {self.render_card("Title 1", "Content 1")}
            {self.render_card("Title 2", "Content 2")}
        </div>
    }
}
```

--------------------------------

### Define a macro test case

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Use this pattern to verify that rsx! macro expansion produces the expected output.

```rust
#[test]
fn test_feature() {
    let result = quote! { rsx! { <div class="flex" /> } };
    let expected = quote! { div().flex() };
    assert_eq!(result.to_string(), expected.to_string());
}
```

--------------------------------

### Define pre-compiled common classes

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Lists the subset of classes recognized at runtime; unknown classes are ignored.

```text
flex, flex-col, flex-row, flex-1, items-center, justify-center,
gap-1..gap-8, p-1..p-8, px-2, px-4, py-1..py-4, m-2, m-4,
w-full, h-full, text-xs..text-3xl, font-bold, border, rounded-*,
cursor-pointer, overflow-hidden, bg-white, bg-black, …
```

--------------------------------

### Run Validation and Debugging

Source: https://github.com/wsafight/gpui-rsx/blob/main/CONTRIBUTING.md

Commands for running validation scripts, specific tests, and debugging macro expansions.

```bash
scripts/check.sh
```

```bash
scripts/check.sh --skip-demo
```

```bash
cargo test test_name
```

```bash
./coverage.sh          # HTML report (opens in browser on macOS)
./coverage.sh --text   # Terminal output only
```

```bash
cargo install cargo-expand
cargo expand --lib
```

--------------------------------

### Render Lists with For-Loop Syntax

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Use the for-loop syntax sugar for cleaner list rendering, which expands to iterator-based code.

```rust
rsx! {
    <ul>
        {for item in &self.items {
            <li>{item.name.clone()}</li>
        }}
    </ul>
}
```

```rust
div().children((&self.items).into_iter().map(|item| {
    div().child(item.name.clone())
}))
```

--------------------------------

### Handle Option Types

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Use conditional logic to render content based on Option values.

```rust
rsx! {
	<div>
		{if let Some(text) = &self.optional_text {
			rsx! { <span>{text.clone()}</span> }
		} else {
			rsx! { <span>{"No text"}</span> }
		}}
	</div>
}
```

--------------------------------

### Apply state-based classes

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/class.md

Use hoverClass, focusClass, and activeClass for static state styling. These attributes accept string literals and expand to StyleRefinement closures.

```rust
rsx! {
    <button
        class="px-4 py-2 rounded-md bg-blue-500 text-white"
        hoverClass="bg-blue-600"
        focusClass="border-blue-500"
        activeClass="opacity-75"
    />
}
```

--------------------------------

### Use Direct GPUI Attributes

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Prefer direct GPUI attributes over dynamic class strings when values are already Rust expressions.

```rust
rsx! {
    <aside class="flex flex-col min-w-0" w={px(self.sidebar_width)} />
}
```

--------------------------------

### Use dynamic keys

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/ids.md

Dynamic keys require an expression that implements Display to ensure unique identities.

```rust
rsx! {
    <button key={task.id} onClick={handler} />
}
```

--------------------------------

### Define static classes

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/class.md

Use string literals for compile-time class definitions to allow the macro to expand them directly into GPUI method calls.

```rust
rsx! {
    <div class="flex items-center gap-2 px-4 py-2 rounded-md" />
}
```

--------------------------------

### Use Dynamic Classes Sparingly

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Use format! for dynamic class strings only when necessary, as it incurs runtime overhead.

```rust
let class_name = format!("w-[{}px] bg-{}", width, tone);

rsx! {
    <div class={class_name} />
}
```

--------------------------------

### Update Cargo.toml dependencies

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/migration.md

Replace the crates.io gpui dependency with the Zed git repository and include the required gpui_platform features.

```toml
[dependencies]
gpui = "0.2.2"
gpui-rsx = "0.5"
```

```toml
[dependencies]
gpui = { git = "https://github.com/zed-industries/zed" }
gpui_platform = { git = "https://github.com/zed-industries/zed", features = ["font-kit", "runtime_shaders", "wayland", "x11"] }
gpui-rsx = "0.6"
```

--------------------------------

### Generated GPUI Builder Chain

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

The equivalent GPUI builder chain generated from the static RSX expansion.

```rust
div()
    .flex()
    .gap(px(4.0))
    .bg(rgb(0x3b82f6))
    .child("Hello")
```

--------------------------------

### Handle stateful classes with when

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/troubleshooting.md

Use the when attribute with explicit GPUI calls for stateful classes like overflow-scroll.

```rust
rsx! {
    <div when={(scrollable, |el| el.overflow_scroll())} />
}
```

--------------------------------

### Use self-closing and paired tags

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/syntax.md

Demonstrates that self-closing and paired tags are equivalent when no children are present.

```rust
rsx! { <div flex /> }
rsx! { <div flex></div> }
```

--------------------------------

### Migrate Lists to RSX

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/migration.md

Use Rust for loops inside the rsx! macro to render lists. Add a key attribute for stateful rows.

```rust
let mut list = div().flex().flex_col();

for item in &self.items {
    list = list.child(div().child(item.name.clone()));
}

list
```

```rust
rsx! {
    <div class="flex flex-col">
        {for item in &self.items {
            <div>{item.name.as_str()}</div>
        }}
    </div>
}
```

```rust
rsx! {
    <div class="flex flex-col">
        {for item in &self.items {
            <button key={item.id} onClick={handler}>
                {item.name.as_str()}
            </button>
        }}
    </div>
}
```

--------------------------------

### Replace legacy GPUI dependency

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

The legacy dependency to be removed when upgrading to gpui-rsx 0.6 or later.

```toml
gpui = "0.2.2"
```

--------------------------------

### Apply Dynamic Styling

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Calculate style values dynamically in Rust code and pass them to component attributes.

```rust
fn render(&mut self, _window: &mut Window, cx: &mut Context<Self>) -> impl IntoElement {
    let bg_color = if self.is_active {
        rgb(0x3b82f6)
    } else {
        rgb(0x6b7280)
    };

    rsx! {
        <div bg={bg_color} class="px-4 py-2 rounded-md">
            {"Button"}
        </div>
    }
}
```

--------------------------------

### Render iterators with for loops

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/syntax.md

Use the for loop syntax to render collections. Add keys or IDs if the loop contains stateful elements.

```rust
rsx! {
    <ul>
        {for (index, item) in items.iter().enumerate() {
            <li>{format!("{}: {}", index, item.name)}</li>
        }}
    </ul>
}
```

--------------------------------

### Invoke components

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/usage/syntax.md

Unknown single-segment tags are treated as constructor functions.

```rust
rsx! {
    <MyComponent title={"Inbox"} />
}
```

--------------------------------

### Handle Events in RSX

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Use the rsx! macro to attach event listeners to UI elements.

```rust
rsx! {
    <button onClick={cx.listener(|view, _, _window, cx| {
        println!("clicked");
    })}>
        {"Click me"}
    </button>
}
```

--------------------------------

### Avoid Over-nesting

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Flatten UI structures to improve performance and maintainability.

```rust
// ❌ Not recommended: Over-nested
rsx! {
	<div>
		<div>
			<div>
				<div>
					{"Content"}
				</div>
			</div>
		</div>
	</div>
}

// ✅ Recommended: Flatten structure
rsx! {
	<div class="flex flex-col gap-4">
		{"Content"}
	</div>
}
```

--------------------------------

### Parse Class Strings with ASCII Optimization

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Uses ASCII-specific splitting and merged prefix handling to streamline class parsing.

```rust
pub(crate) fn parse_class_string(class_str: &str) -> impl Iterator<Item = TokenStream> + '_ {
    class_str.split_ascii_whitespace().map(parse_single_class)
    //        ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //        ASCII-only: no Unicode whitespace table lookup needed
}

pub(crate) fn parse_single_class(class: &str) -> TokenStream {
    // … spacing, border … then:

    // Single strip_prefix("text_") covers both color and size cases
    if let Some(rest) = method_name.strip_prefix("text_") {
        if let Some(token) = parse_color_with_method(rest, "text_color") {
            return token;                            // text-red-500 → .text_color(rgb(...))
        }
        if is_valid_text_size(rest) {
            return quote! { .#size_ident() };        // text-xl → .text_xl()
        }
    }
    if let Some(rest) = method_name.strip_prefix("bg_") {
        if let Some(token) = parse_color_with_method(rest, "bg") {
            return token;                            // bg-blue-500 → .bg(rgb(...))
        }
    }
    // default: bare method call
}
```

--------------------------------

### Import extension traits

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/gpui-component.md

Explicitly import extension traits to ensure macro-generated method chains are type-checkable.

```rust
use gpui_component::button::ButtonVariants as _;
use gpui_component::Sizable as _;
```

--------------------------------

### Migrate Elements and Attributes to RSX

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/migration.md

Convert manual builder chains to declarative RSX syntax. Use direct attributes for dynamic Rust values.

```rust
div()
    .flex()
    .flex_col()
    .gap(px(16.0))
    .bg(rgb(0x3b82f6))
```

```rust
rsx! {
    <div class="flex flex-col gap-4 bg-blue-500" />
}
```

```rust
rsx! {
    <div w={px(width)} bg={self.background_color()} />
}
```

--------------------------------

### Auto ID Injection Logic

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Demonstrates how IDs are injected based on explicit attributes, stateful requirements, and keys.

```rust
// explicit id
<div id="my-id" onClick={h} />  →  div().id("my-id").on_click(h)

// stateful + key (for-loop scenario)
<li key={item.id} onClick={h} />
→  div().id(format!(concat!(file!(), "::__rsx_li_L42C8_{}"), item.id)).on_click(h)

// stateful, no key
<div onClick={h} />  →  div().id(concat!(file!(), "::__rsx_div_L10C4")).on_click(h)

// not stateful — key ignored, no .id()
<div key={item.id} />  →  div()
```

--------------------------------

### Run explicit validation checks

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/reference/release-checklist.md

Performs individual validation steps for benchmarks, dependencies, packaging, and documentation when full suite execution is not possible.

```bash
cargo bench --bench class_performance --no-run
cargo tree --manifest-path demo/Cargo.toml --locked -i gpui
cargo package --list --allow-dirty
bun install --cwd docs --frozen-lockfile
bun run --cwd docs check
bun run --cwd docs build
cargo publish --dry-run --allow-dirty
```

--------------------------------

### Multi-argument RSX methods

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/reference/api.md

Use tuple values for RSX attributes that map to multi-argument GPUI methods.

```rust
rsx! {
    <div
        onMouseDown={(MouseButton::Left, handler)}
        onDrag={(drag_value, build_drag)}
    />
}
```

--------------------------------

### Implement O(1) Lookup Tables with Match Statements

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Use match statements in pure functions to allow the compiler to generate efficient jump tables or tries, avoiding runtime initialization and heap allocation.

```rust
pub(crate) fn lookup_color(name: &str) -> Option<u32> {
    match name {
        "red_500" => Some(0xef4444),
        "blue_500" => Some(0x3b82f6),
        // … 242 entries …
        _ => None,
    }
}
```

--------------------------------

### Implement Event Listeners

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/getting-started.md

Attach event handlers to elements and manage keys for repeated elements.

```rust
rsx! {
    <button
        class="px-4 py-2 bg-blue-500 text-white rounded-md cursor-pointer"
        onClick={cx.listener(|view, _, _window, cx| {
            view.count += 1;
            cx.notify();
        })}
    >
        {"Increment"}
    </button>
}
```

```rust
rsx! {
    <ul>
        {for task in &self.tasks {
            <li key={task.id} onClick={handler}>
                {task.title.as_str()}
            </li>
        }}
    </ul>
}
```

--------------------------------

### Method Buffer Pre-allocation

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Optimizes memory allocation for the method buffer by over-estimating capacity to account for attribute expansion.

```rust
// Before
Vec::with_capacity(element.attributes.len() + element.children.len())

// After
Vec::with_capacity(element.attributes.len() * 2 + element.children.len())
```

--------------------------------

### Code Generation: Attribute Conversion

Source: https://github.com/wsafight/gpui-rsx/blob/main/ARCHITECTURE.md

Step 3c: Maps macro attributes to corresponding builder methods.

```rust
generate_attr_methods(onClick={handler}) → .on_click(handler)
```

--------------------------------

### Implement Conditional Rendering

Source: https://github.com/wsafight/gpui-rsx/blob/main/README.md

Use standard Rust if/else expressions inside the rsx! macro to conditionally render UI elements.

```rust
rsx! {
    <div>
        {if self.loading {
            rsx! { <div>{"Loading..."}</div> }
        } else if let Some(error) = &self.error {
            rsx! { <div class="text-red-500">{error.clone()}</div> }
        } else {
            rsx! { <div>{self.render_content()}</div> }
        }}
    </div>
}
```

--------------------------------

### Defining a stateful element with a key

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/performance.md

Shows the correct usage of a key in a loop when the element requires stateful identity via an event handler.

```rust
rsx! {
    <button key={task.id} onClick={handler}>
        {task.title.as_str()}
    </button>
}
```

--------------------------------

### Conditional Styling with when

Source: https://github.com/wsafight/gpui-rsx/blob/main/docs/src/content/docs/guides/best-practices.md

Apply optional builder calls to elements based on a boolean condition.

```rust
rsx! {
    <div
        class="px-4 py-2"
        when={(self.has_error, |el| el.bg(rgb(0xfef2f2)).text_color(rgb(0xb91c1c)))}
    >
        {message.as_str()}
    </div>
}
```
Tokens:
Raw