### Axum Application Setup with UIBeam in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Configures an Axum web server with UIBeam route handlers. Creates a router with two routes (index and dynamic user), binds to localhost:3000, and starts the server using tokio runtime. Demonstrates full integration between Axum and UIBeam.

```rust
#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/", get(index))
        .route("/user/:id", get(user));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000")
        .await
        .unwrap();
    axum::serve(listener, app).await.unwrap();
}
```

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

### Actix Web Application Setup with UIBeam in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Configures an Actix Web HTTP server with UIBeam route handlers. Registers routes using the service method, binds to localhost:8080, and starts the server. Demonstrates complete Actix Web and UIBeam integration.

```rust
#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(index)
            .service(about)
    })
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}
```

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

### Log Simple String Message in JavaScript

Source: https://github.com/ohkami-rs/uibeam/blob/main/examples/script/expected.html.txt

This snippet logs a simple string message 'Hello from module.js!' to the console. It serves as a fundamental example of executing JavaScript code within the UIBeam framework. The input is a string literal, and the output is a logged string.

```javascript
console.log('Hello from module.js!');
```

```javascript
console.log(&#39;Hello from module.js!&#39;);
```

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

### Actix Web Route Handler Returning UIBeam Components in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Implements async route handlers decorated with #[get] macros that return UI components. The handlers demonstrate simple and parameterized routes with Actix Web. UIBeam automatically implements the Responder trait for UI types.

```rust
#[get("/")]
async fn index() -> UI {
    UI! {
        <Layout title="Home">
            <h1>"Welcome to Actix Web with UIBeam!"</h1>
        </Layout>
    }
}

#[get("/about")]
async fn about() -> UI {
    UI! {
        <Layout title="About">
            <h1>"About Us"</h1>
            <p>"This site is built with UIBeam and Actix Web."</p>
        </Layout>
    }
}
```

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

### Log Bitwise Operation in JavaScript

Source: https://github.com/ohkami-rs/uibeam/blob/main/examples/script/expected.html.txt

This snippet demonstrates a bitwise left shift operation (1 << 3) and logs the result to the console. It's a basic example of JavaScript execution within UIBeam. The input is a numerical expression, and the output is a logged numerical value.

```javascript
console.log('1 << 3 =', 1 << 3);
```

```javascript
console.log("1 \u003c\u003c 3 =", 1 << 3);
```

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

### Configure library crate with cdylib and rlib types

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Set up the library crate configuration to build both dynamic library (cdylib) and Rust library (rlib) types. This allows the Laser components to be compiled to WASM while remaining usable as a Rust crate.

```toml
[lib]
crate-type = ["cdylib", "rlib"]
```

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

### Serve UIBeam WASM at /.uibeam with Axum

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Configure Axum web framework to serve compiled WASM files from the /.uibeam directory using ServeDir middleware. This makes the generated lasers.js and WASM binary accessible for automatic loading during component hydration.

```rust
/* axum example */

use axum::Router;
use tower_http::services::ServeDir;

fn app() -> Router {
    Router::new()
        .nest_service(
            "/.uibeam",
            ServeDir::new("./lasers/pkg")
        )
        // ...
}
```

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

### Create Actix Web server returning UIBeam UI responses

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Set up an Actix Web application with route handlers that return UI types as HTML responses. UIBeam integrates with Actix Web via the 'actix-web' feature to enable UI rendering in HTTP handlers.

```rust
use actix_web::{HttpServer, App, get};
use uibeam::UI;

#[get("/")]
async fn handler() -> UI {
    UI! {
        <h1>"Hello, Actix Web!"</h1>
    }
}

#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(||
        App::new()
            .service(handler)
    )
    .bind(("127.0.0.1", 8080))?
    .run()
    .await
}
```

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

### Create Axum web server returning UIBeam UI responses

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Set up an Axum web application with route handlers that return UI types as HTML responses. UIBeam integrates with Axum via the 'axum' feature to enable UI rendering in HTTP handlers.

