yew/examples

Yew Examples

How to run

The examples are built with trunk. You can install it with the following command:

# at some point in the future, trunk will automatically download wasm-bindgen
cargo install trunk wasm-bindgen-cli

Running an example is as easy as running a single command:

# move into the directory of the example you want to run
# In this case it's the todomvc example
cd examples/todomvc

# build and serve the example
trunk serve --release

We're also publicly hosting the examples at https://examples.yew.rs/<EXAMPLE>. As an example, check out the TodoMVC example here: https://examples.yew.rs/todomvc

List of examples

Example	Description
boids	Yew port of Boids
counter	Simple counter which can be incremented and decremented
crm	Shallow customer relationship management tool
dashboard	Uses the fetch and websocket services to load external data
dyn_create_destroy_apps	Uses the function start_app_in_element and the AppHandle struct to dynamically create and delete Yew apps
file_upload	Uses the reader service to read the content of user uploaded files
futures	Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.
game_of_life	Implementation of Conway's Game of Life
inner_html	Embeds an external document as raw HTML by manually managing the element
js_callback	Interacts with JavaScript code
keyed_list	Demonstrates how to use keys to improve the performance of lists
mount_point	Shows how to mount the root component to a custom element
multi_thread	Demonstrates the use of Web Workers to offload computation to the background
nested_list	Renders a styled list which tracks hover events
node_refs	Uses a NodeRef to focus the input element under the cursor
pub_sub	Cross-component communication using Agents
router	The best yew blog built with yew-router
store	Showcases the yewtil::store API
timer	Demonstrates the use of the interval and timeout services
todomvc	Implementation of TodoMVC
two_apps	Runs two separate Yew apps which can communicate with each other
webgl	Controls a WebGL canvas from Yew

Next steps

Have a look at Yew's starter templates when starting a project using Yew – they can significantly simplify things.

Help out

If one of the examples catches your interest, look for the "improvements" section in its README file. Most examples list a few ideas for how to improve them. Consider starting with those but don't hesitate to improve an example in other ways either.

One problem that currently plagues most examples is the lack of styling. Please help us make the examples look as flashy as possible!