Yew

https://github.com/yewstack/yew
Admin
Yew is a modern Rust framework for creating multi-threaded, front-end web apps with WebAssembly,...
Tokens:86,922
Snippets:804
Trust Score:9
License:Apache-2.0
Update:3 weeks ago
Show doc for...
Tokens:
Raw
### Run the example with wasmtime

Source: https://github.com/yewstack/yew/blob/master/examples/wasi_ssr_module/README.md

Execute the built WASM file using the wasmtime CLI. Requires wasmtime to be installed.

```bash
wasmtime target/wasm32-wasip1/release/wasi_ssr_module.wasm
```

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

### Full router example with BrowserRouter and Switch

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/router.mdx

Complete example showing a Router setup. The Switch component matches the current URL to a Route variant and calls the render callback. The BrowserRouter must wrap the Switch for Links and Switches to work. The Secure component uses use_navigator to programmatically navigate home.

```rust
use yew_router::prelude::*;
use yew::prelude::*;

#[derive(Clone, Routable, PartialEq)]
enum Route {
    #[at("/")]
    Home,
    #[at("/secure")]
    Secure,
    #[not_found]
    #[at("/404")]
    NotFound,
}

#[component(Secure)]
fn secure() -> Html {
    let navigator = use_navigator().unwrap();

    let onclick = Callback::from(move |_| navigator.push(&Route::Home));
    html! {
        <div>
            <h1>{ "Secure" }</h1>
            <button {onclick}>{ "Go Home" }</button>
        </div>
    }
}

fn switch(routes: Route) -> Html {
    match routes {
        Route::Home => html! { <h1>{ "Home" }</h1> },
        Route::Secure => html! {
            <Secure />
        },
        Route::NotFound => html! { <h1>{ "404" }</h1> },
    }
}

#[component(Main)]
fn app() -> Html {
    html! {
        <BrowserRouter>
            <Switch<Route> render={switch} /> // <- must be child of <BrowserRouter>
        </BrowserRouter>
    }
}
```

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

### Install dependencies with npm install

Source: https://github.com/yewstack/yew/blob/master/website/README.md

Installs the dependencies for the Docusaurus website. Run this before starting the local development server.

```console
npm install
```

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

### Run an example with trunk serve

Source: https://github.com/yewstack/yew/blob/master/examples/README.md

Move into the directory of the example you want to run (here todomvc) and build and serve it with trunk. Requires the development environment to be set up as described in the Yew documentation.

```bash
cd examples/todomvc

trunk serve --open
```

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

### Build the example with cargo

Source: https://github.com/yewstack/yew/blob/master/examples/wasi_ssr_module/README.md

Run this command from the repository root to build the example for the wasm32-wasip1 target in release mode.

```bash
cargo build --manifest-path examples/wasi_ssr_module/Cargo.toml --target wasm32-wasip1 --release
```

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

### Start local development server with npm start

Source: https://github.com/yewstack/yew/blob/master/website/README.md

Starts a local development server and opens a browser window. Most changes are reflected live without restarting. Note this only builds for English locale unlike a production build.

```console
npm start
```

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

### use_navigator hook example

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/router.mdx

Shows how to get a Navigator via use_navigator() and push a route in a callback. The navigator must be cloned for multiple callbacks.

```rust
#[component]
pub fn MyComponent() -> Html {
    let navigator = use_navigator().unwrap();
    let onclick = Callback::from(move |_| navigator.push(&Route::Home));

    html! {
        <button {onclick}>{"Click to go home"}</button>
    }
}
```

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

### Run with Trunk

Source: https://github.com/yewstack/yew/blob/master/examples/communication_parent_to_child/README.md

Starts the Trunk development server and opens the application in the browser.

```bash
trunk serve --open
```

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

### Yew mouse-move example with Cargo.toml

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/basic-web-technologies/web-sys.mdx