```rust
use axum::{routing::get, Router};
use uibeam::UI;

async fn handler() -> UI {
    UI! {
        <h1>"Hello, Axum!"</h1>
    }
}

#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/", get(handler));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000").await.unwrap();
    axum::serve(listener, app).await.unwrap();
}
```

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

### Compose and Render UIBeam Components in Rust Main Function

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Demonstrates component composition by combining `Layout` and `AdminPage` components using UIBeam's macro syntax. The `Layout` component receives a title prop and `AdminPage` as children, then uses `uibeam::shoot()` to render the complete component tree to HTML string output.

```rust
fn main() {
    let ui = UI! {
        <Layout title="admin page">
            <AdminPage />
        </Layout>
    };

    println!("{}", uibeam::shoot(ui));
}
```

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

### Configure UIBeam with laser feature and serde dependency

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Add UIBeam 0.3.0 with the 'laser' feature and serde with derive support to Cargo.toml dependencies. This enables building reactive UI components that can be compiled to WASM.

```toml
[dependencies]
uibeam = { version = "0.3.0", features = ["laser"] }
serde  = { version = "1", features = ["derive"] }
```

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

### Compile Laser library to WASM with wasm-pack

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Build the Laser library to WebAssembly using wasm-pack with web target and custom output name. This generates WASM binaries and JavaScript bindings that enable browser-side hydration of UI components.

```bash
# example when naming the crate `components`

cd components
wasm-pack build --target web --out-name lasers

# or

wasm-pack build components --target web --out-name lasers
```

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

### Compose UIBeam Components in Rust Main Function

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Demonstrates composing multiple Beam components (Layout with nested Card components) in a main function. The UI macro creates a component hierarchy, and uibeam::shoot() renders it to HTML output. Shows how to pass props and nest components.

```rust
fn main() {
    let ui = UI! {
        <Layout title="Dashboard">
            <Card
                heading="Welcome"
                content="This is your dashboard."
            />
            <Card
                heading="Stats"
                content="You have 42 items."
            />
        </Layout>
    };

    println!("{}", uibeam::shoot(ui));
}
```

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

### Define UI Structure with UI! Macro in Rust

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Demonstrates the basic usage of the `UI!` macro to define a web UI structure in Rust. It shows how to include text, HTML elements, attributes, and dynamic content using variables and basic styling. The rendered UI is then printed to the console.

```rust
use uibeam::UI;

fn main() {
    let user_name = "foo";

    let style = "
        color: red; \
        font-size: 20px; \
    ";
    
    let ui: UI = UI! {
        <p class="hello" style={style}>
            "Welcome to the world of UIBeam!"
            <br>
            "こんにちは"
            <a
                class="user"
                style="color: blue;"
                data-user-id="123"
                href="https://example-chatapp.com/users/123"
            >
                "@"{user_name}"!”
            </a>
        </p>
    };

    println!("{}", uibeam::shoot(ui));
}
```

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

### Rust shoot Function for Rendering UI to HTML

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Shows how to use the `shoot` function from the UIBeam library to convert a `UI` template into an HTML string. This is the standard method for serializing UI components for HTTP responses.

```rust
use uibeam::{UI, shoot};

fn main() {
    let ui = UI! {
        <html>
            <head>
                <title>"My Page"</title>
            </head>
            <body>
                <h1>"Hello, World!"</h1>
            </body>
        </html>
    };

    let html = shoot(ui);
    println!("{}", html);
    // Output: <!DOCTYPE html><html><head><title>My Page</title></head><body><h1>Hello, World!</h1></body></html>
}
```

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

### Build reactive Counter Laser component with Signal and callback

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Create a Counter struct with the #[Laser] derive macro implementing reactive UI with Signal state management and callback macro for event handlers. Demonstrates dependent signals, increment/decrement functionality, and UI! macro for template rendering.

