Awesome Yew

Projects

• Fullstack application with infrastructure - Complete production-ready application with yew as frontend, axum as backend, docker compose as infrastructure, mongodb as database.
• Realworld example - Exemplary real world app built with Rust + Yew + WebAssembly. It utilizes Yew's latest function components and hooks. It also supports desktop application powered by Tauri.
• webapp.rs - A web application completely written in Rust, frontend is built with Yew.
• Rust-Full-Stack - Easily testable and working Rust codes with blog posts to explain them.
• Bucket Questions - A webapp written entirely in Rust for a dumb party game.
• web-view todomvc desktop app - Demo how to use yew for a todomvc that compiles to WebAssembly and is bundled as a lightweight(~2mb) desktop app by web-view, as an alternative to Electron, web-view also has a demo.
• yew-react-example - This project shows how to create a web app using a React component inside a Yew component.
• Kirk - Just A Rust WebAssembly Blog.
• rust-async-wasm-demo - Toy project to learn Rust and async that can be deployed to the web.
• karaoke-rs - A simple, network enabled karaoke player in Rust.
• I Love Hue! (rs) - A clone of the mobile game I Love Hue in Yew (Rust).
• yew-styles-page - This is an initial project of a framework style for yew.
• caniuse.rs - Rust feature search.
• Rust electron yew demo - An example of building a Rust based web app (Yew) into a native app using electron.
• covplot - Live graphs of worldwide CoVID-19 data.
• Tanoshi - Tachiyomi-like web manga reader. Front-end for tanoshi.
• Minesweeper - Minesweeper built with Rust, Yew and WebAssembly.
• Freecell - A patience game written in Rust and Yew.
• Daydream - A small Matrix web client written in Rust.
• Yew-WebRTC-Chat - A simple WebRTC chat made with Yew.
• Yew Fullstack Boilerplate - Highly opinionated boilerplate for creating full stack applications with Rust.
• Chord Quiz - Practice recognizing chords in this Rust/Yew/WebAssembly app.
• RustMart - Single Page Application (SPA) written using Rust, Wasm and Yew.
• DevAndDev - A website where developers can find pair-programming partners. Written in Rust, Yew frontend.
• yew-octicons - An easy interface for using Octicons in Yew projects.
• Pipe - This is a Rust / Wasm client web app which is a task control center.
• note-to-yew - Convert your markups into Yew macro online, which is also made by Yew.
• ASCII-Hangman - Configurable Hangman game for children with ASCII-art rewarding.
• dotdotyew - Dot-voting using Yew, with Rust powering the backend API.
• wasm-2048 - 2048 game implemented with Rust and Yew and compiled to Wasm.
• website-wasm - My personal website written in Rust via Yew/Wasm.
• KeyPress - A Rust WebAssembly Website example for practising english for chinese.
• yew-train-ticket - A Rust WebAssembly Webapp example basing Yew newest hooks and functional API, the code style is extremely like React Function Component.
• yew-d3-example - Showing a d3 chart with Yew.
• Oxfeed - A feed reader written in Rust with a Yew frontend.
• Flow.er - A notebook app integrated with todo lists utility. Developed with Rust, WebAssembly, Yew and Trunk.
• Fullstack-Rust - A Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma CSS and Diesel.
• Sea_battle - A simple example of a sea battle game. Rust + Yew.
• tide-async-graphql-mongodb - Clean boilerplate for graphql services, with wasm/yew frontend.
• surfer - A blog built on yew + graphql, with live demo site. Backend for graphql services, and frontend for web application.
• qubit - A handy calculator, based on Rust and WebAssembly, Live Demo.
• Paudle - A reimplementation of the excellent word game Wordle by Josh Wardle.
• Rust algorithms - A website with interactive implementations of various algorithms (only sorting algorithms for now).
• Marc Portfolio - A software developer portfolio, Live Demo.
• zzhack - A personal blog, based on Rust & Yew, Live Demo.
• viz.rs - A website for viz web framework, Live Demo.
• hurlurl - A randomizing link shortener, Live Demo.
• Macige - CI workflow generator for mobile app development, Live Demo.
• Spaceman - A cross-platform and graphical client for the gRPC communication protocol.

Templates

• Create Yew App - Set up a modern Yew web app by running one command, npx create-yew-app my-app.
• yew-wasm-pack-template - A template for starting a Yew project to be used with wasm-pack.
• yew-wasm-pack-minimal - A minimal template for starting a Yew project using wasm-bindgen and wasm-pack.
• yew-parcel-template - Awesome Yew with Yew-Router and Parcel application.

