Yew Examples

How to run

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

cargo install --locked trunk

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

• CT - Type of most components , "F" for function components and "S" for struct components, "SF" for a mix of both.

Example	CT	Description
async_clock	S	Demonstrates the use of asynchronous tasks in a yew component.
boids	S	Yew port of Boids
contexts	F	A technical demonstration of Context API.
communication_*	S	A set of simple examples to demonstrate various communication patterns.
counter	S	Simple counter which can be incremented and decremented
counter_functional	F	Simple counter which can be incremented and decremented made using function components
dyn_create_destroy_apps	S	Uses the function start_app_in_element and the AppHandle struct to dynamically create and delete Yew apps
file_upload	S	Uses the gloo::file to read the content of user uploaded files
function_todomvc	F	Implementation of TodoMVC using function components and hooks.
futures	S	Demonstrates how you can use futures and async code with Yew. Features a Markdown renderer.
game_of_life	S	Implementation of Conway's Game of Life
immutable	SF	Using immutable types in components.
inner_html	S	Embeds an external document as raw HTML by manually managing the element
js_callback	F	Interacts with JavaScript code
keyed_list	S	Demonstrates how to use keys to improve the performance of lists
mount_point	S	Shows how to mount the root component to a custom element
nested_list	S	Renders a styled list which tracks hover events
node_refs	S	Uses a NodeRef to focus the input element under the cursor
password_strength	SF	A password strength estimator implemented in Yew
portals	S	Renders elements into out-of-tree nodes with the help of portals
router	S	The best yew blog built with yew-router
simple_ssr	F	Demonstrates server-side rendering
suspense	F	This is an example that demonstrates <Suspense /> support
function_memory_game	F	Implementation of Memory Game
timer	S	Demonstrates the use of the interval and timeout services
todomvc	S	Implementation of TodoMVC
two_apps	S	Runs two separate Yew apps which can communicate with each other
web_worker_fib	S	Calculate fibonacci value of a number in a web worker thread using gloo-worker
webgl	S	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!