```rust
use uibeam::{UI, Laser, Signal, callback};
use serde::{Serialize, Deserialize};

#[Laser]
#[derive(Serialize, Deserialize)]
struct Counter;

impl Laser for Counter {
    fn render(self) -> UI {
        let count = Signal::new(0);

        // callback utility
        let increment = callback!(
            // dependent signals
            [count],
            // |args, ...| expression
            |_| count.set(*count + 1)
        );

        /* expanded:

        let increment = {
            let count = count.clone();
            move |_| count.set(*count + 1)
        };
        */

        let decrement = callback!([count], |_| {
            count.set(*count - 1)
        });

        UI! {
            <p>"Count: "{*count}</p>
            <button onclick={increment}">+"</button>
            <button onclick={decrement}>"-"</button>
        }
    }
}
```

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

### Rust UI! Macro for JSX-Style Templates

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Demonstrates the basic usage of the `UI!` macro in Rust to create HTML templates with interpolated variables and styles. This macro provides compile-time validation for the JSX-like syntax.

```rust
use uibeam::UI;

fn main() {
    let user_name = "Alice";
    let user_id = 42;
    let style = "color: red; font-size: 20px;";

    let ui: UI = UI! {
        <div class="container" data-user-id={user_id}>
            <p style={style}>
                "Welcome, "
                <strong>{"@"}{user_name}
                "!"
            </p>
            <a href="https://example.com/profile">
                "View Profile"
            </a>
        </div>
    };

    let html = uibeam::shoot(ui);
    println!("{}", html);
    // Output: <div class="container" data-user-id="42"><p style="color: red; font-size: 20px;">Welcome, <strong>@Alice</strong>!</p><a href="https://example.com/profile">View Profile</a></div>
}
```

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

### Axum Integration

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Allows returning `UI` directly from Axum route handlers. UIBeam automatically sets the HTML content-type header for responses.

```APIDOC
## Axum Integration - HTTP Response

The Axum integration allows returning `UI` directly from route handlers with automatic HTML content-type headers.

### Example Route Handler: Index

```rust
use axum::routing::get;
use axum::Router;
use uibeam::{UI, Beam};

struct Page {
    title: String,
    children: UI,
}

impl Beam for Page {
    fn render(self) -> UI {
        UI! {
            <html>
                <head>
                    <title>{self.title}</title>
                </head>
                <body>
                    {self.children}
                </body>
            </html>
        }
    }
}

async fn index() -> UI {
    UI! {
        <Page title="Home">
            <h1>"Welcome to UIBeam with Axum!"</h1>
            <p>"This is rendered server-side."</p>
        </Page>
    }
}
```

### Example Route Handler: User Profile

```rust
async fn user(axum::extract::Path(id): axum::extract::Path<u32>) -> UI {
    UI! {
        <Page title={format!("User {}", id)}>
            <h1>"User Profile"</h1>
            <p>"User ID: "{id}</p>
        </Page>
    }
}
```

### Axum Application Setup

```rust
#[tokio::main]
async fn main() {
    let app = Router::new()
        .route("/", get(index))
        .route("/user/:id", get(user));

    let listener = tokio::net::TcpListener::bind("0.0.0.0:3000")
        .await
        .unwrap();
    axum::serve(listener, app).await.unwrap();
}
```
```

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

### Implement Layout Component for Actix Web in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Creates a Layout component with Beam trait implementation for use in Actix Web route handlers. Provides basic HTML structure with title and children fields. Demonstrates minimal layout template for server-side rendering.

```rust
struct Layout {
    title: String,
    children: UI,
}

impl Beam for Layout {
    fn render(self) -> UI {
        UI! {
            <html>
                <head><title>{self.title}</title></head>
                <body>{self.children}</body>
            </html>
        }
    }
}
```

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

### Rust UI! Macro for Conditional and Iterative Rendering

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Illustrates advanced usage of the `UI!` macro in Rust for dynamic content generation. It includes conditional rendering using `Option<UI>` and iterative rendering of lists from Rust iterators.