Yew version of the mouse-move example using a Callback and the html! macro. Requires the DomRect feature in Cargo.toml and uses TargetCast to get the event target as an HtmlElement.

```toml
[dependencies.web-sys]
version = "0.3"
# We need to enable the `DomRect` feature to use the
# `get_bounding_client_rect` method.
features = [
    "console",
    "HtmlElement",
    "MouseEvent",
    "DomRect",
]
```

```rust
use web_sys::{console, HtmlElement, MouseEvent};
use yew::{
    html,
    Callback, TargetCast,
};

let onmousemove = Callback::from(|e: MouseEvent| {
    if let Some(target) = e.target_dyn_into::<HtmlElement>() {
        let rect = target.get_bounding_client_rect();
        let x = (e.client_x() as f64) - rect.left();
        let y = (e.client_y() as f64) - rect.top();
        console::log_1(&format!("Left? : {} ; Top? : {}", x, y).into());
    }
});

html! {
    <div id="mousemoveme" {onmousemove}></div>
};
```

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

### Install Trunk with Cargo

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/getting-started/introduction.mdx

Installs Trunk, the recommended Wasm web application bundler for Yew, using Cargo. The installation may take a while because it compiles from source; prebuilt binaries are available for some package managers.

```shell
# note that this might take a while to install because it compiles everything from scratch
# Trunk also provides prebuilt binaries for a number of major package managers
# See https://trunk-rs.github.io/trunk/guide/getting-started/installation.html for further details
cargo install --locked trunk
```

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

### Install cargo-make

Source: https://github.com/yewstack/yew/blob/master/CONTRIBUTING.md

Installs cargo-make, a task runner used to manage Yew's development tasks.

```bash
cargo install cargo-make
```

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

### Provide context with ContextProvider and consume with use_context

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/contexts.mdx

This example shows how to define a context struct (Theme), provide it using ContextProvider, and consume it in child components using the use_context hook. The context must implement Clone and PartialEq. The children are re-rendered when the context changes. The example includes a main App component, a Toolbar component, and a ThemedButton component that uses the context.

```rust
use yew::prelude::*;


/// App theme
#[derive(Clone, Debug, PartialEq)]
struct Theme {
    foreground: String,
    background: String,
}

/// Main component
#[component]
pub fn App() -> Html {
    let ctx = use_state(|| Theme {
        foreground: "#000000".to_owned(),
        background: "#eeeeee".to_owned(),
    });

    html! {
        // `ctx` is type `Rc<UseStateHandle<Theme>>` while we need `Theme`
        // so we deref it.
        // It derefs to `&Theme`, hence the clone
        <ContextProvider<Theme> context={(*ctx).clone()}>
            // Every child here and their children will have access to this context.
            <Toolbar />
        </ContextProvider<Theme>>
    }
}

/// The toolbar.
/// This component has access to the context
#[component]
pub fn Toolbar() -> Html {
    html! {
        <div>
            <ThemedButton />
        </div>
    }
}

/// Button placed in `Toolbar`.
/// As this component is a child of `ThemeContextProvider` in the component tree, it also has access
/// to the context.
#[component]
pub fn ThemedButton() -> Html {
    let theme = use_context::<Theme>().expect("no ctx found");

    html! {
        <button style={format!("background: {}; color: {};", theme.background, theme.foreground)}>
            { "Click me!" }
        </button>
    }
}
```

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

### web-sys mouse-move example with Cargo.toml

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/basic-web-technologies/web-sys.mdx

Rust implementation of the JavaScript mouse-move example using only web-sys. Requires the listed Cargo.toml features and uses a Closure to handle the event; the Closure must be kept alive to avoid being dropped.

```toml
[dependencies]
wasm-bindgen = "0.2"

[dependencies.web-sys]
version = "0.3"
# We need to enable all the web-sys features we want to use!
features = [
    "console",
    "Document",
    "HtmlElement",
    "MouseEvent",
    "DomRect",
]
```

