🦀 English → Web

Compile natural language web app descriptions into high-performance Rust/WASM single-page applications using the Yew component framework.

Yew Component Model

Concept	Yew Equivalent
Component	#[function_component(Name)]
State	use_state(\|\| initial_value)
Props	#[derive(Properties, PartialEq)]
Event Handler	Callback::from(move \|e\| { ... })
Lifecycle	use_effect, use_effect_with
Routing	yew-router BrowserRouter + Switch

Build Toolchain

The generated project uses Trunk as the build tool. Running trunk serve starts a local dev server with hot-reload. Running trunk build --release produces an optimized dist/ folder ready for static hosting on any CDN.

API Calls from WASM

The engine uses gloo-net for async HTTP requests from within the WASM module. Async actions are spawned with wasm_bindgen_futures::spawn_local, allowing non-blocking API calls that update component state on completion.

Examples

English Input

"Create a counter app with a heading showing the count, an increment button, and a decrement button."

Data Columns

Field	Type	Value / Default	Modifier
count	UseStateHandle<i32>	0	use_state(\|\| 0i32)
on_increment	Callback	count + 1	Callback::from
on_decrement	Callback	count - 1	Callback::from
h1	Html	{ *count }	reactive display

Generated OutputRust/WASM

use yew::prelude::*;

#[function_component(Counter)]
fn counter() -> Html {
    let count = use_state(|| 0i32);

    let on_increment = {
        let count = count.clone();
        Callback::from(move |_| count.set(*count + 1))
    };

    let on_decrement = {
        let count = count.clone();
        Callback::from(move |_| count.set(*count - 1))
    };

    html! {
        <div class="counter">
            <h1 class="count">{ *count }</h1>
            <div class="controls">
                <button onclick={on_decrement}>{ "−" }</button>
                <button onclick={on_increment}>{ "+" }</button>
            </div>
        </div>
    }
}

fn main() {
    yew::Renderer::<Counter>::new().render();
}