```rust
use uibeam::{UI, Beam};

struct Task {
    id: u64,
    title: String,
    subtasks: Vec<String>,
    completed: bool,
}

fn main() {
    let tasks = vec![
        Task {
            id: 1,
            title: "Learn UIBeam".to_string(),
            subtasks: vec!["Read docs".to_string(), "Try examples".to_string()],
            completed: false,
        },
        Task {
            id: 2,
            title: "Build app".to_string(),
            subtasks: vec![],
            completed: true,
        },
    ];

    let ui = UI! {
        <div class="tasks">
            {tasks.into_iter().map(|t| UI! {
                <div id={format!("task-{}", t.id)} class="task">
                    <h2>{&t.title}</h2>

                    {( !t.subtasks.is_empty()).then_some(UI! {
                        <ul>
                            {t.subtasks.iter().map(|s| UI! {
                                <li>{s}</li>
                            })}
                        </ul>
                    })}

                    {t.completed.then_some(UI! {
                        <span class="badge">"✓ Completed"</span>
                    })}
                </div>
            })}
        </div>
    };

    println!("{}", uibeam::shoot(ui));
}
```

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

### UIBeam Component System

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Defines reusable UI components using the `Beam` trait. Components can have props and optionally wrap other content via the `children` field.

```APIDOC
## Beam Trait - Component System

The `Beam` trait defines reusable components with fields for props. Components with a `children` field can wrap other content.

### Example Component: Layout

```rust
struct Layout {
    title: String,
    children: UI,
}

impl Beam for Layout {
    fn render(self) -> UI {
        UI! {
            <html>
                <head>
                    <title>{self.title}</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" />
                </head>
                <body class="bg-gray-100">
                    <header class="bg-blue-600 text-white p-4">
                        <h1 class="text-2xl">{self.title}</h1>
                    </header>
                    <main class="container mx-auto p-4">
                        {self.children}
                    </main>
                </body>
            </html>
        }
    }
}
```

### Example Component: Card

```rust
struct Card {
    heading: String,
    content: String,
}

impl Beam for Card {
    fn render(self) -> UI {
        UI! {
            <div class="bg-white shadow-md rounded p-6">
                <h2 class="text-xl font-bold mb-2">{self.heading}</h2>
                <p>{self.content}</p>
            </div>
        }
    }
}
```

### Usage Example

```rust
fn main() {
    let ui = UI! {
        <Layout title="Dashboard">
            <Card
                heading="Welcome"
                content="This is your dashboard."
            />
            <Card
                heading="Stats"
                content="You have 42 items."
            />
        </Layout>
    };

    println!("{}", uibeam::shoot(ui));
}
```
```

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

### Build Todo App with Reactive State Management in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

This Rust code snippet illustrates the use of the `Signal` type for reactive state management within a `Laser` component, creating a simple Todo application. It manages two signals: `todos` for the list of tasks and `input` for the text field. Callback functions handle adding new todos and updating the input field value, with `Signal::set` triggering automatic UI updates. The `UI!` macro is used to render the list, input field, and add button.

```rust
use uibeam::{UI, Laser, Signal, callback};
use serde::{Serialize, Deserialize};

#[Laser]
#[derive(Serialize, Deserialize)]
pub struct TodoApp;

impl Laser for TodoApp {
    fn render(self) -> UI {
        let todos = Signal::new(vec![
            "Learn UIBeam".to_string(),
            "Build an app".to_string(),
        ]);
        let input = Signal::new(String::new());

        let add_todo = callback!([todos, input], |_| {
            if !input.is_empty() {
                let mut current = (*todos).clone();
                current.push((*input).clone());
                todos.set(current);
                input.set(String::new());
            }
        });

        let handle_input = callback!([input], |e: uibeam::laser::InputEvent| {
            use wasm_bindgen::JsCast;
            let target: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
            input.set(target.value());
        });

        UI! {
            <div class="todo-app">
                <h2>"Todo List"</h2>
                <ul>
                    {todos.iter().map(|todo| UI! {
                        <li>{todo}</li>
                    })}
                </ul>
                <input
                    type="text"
                    value={(*input).clone()}
                    oninput={handle_input}
                    placeholder="Add a todo..."
                />
                <button onclick={add_todo}>"Add"</button>
            </div>
        }
    }
}

```

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