```rust
use wasm_bindgen::{prelude::Closure, JsCast};
use web_sys::{console, Document, HtmlElement, MouseEvent};

let mousemove = Closure::<dyn Fn(MouseEvent)>::wrap(Box::new(|e: MouseEvent| {
    let rect = e
        .target()
        .expect("mouse event doesn't have a target")
        .dyn_into::<HtmlElement>()
        .expect("event target should be of type HtmlElement")
        .get_bounding_client_rect();
    let x = (e.client_x() as f64) - rect.left();
    let y = (e.client_y() as f64) - rect.top();
    console::log_1(&format!("Left? : {} ; Top? : {}", x, y).into());
}));

Document::new()
    .expect("global document not set")
    .get_element_by_id("mousemoveme")
    .expect("element with id `mousemoveme` not present")
    .unchecked_into::<HtmlElement>()
    .set_onmousemove(mousemove.as_ref().dyn_ref());

// we now need to save the `mousemove` Closure so that when
// this event fires the closure is still in memory.
```

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

### Configure Trunk server with Trunk.toml

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/getting-started/build-a-sample-app.mdx

Creates a Trunk.toml file to customize the server address and port. The example sets the address to 127.0.0.1 and port to 8000.

```toml
[serve]
# The address to serve on LAN.
address = "127.0.0.1"
# The address to serve on WAN.
# address = "0.0.0.0"
# The port to serve on.
port = 8000
```

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

### Run Trunk with proxy backend

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/tutorial/index.mdx

Command to start the development server with a proxy backend to forward API requests and avoid CORS errors.

```bash
trunk serve --proxy-backend=https://yew.rs/tutorial
```

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

### Example of combining code blocks with diff markers

Source: https://github.com/yewstack/yew/blob/master/website/README.md

Example showing how to use the COMBINE CODE BLOCKS flag. The two Rust blocks are combined, and the diff markers are applied, resulting in the final code that prints "Goodbye, World".

```md
```rust
fn main() {
    println!("Hello, World");
}
```

```rust
fn main() {
-   println!("Hello, World");
+   println!("Goodbye, World");
}
```

<!-- COMBINE CODE BLOCKS -->
```

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

### HOC Example: Context Provider and ThemedButtonHOC

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/advanced-topics/struct-components/hoc.mdx

This example shows a higher-order component 'ThemedButtonHOC' that uses 'use_context' to retrieve a 'Theme' from context and passes it to a struct component 'ThemedButtonStructComponent'. The 'App' component provides the context using 'ContextProvider'. The struct component renders a button with themed colors. The HOC is highlighted in the source.

```rust
use yew::prelude::*;

#[derive(Clone, Debug, PartialEq)]
struct Theme {
    foreground: String,
    background: String,
}

#[component]
pub fn App() -> Html {
    let ctx = use_state(|| Theme {
        foreground: "#000000".to_owned(),
        background: "#eeeeee".to_owned(),
    });

    html! {
        <ContextProvider<Theme> context={(*ctx).clone()}>
            <ThemedButtonHOC />
        </ContextProvider<Theme>>
    }
}

// highlight-start
#[component]
pub fn ThemedButtonHOC() -> Html {
    let theme = use_context::<Theme>().expect("no ctx found");

    html! {<ThemedButtonStructComponent {theme} />}
}
// highlight-end

#[derive(Properties, PartialEq)]
pub struct Props {
    pub theme: Theme,
}

struct ThemedButtonStructComponent;

impl Component for ThemedButtonStructComponent {
    type Message = ();
    type Properties = Props;

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        let theme = &ctx.props().theme;
        html! {
            <button style={format!(
                    "background: {}; color: {};",
                    theme.background,
                    theme.foreground
                )}
            >
                { "Click!" }
            </button>
        }
    }
}




```

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

### wasm-opt command to optimize wasm binary

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/advanced-topics/optimizations.mdx

