I'm Ryan, maintainer of Quicksilver and a relatively new maintainer of Winit, a pure-Rust library for creating and managing windows. We're used by a wide range of desktop and gaming software, from Alacritty and Servo to ggez and Amethest. With an alpha release of Winit's next version (
0.20.0-alpha4), we've brought Winit to a new platform: the web!
Targeting the Web
Winit supports both stdweb and wasm-bindgen, two libraries for conveniently binding to the web APIs from Rust.
wasm-bindgen shines when integrating with an existing web page or application;
stdweb shines when making a page powered solely by Rust and WebAssembly. For that reason, we'll use
stdweb in this example.
An example of Winit on the Web
To try the Winit examples, first clone the repo.
Because we're using stdweb, we'll need to install cargo-web, which is the tool to build
stdweb projects. In the directory where you cloned
cargo web start --example web --features stdweb. Once the compilation succeeds, copy the web address it provides into your browser of choice. If you open the developer tools, you should see all the events getting logged!
There are some places in Winit's API that don't map well to the web: for example, what does it mean for an HTML5 canvas to have window decorations, or to be resized, or to be placed at given coordinates? There are other places where the web places restrictions that desktop APIs don't impose: for example, fullscreen can only be initiated during a short-lived user-initiated event. Where possible, Winit papers over these differences. Where not possible, the API will be a no-op.
On desktop, the window is created by Winit and managed by your operating system / window manager. On the web, however, Winit creates an HTML5 canvas but does not place it into the web page. You'll have to do that yourself, to give you the option of placing it wherever you like in the document. See the
websys_window examples for demonstrations of how it's done with either framework.
Try it Out!
Web support is very much in alpha, and we'd like to encourage you to try it out and stress-test it so we can see where the issues are and improve where necessary. If there are design decisions that you disagree with, features you'd like to see added, or bugs you encounter, we would love to hear your feedback on our issue tracker. Thanks!