### Axum Route Handler Returning UIBeam Components in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Implements async route handlers with Axum that return UI components directly. The index handler returns a simple page, while the user handler accepts a path parameter and interpolates it into the component. Axum automatically handles HTML content-type headers.

```rust
async fn index() -> UI {
    UI! {
        <Page title="Home">
            <h1>"Welcome to UIBeam with Axum!"</h1>
            <p>"This is rendered server-side."</p>
        </Page>
    }
}

async fn user(axum::extract::Path(id): axum::extract::Path<u32>) -> UI {
    UI! {
        <Page title={format!("User {}", id)}>
            <h1>"User Profile"</h1>
            <p>"User ID: "{id}</p>
        </Page>
    }
}
```

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

### Conditional and Iterative Rendering with UI! in Rust

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Shows how to dynamically render content based on conditions and iterate over collections within the `UI!` macro in Rust. It demonstrates rendering optional elements using `then_some` and rendering lists of items by mapping over an iterator. This allows for creating flexible and data-driven UIs.

```rust
use uibeam::{UI, Beam};

struct Task {
    id: u64,
    title: String,
    subtasks: Vec<String>,
    completed: bool,
}

fn main() {
    let t = Task {
        id: 42,
        title: "try uibeam".to_string(),
        subtasks: vec![],
        completed: false,
    };

    let ui = UI! {
        <div id={format!("task-{}", t.id)}>
            <h2>{t.title}</h2>

            <h3>"subtasks"</h3>
            <ul>
                {t.subtasks.iter().map(|s| UI! {
                    <li>{s}</li>
                })}
            </ul>

            {t.completed.then_some(UI! {
                <i><strong>"completed"</strong></i>
            })}
        </div>
    };

    println!("{}", uibeam::shoot(ui));
}
```

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

### Rust UI! Macro for Unsafe HTML Insertion

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Demonstrates how to insert unescaped HTML content into UIBeam templates using raw string literals and `unsafe` blocks. This is useful for embedding scripts or pre-rendered HTML snippets.

```rust
use uibeam::UI;

fn main() {
    let external_script = "<script>console.log('hello');</script>";

    let ui = UI! {
        <html>
            <body>
                <script>
                    r#"console.log('1 << 3 =', 1 << 3);"#
                </script>

                <script>
                    unsafe {external_script}
                </script>

                <div>"This <strong>will be escaped</strong>"</div>
            </body>
        </html>
    };

    println!("{}", uibeam::shoot(ui));
    // Scripts are rendered unescaped, div content is HTML-escaped
}
```

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

### Actix Web Integration

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Implements the `Responder` trait for `UI` types, allowing them to be returned directly from Actix Web route handlers.

```APIDOC
## Actix Web Integration - HTTP Response

The Actix Web integration implements the `Responder` trait for `UI` types, enabling direct returns from handlers.

### Example Component: Layout

```rust
use actix_web::{HttpServer, App, get, web};
use uibeam::{UI, Beam};

struct Layout {
    title: String,
    children: UI,
}

impl Beam for Layout {
    fn render(self) -> UI {
        UI! {
            <html>
                <head><title>{self.title}</title></head>
                <body>{self.children}</body>
            </html>
        }
    }
}
```

### Example Route Handler: Index

```rust
#[get("/")]
async fn index() -> UI {
    UI! {
        <Layout title="Home">
            <h1>"Welcome to Actix Web with UIBeam!"</h1>
        </Layout>
    }
}
```

### Example Route Handler: About

```rust
#[get("/about")]
async fn about() -> UI {
    UI! {
        <Layout title="About">
            <h1>"About Us"</h1>
            <p>"This site is built with UIBeam and Actix Web."</p>
        </Layout>
    }
}
```

### Actix Web Application Setup

```rust
#[actix_web::main]
async fn main() -> std::io::Result<()> {
    HttpServer::new(|| {
        App::new()
            .service(index)
            .service(about)
    })
    .bind(("127.0.0.1", 8080)?)
    .run()
    .await
}
```
```

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