Run wasm-opt directly on a wasm file to reduce its size. The example optimizes wasm_bg.wasm with -Os and outputs wasm_bg_opt.wasm.

```text
wasm-opt wasm_bg.wasm -Os -o wasm_bg_opt.wasm
```

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

### Access document object in JavaScript

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/basic-web-technologies/js.mdx

Shows how to get the document object from the window in plain JavaScript. This is the JavaScript counterpart to the Rust example using web-sys.

```js
let document = window.document
```

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

### Run the project with trunk serve

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/getting-started/build-a-sample-app.mdx

Starts the development server for the generated project. On Windows, trunk serve may fail due to a known bug; run trunk build first as a workaround.

```shell
trunk serve
```

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

### Access document object in Rust with web-sys

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/basic-web-technologies/js.mdx

Shows how to get the document object using the web-sys crate in Rust. It uses expect_throw to panic with a custom message if the window or document is undefined. This is the Rust equivalent of the JavaScript example.

```rust
use wasm_bindgen::UnwrapThrowExt;
use web_sys::window;

let document = window()
    .expect_throw("window is undefined")
    .document()
    .expect_throw("document is undefined");
```

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

### Bind console.log with #[wasm_bindgen] macro

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/basic-web-technologies/wasm-bindgen.mdx

Shows how to manually bind JavaScript's console.log with the #[wasm_bindgen] macro, using js_namespace and js_name attributes to handle polymorphic signatures. Adapted from the wasm-bindgen Guide's console.log example.

```rust
use wasm_bindgen::prelude::*;

// First up let's take a look of binding `console.log` manually, without the
// help of `web_sys`. Here we're writing the `#[wasm_bindgen]` annotations
// manually ourselves, and the correctness of our program relies on the
// correctness of these annotations!
#[wasm_bindgen]
extern "C" {
    // Use `js_namespace` here to bind `console.log(..)` instead of just
    // `log(..)`
    #[wasm_bindgen(js_namespace = console)]
    fn log(s: &str);

    // The `console.log` is quite polymorphic, so we can bind it with multiple
    // signatures. Note that we need to use `js_name` to ensure we always call
    // `log` in JS.
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_u32(a: u32);

    // Multiple arguments too!
    #[wasm_bindgen(js_namespace = console, js_name = log)]
    fn log_many(a: &str, b: &str);
}

// using the imported functions!
log("Hello from Rust!");
log_u32(42);
log_many("Logging", "many values!");
```

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

### Run the initial project with cargo run

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/getting-started/build-a-sample-app.mdx

Runs the initial Cargo project to verify the Rust environment. Expected output is 'Hello World!'.

```bash
cargo run
# output: Hello World!
```

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

### Using NodeRef with state to store input value

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/html/events.mdx

This example shows how to use NodeRef to get the input element and store its value in state using use_state. The onchange callback casts the NodeRef to HtmlInputElement and updates the state with the input's value. This approach is useful when you need to keep the input value in component state.

```rust
use web_sys::HtmlInputElement;
use yew::prelude::*;

#[component]
fn MyComponent() -> Html {
    //highlight-next-line
    let input_node_ref = use_node_ref();

    let input_value_handle = use_state(String::default);
    let input_value = (*input_value_handle).clone();

    let onchange = {
        let input_node_ref = input_node_ref.clone();

        Callback::from(move |_| {
            //highlight-next-line
            let input = input_node_ref.cast::<HtmlInputElement>();

            if let Some(input) = input {
                input_value_handle.set(input.value());
            }
        })
    };

    html! {
        <>
            <label for="my-input">
                { "My input:" }
                //highlight-next-line
                <input ref={input_node_ref}
                    {onchange}
                    id="my-input"
                    type="text"
                    value={input_value}
                />
            </label>
        </>
    }
}
```

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

### Install typos-cli

Source: https://github.com/yewstack/yew/blob/master/CONTRIBUTING.md

Installs the typos spell checker, which CI runs automatically on every PR.

```bash
cargo install typos-cli --locked
```

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

### Trunk serve command

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/tutorial/index.mdx

Builds and serves the application locally, opening the default browser. Remove '--open' to prevent auto-opening.

```bash
trunk serve --open

