iced_web
iced_web
takes iced_core
and builds a WebAssembly runtime on top. It achieves this by introducing a Widget
trait that can be used to produce VDOM nodes.
The crate is currently a very experimental, simple abstraction layer over dodrio
.
Add iced_web
as a dependency in your Cargo.toml
:
iced_web = "0.4"
Iced moves fast and the master
branch can contain breaking changes! If
you want to learn about a specific release, check out the release list.
The current build process is a bit involved, as wasm-pack
does not currently support building binary crates.
Therefore, we instead build using the wasm32-unknown-unknown
target and use the wasm-bindgen
CLI to generate appropriate bindings.
For instance, let's say we want to build the tour
example:
cd examples
cargo build --package tour --target wasm32-unknown-unknown
wasm-bindgen ../target/wasm32-unknown-unknown/debug/tour.wasm --out-dir tour --web
Note: Keep in mind that Iced is still in early exploration stages and most of the work needs to happen on the native side of the ecosystem. At this stage, it is important to be able to batch work without having to constantly jump back and forth. Because of this, there is currently no requirement for the master
branch to contain a cross-platform API at all times. If you hit an issue when building an example and want to help, it may be a good way to start contributing!
Once the example is compiled, we need to create an .html
file to load our application:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Tour - Iced</title>
</head>
<body>
<script type="module">
import init from "./tour/tour.js";
init('./tour/tour_bg.wasm');
</script>
</body>
</html>
Finally, we serve it using an HTTP server and access it with our browser.