### Use Laser component in UIBeam UI rendering

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Import and use custom Laser components within UI! macro expressions to render reactive components. The UI is initially rendered as a static template server-side, then hydrated with WASM on the client-side.

```rust
use lasers::Counter;
use uibeam::UI;

async fn index() -> UI {
    UI! {
        <Counter />
    }
}
```

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

### Build local Laser component with unserializable items

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Use #[Laser(local)] attribute to create local Laser components that don't require Serialize/Deserialize traits and can contain unserializable fields like function pointers. Local Lasers are only available as UI elements within non-local Lasers or other local Lasers and are not independently hydrated.

```rust
#[Laser(local)]
struct MyLocalComponent;
```

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

### Create Event Handlers with callback! Macro in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

The `callback!` macro in UIBeam simplifies the creation of closures for event handlers. It automatically clones captured signals, ensuring they are safely available within the event handler's scope. This is essential for interactive elements like form inputs or buttons, allowing them to update signal values when user interactions occur. The macro takes a list of signals to capture and a closure that receives the event.

```rust
use uibeam::{UI, Laser, Signal, callback};
use serde::{Serialize, Deserialize};

#[Laser]
#[derive(Serialize, Deserialize)]
pub struct Form;

impl Laser for Form {
    fn render(self) -> UI {
        let name = Signal::new(String::new());
        let email = Signal::new(String::new());
        let submitted = Signal::new(false);

        let handle_name = callback!([name], |e: uibeam::laser::InputEvent| {
            use wasm_bindgen::JsCast;
            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
            name.set(input.value());
        });

        let handle_email = callback!([email], |e: uibeam::laser::InputEvent| {
            use wasm_bindgen::JsCast;
            let input: web_sys::HtmlInputElement = e.target().unwrap().dyn_into().unwrap();
            email.set(input.value());
        });

        let submit = callback!([name, email, submitted], |_| {
            if !name.is_empty() && !email.is_empty() {
                submitted.set(true);
            }
        });

        UI! {
            <div class="form">
                {( !*submitted ).then_some(UI! {
                    <div>
                        <input
                            type="text"
                            placeholder="Name"
                            value={(*name).clone()}
                            oninput={handle_name}
                        />
                        <input
                            type="email"
                            placeholder="Email"
                            value={(*email).clone()}
                            oninput={handle_email}
                        />
                        <button onclick={submit}>"Submit"</button>
                    </div>
                })}

                {( *submitted ).then_some(UI! {
                    <p>"Thanks, "{& *name}"! We'll email you at "{& *email}"."</p>
                })}
            </div>
        }
    }
}
```

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

### Implement Beam Trait for Layout Component in Rust

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Creates a reusable layout component by implementing the `Beam` trait with JSX-like syntax. The component accepts a `title` string and `children` UI elements, rendering them within HTML structure with Tailwind CSS styling. This demonstrates parent component patterns and child component composition in UIBeam.

```rust
use uibeam::{Beam, UI};

struct Layout {
    title: String,
    children: UI,  // `children` field
}

impl Beam for Layout {
    fn render(self) -> UI {
        UI! {
            <html>
                <head>
                    <title>{self.title}</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css">
                </head>
                <body class="bg-gray-100">
                    {self.children}
                </body>
            </html>
        }
    }
}
```

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

### Implement Interactive Counter with Laser Trait in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

This snippet demonstrates how to create an interactive counter component using the `Laser` trait and `Signal` for state management in Rust. It defines a `Counter` struct annotated with `#[Laser]`, implements the `render` method to display the count and buttons for incrementing/decrementing. The `callback!` macro handles button clicks by updating the `Signal` value, which automatically triggers a UI re-render. Server-side usage is also shown, where multiple `Counter` instances can be rendered.