```

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

### Basic component usage in html! macro

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/html/components.mdx

Shows how to define components with and without properties and use them in the html! macro. Demonstrates passing props individually, with the whole set via ..props.clone(), and overriding specific values with ..props.

```rust
use yew::prelude::*;

#[component]
fn MyComponent() -> Html {
    html! {
        { "This component has no properties!" }
    }
}

#[derive(Clone, PartialEq, Properties)]
struct Props {
    user_first_name: String,
    user_last_name: String,
}

#[component]
fn MyComponentWithProps(props: &Props) -> Html {
    let Props { user_first_name, user_last_name } = props;
    html! {
        <>{"user_first_name: "}{user_first_name}{" and user_last_name: "}{user_last_name}</>
    }
}

let props = Props {
    user_first_name: "Bob".to_owned(),
    user_last_name: "Smith".to_owned(),
};

html!{
    <>
        // No properties
        <MyComponent />

        // With Properties
        <MyComponentWithProps user_first_name="Sam" user_last_name="Idle" />

        // With the whole set of props provided at once
        <MyComponentWithProps ..props.clone() />

        // With Properties from a variable and specific values overridden
        <MyComponentWithProps user_last_name="Elm" ..props />
    </>
};
```

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

### spawn_local async example

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/basic-web-technologies/wasm-bindgen.mdx

Use spawn_local to run an async block on the current thread without sending it to JavaScript. The example awaits an async function, appends a string, and logs the result to the console.

```rust
use web_sys::console;
use wasm_bindgen_futures::spawn_local;

async fn my_async_fn() -> String { String::from("Hello") }

spawn_local(async {
    let mut string = my_async_fn().await;
    string.push_str(", world!");
    // console log "Hello, world!"
    console::log_1(&string.into());
});
```

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

### Build static site with npm run build

Source: https://github.com/yewstack/yew/blob/master/website/README.md

Generates static content into the build directory, which can be served using any static content hosting service.

```console
npm run build
```

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

### Raw HTML layout for RustConf Explorer

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/tutorial/index.mdx

Initial HTML structure for the tutorial's video list and player placeholder. This is the classic HTML that will be converted to Yew's html! macro.

```html
<h1>RustConf Explorer</h1>
<div>
    <h3>Videos to watch</h3>
    <p>John Doe: Building and breaking things</p>
    <p>Jane Smith: The development process</p>
    <p>Matt Miller: The Web 7.0</p>
    <p>Tom Jerry: Mouseless development</p>
</div>
<div>
    <h3>John Doe: Building and breaking things</h3>
    <img
        src="https://placehold.co/640x360.png?text=Video+Player+Placeholder"
        alt="video thumbnail"
    />
</div>
```

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

### Complete Suspense Example in Rust

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/suspense.mdx

Complete example of using Suspense in Yew. It defines a custom hook `use_user` that returns a `SuspensionResult<User>`, creating a `Suspension` and resuming it when data loading completes. The `Content` component uses the hook and the `App` component wraps it in a `<Suspense>` with a fallback.

```rust
use yew::prelude::*;
use yew::suspense::{Suspension, SuspensionResult};

#[derive(Debug)]
struct User {
    name: String,
}

fn load_user() -> Option<User> {
    todo!()  // implementation omitted.
}

fn on_load_user_complete<F: FnOnce()>(_fn: F) {
    todo!()  // implementation omitted.
}

#[hook]
fn use_user() -> SuspensionResult<User> {
    match load_user() {
        // If a user is loaded, then we return it as Ok(user).
        Some(m) => Ok(m),
        None => {
            // When user is still loading, then we create a `Suspension`
            // and call `SuspensionHandle::resume` when data loading
            // completes, the component will be re-rendered
            // automatically.
            let (s, handle) = Suspension::new();
            on_load_user_complete(move || {handle.resume();});
            Err(s)
        },
    }
}

