yew/examples

Yew Examples

In order to run the examples, we provide the run_example.sh script. This script takes care of compiling the example and runs a web server for you. All that's left is for you to play around with the examples :).

A note for Windows users:
Depending on how you installed git you will already have a bash emulator at your disposal. This allows you to run the run_example.sh script (and any other bash script) normally.
See https://gitforwindows.org/#bash for more information.

We're always trying to improve the developer experience for developers across all platforms. There's an ongoing effort to replace the bash scripts with a Rust command line tool (#1418). If at any point you encounter an issue, don't hesitate to ask a question or open an issue.

Dependencies

Before we can run the examples we need to get a few things ready.

Some examples currently use wasm-bindgen and others use wasm-pack. You can install them both using the following command:

cargo install wasm-pack wasm-bindgen-cli

Optional dependencies

We've written a small web server which you can use to serve the built examples. In order to use it, you'll need to have installed Python (3.6 or greater). You can also use a different web server, provided that it can serve static files from a directory.

Note:
Some examples don't have an index.html file in their static directory. The python web server handles this by serving a default index file. If you aren't using it, you will need to create the index file manually.

One alternative to the built-in web server there is an extension for Visual Studio Code called Live Server. This extension is used to serve static files. To do so, open the index.html file in the static directory of the example you wish to run and press "Open with Live Server" in the context menu.

Run an example

# download the source code.
git clone https://github.com/yewstack/yew.git

# move into the examples folder
cd yew/examples

# run the "todomvc" example
./run_example.sh todomvc

Script options

The general structure of the command looks like this:
./run_example.sh <example> [OPTIONS]

<example> is the name of the example (i.e. the name of the directory).

The following table describes all possible options:

Option	Description
--debug --release	Specifies which profile to use for cargo build. Defaults to --debug.
--build-only	Disables the built-in server. Use this if you don't have Python installed or if you want to use your own server.

List of examples

Example	Description	Has README
counter	A single component which displays a stateful number. The number can be incremented and decremented using buttons	✖
crm	See the README file for details	✔
custom_components	Demonstrates the use of components	✔
dashboard	Uses the fetch and websocket services to load external data	✖
file_upload	Uses the reader service to read the content of user uploaded files	✖
fragments	Similar to the counter example but demonstrating the use of fragments	✖
futures_wp	Demonstrates how you can use futures and async code with Yew	✔
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	✖
large_table	Renders a big table which highlights the selected cell	✖
minimal	A simple button that listens to click events	✖
minimal_wp	Same as the minimal example but using wasm-pack	✖
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	✖
npm_and_rest	A more elaborate demonstration of the fetch service	✖
pub_sub	Cross-component communication using Agents	✔
store	Interacts with the MediaDevices API	✖
textarea	Shows how to use the value of a textarea or input tag	✖
timer	Demonstrates the use of the interval and timeout services	✖
todomvc	Implementation of the TodoMVC app	✔
two_apps	Runs two separate Yew apps at the same time	✖
webgl	Controls a WebGL canvas from Yew	✔

The following directories aren't examples. Trying to run them with the script will cause an error.

• common: Code shared between multiple examples.
• server: Backend for the dashboard example.

Next steps

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