```rust
use uibeam::{UI, Laser, Signal, callback};
use serde::{Serialize, Deserialize};

#[Laser]
#[derive(Serialize, Deserialize)]
pub struct Counter {
    pub initial_count: i32,
}

impl Laser for Counter {
    fn render(self) -> UI {
        let count = Signal::new(self.initial_count);

        let increment = callback!([count], |_| {
            count.set(*count + 1);
        });

        let decrement = callback!([count], |_| {
            count.set(*count - 1);
        });

        UI! {
            <div class="counter">
                <p class="text-2xl font-bold">"Count: "{*count}</p>
                <div>
                    <button
                        class="bg-blue-500 text-white px-4 py-2 rounded"
                        onclick={increment}
                    >
                        "+"
                    </button>
                    <button
                        class="bg-red-500 text-white px-4 py-2 rounded"
                        onclick={decrement}
                    >
                        "-"
                    </button>
                </div>
            </div>
        }
    }
}

// Server-side usage (requires serving /.uibeam directory with WASM artifacts)
fn page() -> UI {
    UI! {
        <html>
            <body>
                <h1>"Interactive Counter"</h1>
                <Counter initial_count={0} />
                <Counter initial_count={10} />
            </body>
        </html>
    }
}

```

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

### Implement Page Component for Axum in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Defines a reusable Page component with Beam trait implementation for use in Axum route handlers. Provides HTML structure with title and children, serving as a base layout template for server-rendered pages.

```rust
struct Page {
    title: String,
    children: UI,
}

impl Beam for Page {
    fn render(self) -> UI {
        UI! {
            <html>
                <head>
                    <title>{self.title}</title>
                </head>
                <body>
                    {self.children}
                </body>
            </html>
        }
    }
}
```

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

### Insert Raw HTML Strings Safely in Rust

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Illustrates how to insert HTML strings directly into the UI structure without escaping in Rust. It highlights the use of raw string literals (`r#"..."#`) and `unsafe` blocks to include content like JavaScript directly. This is useful for embedding scripts or pre-formatted HTML snippets.

```rust
use uibeam::UI;

fn main() {
    println!("{}", uibeam::shoot(UI! {
        <html>
            <body>
                /* ↓ wrong here: scripts are html-escaped... */

                <script>
                    "console.log('1 << 3 =', 1 << 3);"
                </script>

                <script>
                    {include_str!("index.js")}
                </script>

                /* ↓ scripts are NOT html-escaped, rendered as they are */

                <script>
                    r#"console.log('1 << 3 =', 1 << 3);"#
                </script>

                <script>
                    unsafe {include_str!("index.js")}
                </script>

                <script>
                    unsafe {"console.log('1 << 3 =', 1 << 3);"}
                </script>
            </body>
        </html>
    }));
}
```

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

### Create Derived Reactive Values with computed! Macro in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

This Rust code demonstrates the `computed!` macro for creating derived reactive values within a `Laser` component. It defines a `Calculator` component with `Signal`s for `width` and `height`. The `computed!` macro is used to derive `area` and `perimeter` based on these signals. Changes to `width` or `height` automatically trigger recalculations of `area` and `perimeter`, and the UI updates accordingly. Callback functions are provided to increment the width and height.

```rust
use uibeam::{UI, Laser, Signal, callback, computed};
use serde::{Serialize, Deserialize};

#[Laser]
#[derive(Serialize, Deserialize)]
pub struct Calculator;

impl Laser for Calculator {
    fn render(self) -> UI {
        let width = Signal::new(5u32);
        let height = Signal::new(10u32);

        let area = computed!([width, height], || {
            *width * *height
        });

        let perimeter = computed!([width, height], || {
            2 * (*width + *height)
        });

        let inc_width = callback!([width], |_| width.set(*width + 1));
        let inc_height = callback!([height], |_| height.set(*height + 1));

        UI! {
            <div class="calculator">
                <p>"Width: "{*width}" Height: "{*height}</p>
                <p>"Area: "{*area}</p>
                <p>"Perimeter: "{*perimeter}</p>
                <button onclick={inc_width}>"+ Width"</button>
                <button onclick={inc_height}>"+ Height"</button>
            </div>
        }
    }
}

```

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