Crates

Component Libraries

• yew-mdc - Material Design Components for the Yew framework.
• muicss-yew - MUI-CSS Components for Yew framework.
• yew-bulma - A Rust library providing components based on the bulma css library for projects using Yew.
• material-yew - Yew wrapper for Material Web Components.
• Yewprint - Port of blueprintjs.com to Yew.
• ybc - A Yew component library based on the Bulma CSS framework.
• patternfly-yew - Patternfly components for Yew.
• yew-feather - Feather Icons components for Yew.
• tailwind-yew-builder - Builds Tailwind CSS for Yew using docker-compose. Also supports Trunk.
• yew-components - Material Design Components for the Yew framework.
• yew-chart - A Yew-based charting library that provides SVG based components for rendering charts.

Components

• Yew Form - Components to simplify handling forms with Yew.
• yew-component-size - A Yew component that emits events when the parent component changes width/height.
• yew-virtual-scroller - A Yew component for virtual scrolling / scroll windowing.
• yew-autoprops - proc-macro to automatically derive Properties structs from args for Yew components.

Hooks

• yew-hooks - Custom Hooks library for Yew, inspired by streamich/react-use and alibaba/hooks.
• yew-side-effect - Reconcile Side Effects in Yew Applications, inspired by react-side-effect and react-helmet.
• Bounce - The uncomplicated state management library for Yew, inspired by Redux and Recoil.

Utils

• Yewdux - Redux-like state containers for Yew apps.
• reacty_yew - Generate Yew components from React components via Typescript type definitions.
• styled-yew - CSS in Rust, similar to styled-components, but for Yew.
• stylist-rs - A CSS-in-Rust styling solution for WebAssembly Applications.
• Yew Interop - Load JavaScript and CSS asynchronously in Yew.
• Tailwind RS - Tailwind style tracer in rust, JIT + AOT interpreter.

Wasm

• wasm-bindgen - Facilitating high-level interactions between WebAssembly modules and JavaScript.
• stdweb - Provides Rust bindings to the Web APIs and to allow a high degree of interoperability between Rust and JavaScript.

Tooling

• wasm-pack - Your favorite Rust -> WebAssembly workflow tool.
• wasm-pack-action - Github action to install wasm-pack by downloading the executable to speed up CI/CD.
• wasm-bindgen-action - Github action to install wasm-bindgen by downloading the executable to speed up CI/CD.
• cargo-web - A Cargo subcommand for the client-side Web.
• Trunk - Build, bundle & ship your Rust Wasm application to the web.
• trunk-action - Github action to install Trunk by downloading the executable to speed up CI/CD.
• wabt - The WebAssembly Binary Toolkit, for the wasm-strip and wasm-objdump tools to reduce .wasm file size.
• binaryen - Compiler infrastructure and toolchain library for WebAssembly, for the wasm-opt tool to reduce .wasm file size.

Articles

• Let's Build a Rust Frontend with Yew
• A Web Application completely in Rust
• Yew - Rust & WebAsse-frontend framework
• Create a desktop app in Rust using Tauri and Yew
• A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter

Books

• The WebAssembly Book - Working with the web and producing .wasm files.
• The wasm-bindgen Guide - How to bind Rust and JavaScript APIs.
• The wasm-pack Guide - How to build and work with rust-generated WebAssembly.
• Programming WebAssembly with Rust - Includes a chapter Advanced JavaScript Integration with Yew on creating an app with Yew.
• Creative Projects for Rust Programmers - Chapter 5, Creating a Client-Side WebAssembly App Using Yew.

Alternatives

Yew team love to share ideas with other projects and believe we can all help each other reach the full potential of this exciting new technology.

• Draco - A Rust library for building client side web applications with WebAssembly.
• Percy - A modular toolkit for building isomorphic web apps with Rust + WebAssembly.
• Sauron - Sauron is an HTML web framework for building web-apps.
• Seed - A Rust framework for creating web apps.
• Smithy - A framework for building WebAssembly apps in Rust.
• Dioxus - Elegant React-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.
• Sycamore - A reactive library for creating web apps in Rust and WebAssembly.

Related lists

• Awesome Rust and WebAssembly - A list of awesome Rust and WebAssembly projects, libraries, tools, and resources.
• Awesome WebAssembly - Collection of awesome things regarding WebAssembly ecosystem.
• Awesome Rust - A curated list of Rust code and resources.