#[component(Content)]
fn content() -> HtmlResult {
    let user = use_user()?;

    Ok(html! {<div>{"Hello, "}{&user.name}</div>})
}

#[component(App)]
fn app() -> Html {
    let fallback = html! {<div>{"Loading..."}</div>};

    html! {
        <Suspense {fallback}>
            <Content />
        </Suspense>
    }
}
```

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

### Creating and emitting a callback

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/function-components/callbacks.mdx

Shows how to create a callback with Callback::from and call it manually with emit. The callback takes a String and returns a String. The commented line demonstrates logging the result to the console.

```rust
use yew::{html, Component, Context, Html, Callback};

let cb: Callback<String, String> = Callback::from(move |name: String| {
    format!("Bye {}", name)
});

let result = cb.emit(String::from("Bob")); // call the callback
// web_sys::console::log_1(&result.into()); // if uncommented will print "Bye Bob"
```

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

### Yew infinite loop example with rendered and update methods

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/advanced-topics/struct-components/lifecycle.mdx

Demonstrates an infinite loop caused by scheduling an update in the `rendered` method while `update` always returns `true`. The component continuously re-renders because each render schedules a new message, leading to an endless cycle. Use this as a cautionary example when scheduling updates in `rendered`.

```rust
use yew::{Context, Component, Html};

struct Comp;

impl Component for Comp {
    type Message = ();
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self
    }

    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
        // We are going to always request to re-render on any msg
        true
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        // For this example it doesn't matter what is rendered
        Html::default()
    }

    fn rendered(&mut self, ctx: &Context<Self>, _first_render: bool) {
        // Request that the component is updated with this new msg
        ctx.link().send_message(());
    }
}
```

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

### List all cargo-make tasks

Source: https://github.com/yewstack/yew/blob/master/CONTRIBUTING.md

Lists all available tasks for Yew, helping you discover available commands.

```bash
cargo make --list-all-steps
```

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

### Prop drilling example with Theme prop in Yew

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/concepts/contexts.mdx

Shows the prop drilling problem in Yew: a Theme struct is passed as a prop through Navbar to reach Title and NavButton. The example defines components with the #[component] macro and uses html! to render nested components, passing the theme via props. It illustrates the verbosity of prop drilling that contexts aim to solve.

```rust
use yew::{html, Component, Context, Html, Properties, component};

#[derive(Clone, PartialEq)]
pub struct Theme {
    foreground: String,
    background: String,
}

#[derive(PartialEq, Properties)]
pub struct NavbarProps {
    theme: Theme,
}

#[component]
fn Navbar(props: &NavbarProps) -> Html {
    html! {
        <div>
            <Title theme={props.theme.clone()}>
                { "App title" }
            </Title>
            <NavButton theme={props.theme.clone()}>
                { "Somewhere" }
            </NavButton>
        </div>
    }
}

#[derive(PartialEq, Properties)]
pub struct ThemeProps {
    theme: Theme,
    children: Html,
}

#[component]
fn Title(_props: &ThemeProps) -> Html {
    html! {
        // impl
    }
}

#[component]
fn NavButton(_props: &ThemeProps) -> Html {
    html! {
        // impl
    }
}

/// App root
#[component]
fn App() -> Html {
    let theme = Theme {
        foreground: "yellow".to_owned(),
        background: "pink".to_owned(),
    };

    html! {
        <Navbar {theme} />
    }
}
```

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

### Change into the project directory

Source: https://github.com/yewstack/yew/blob/master/website/versioned_docs/version-0.23/getting-started/build-a-sample-app.mdx

Changes the current directory to the newly created yew-app directory.

```bash
cd yew-app
```
Tokens:
Raw