### Implement Beam Trait for AdminPage Component in Rust

Source: https://github.com/ohkami-rs/uibeam/blob/main/README.md

Implements a `Beam` trait for an admin page component containing a password form. Uses UIBeam's JSX-like syntax with Tailwind CSS classes for styling form elements including labels, inputs, and submit buttons. This demonstrates form handling and styled UI composition within child components.

```rust
struct AdminPage {}

impl Beam for AdminPage {
    fn render(self) -> UI {
        UI! {
            <main class="container mx-auto flex-grow py-8 px-4">
                <section class="bg-white shadow-md rounded-lg p-6">
                    <h1 class="text-2xl font-bold text-gray-800 mb-6">
                        "Password"
                    </h1>
                    <form method="post" action="" class="w-full">
                        <div class="flex flex-col gap-4">
                            <div class="flex flex-col">
                                <label for="adminPassword" class="text-gray-700 text-sm font-bold mb-1">
                                    "password"
                                </label>
                                <input
                                    required
                                    type="password"
                                    id="adminPassword"
                                    name="adminPassword"
                                    class="py-2 px-3 border border-gray-400 rounded focus:outline-none focus:shadow-outline"
                                />
                            </div>
                        </div>
                        <div class="mt-6">
                            <button
                                type="submit"
                                class="bg-purple-500 hover:bg-purple-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline"
                            >
                                "Send"
                            </button>
                        </div>
                    </form>
                </section>
            </main>
        }
    }
}
```

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

### Implement Beam Trait for Card Component in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Creates a reusable Card component implementing the Beam trait with heading and content props. The render method generates a styled div with shadow and padding using Tailwind CSS classes. This component demonstrates simple prop-based customization.

```rust
struct Card {
    heading: String,
    content: String,
}

impl Beam for Card {
    fn render(self) -> UI {
        UI! {
            <div class="bg-white shadow-md rounded p-6">
                <h2 class="text-xl font-bold mb-2">{self.heading}</h2>
                <p>{self.content}</p>
            </div>
        }
    }
}
```

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

### Implement Beam Trait for Layout Component in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

Defines a reusable Layout component that implements the Beam trait with a title prop and children field. The render method uses UIBeam's macro syntax to generate HTML with Tailwind CSS styling. This component wraps other content and serves as a template for pages.

```rust
use uibeam::{Beam, UI};

struct Layout {
    title: String,
    children: UI,
}

impl Beam for Layout {
    fn render(self) -> UI {
        UI! {
            <html>
                <head>
                    <title>{self.title}</title>
                    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" />
                </head>
                <body class="bg-gray-100">
                    <header class="bg-blue-600 text-white p-4">
                        <h1 class="text-2xl">{self.title}</h1>
                    </header>
                    <main class="container mx-auto p-4">
                        {self.children}
                    </main>
                </body>
            </html>
        }
    }
}
```

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

### Run Side Effects with Signals using effect! Macro in Rust

Source: https://context7.com/ohkami-rs/uibeam/llms.txt

The `effect!` macro in UIBeam automatically executes a closure when any of the captured signals change. This is useful for performing actions like logging to the console or making external API calls in response to state updates. It requires a list of signals to track and a closure to execute. The closure can access and modify the captured signals.

```rust
use uibeam::{UI, Laser, Signal, callback, effect};
use serde::{Serialize, Deserialize};

#[Laser]
#[derive(Serialize, Deserialize)]
pub struct Logger;

impl Laser for Logger {
    fn render(self) -> UI {
        let count = Signal::new(0);

        effect!([count], || {
            web_sys::console::log_1(&format!("Count changed to: {}", *count).into());
        });

        let increment = callback!([count], |_| {
            count.set(*count + 1);
        });

        UI! {
            <div>
                <p>"Count: "{*count}" (check console)"</p>
                <button onclick={increment}>"Increment"</button>
            </div>
        }
    }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.