# Awesome Yew

> A curated list of awesome things related to Yew.

Yew is a modern Rust framework inspired by Elm and React for creating multi-threaded frontend apps with WebAssembly.

Contributions welcome! Read the contribution guidelines first.

## Contents

- Official
- Projects
- Templates
- Crates
  - Component Libraries
  - Components
  - Hooks
  - Utils
  - Wasm
- Tooling
- Articles
- Books
- Alternatives
- Related lists

## Official

- Yew - Rust / WebAssembly framework for building client web apps.
- Live demo - A todomvc demo.
- Examples - Smaller examples included in official repo.
- API Docs - Docs on docs.rs.
- Website - Official website.
- Chatroom - It is pretty active and is a great place to ask questions.
- Reddit - Dedicated Sub Reddit.
- Financial Contribute - Become a financial contributor and help us sustain our community.
- Playground - Online playground for Yew.

## Projects

- 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.
- Minesweeper - Minesweeper built with Rust, Yew and WebAssembly.
- Freecell - A patience game written in Rust and Yew.
- 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.
- Marc Portfolio - A software developer portfolio, Live Demo.
- zzhack - A personal blog, based on Rust & Yew, Live Demo.
- Rquote - Rquote is a web application built using Rust and WebAssembly. It fetches Anime quotes from the Animechan API. Live Demo.
- yew-ssr-tide - The example demonstrates Yew server-side rendering with tide & surf, it needs the development version of Yew.
- yew-ssr-actix-web - The example demonstrates Yew server-side rendering with actix-web & reqwest, it needs the development version of Yew.
- PixelGuesser - PixelGuesser is a real life party gam where players try to guess the contents of an image as quickly as possible.
- Crabtyper - A speedtyping web app written in Rust.
- We-Come Monorepo - This is a monorepo for wecome KM ITB, Live Demo.
- blog-rs - A blog system in which frontend and backend are ALL written in Rust. Backend powered by Warp and frontend built on Yew (WASM).
- mb2 - A poker server with a Yew client. Click the `Demo` button and then `Start` to see the client.
- Puzzle Cube - Rubix Cube solver using Rust and Yew, Live Demo.
- CubeShuffle - Card game shuffling utility built with Rust, Yew, Bulma and Tauri.
- Rust Audio - Realtime audio processing / synthesis using Rust/WASM in the browser, Live Demo.
- Kiomet - An online real-time strategy game in which you expand your territory by capturing towers.
- Portfolio website - A portfolio SPA with accessibility built-in by Spencer Imbleau.
- tchatche.rs - A Websocket chat based application built in Yew and Axum.
- viz.rs - A website for viz web framework, Live Demo.
- theiskaa.com - A real world implementation of Yew framework. Live at theiskaa.com.
- live-ask.com - Realtime Event/Meetup Q&A Platform. Live at live-ask.com.
- Sumi - Multi-user issue tracking and knowledge base app built with Yew & Actix.
- hurlurl - A randomizing link shortener, Live Demo.
- Macige - CI workflow generator for mobile app development, Live Demo.
- Spaceman - Spaceman is a cross-platform gRPC client designed to be pleasant to use and pretty to look at.
- Crypto-helper - Web app that can hash, encrypt, and sign the data on the client side. Also includes a JWT debugger. Website.
- zoom-rs - Zoom clone written in rust for research purposes.
- Ubiquity - An open-source, cross-platform markdown editor; built with Yew, Tauri, Tailwind, and DaisyUI. Web App.
- demo_web_zip_wasm - A simple example program for creating ZIP archives running in the browser using WebAssembly, Live Demo.
- RustedLessPass - A stateless password manager. Web App.
- windows-terminal-theme-generator - Simplify your life to create a windows terminal theme. Live Demo
- SandCat - The software has primarily implemented the basic functionalities of an IM application, which includes a fundamental friend system, one-on-one chat, group chat, and one-on-one audio/video calls. It also supports i18n and currently offers a switch between Chinese and English.
- PinePods - PinePods is a Rust based podcast management system that manages podcasts with multi-user support and relies on a central database with clients to connect to it.
- 0721 - The engine of image hosting written in Rust.
- Hikari - The Frontend of Everything.
- simply-view-image-for-python-debugging - Visual studio code extension simply view the image of the image variables when debugging python.
- Mindsweeper - A principled take on minesweeper, Live Demo.
- scap-rs - National Vulnerability Database (NVD) implemented by Rust, Live Demo.
- Sentry Relay - The Sentry Relay is a service that pushes some functionality from the Sentry SDKs as well as the Sentry server into a proxy process.
- Syre - Scientific data management and insights.
- candle-wasm-examples - Candle is a minimalist ML framework for Rust with a focus on performance (including GPU support) and ease of use. Try our online demos: whisper, LLaMA2, T5, yolo, Segment Anything.
- chipbox - chipbox is an open-source desktop DAW written in Rust.
- Taxy - A reverse proxy server with built-in WebUI, supporting TCP/HTTP/TLS/WebSocket, written in Rust.
- Proxelar - Rust-based Man in the Middle proxy, an early-stage project aimed at providing visibility into network traffic.
- diff.rs - Web application to render a diff between Rust crate versions. Implemented in Yew, runs fully in the browser as WebAssembly, Live Demo.
- konnektoren.help - An interactive web application for learning German grammar, featuring gamified challenges and a map-based interface. Web App
- layout-viewer - Examine layouts of integrated circuits with zoom and pan controls.

## 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.
- yew-template-for-github-io - Directly deployable Template of yew project for github.io, using tailwind and webpack for css, trunk for build and serve.
- tailwindcss-yew-template - Simple layout for using Tailwindcss with Yew.
- axum-yew-setup - A starter project that sets up Axum and Yew for full stack Rust web apps.
- rust-yew-axum-tauri-desktop - Rust + Yew + Axum + Tauri, full-stack Rust development for Desktop apps.
- Yew PWA Minimal - A minimal Progressive Web App using Yew.
- Yew HTTP Starter - Yew template with a simple HTTP message & useful helper comments.
- Yew minimlistic template - A minimalistic template for quickly starting a project on yew.

## 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.
- tailyew - Yew wrapper around DaisyUI (tailwindcss based) components.
- yew-duskmoon-ui - Duskmoon UI Component Library. This package use `stylist` to embbed css in components, so no extra CSS file is needed. Live Demo.
- yew-bootstrap - A Yew wrapper for the Bootstrap 5 component library.
- Zu - Yew web components, implementing Material Design.
- yew-nav-link - A navigational link that is aware of its active state based on the current route in the application.
- Rust Lucide - Yew port of Lucide, a beautiful & consistent icon toolkit made by the community.
- Rust Radix - Yew port of Radix, a library of components, icons, colors, and templates for building high-quality, accessible UI.
- Rust shadcn/ui - Yew port of shadcn/ui, a library of beautifully designed components that you can copy and paste into your apps.

### 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-oauth2 - A plain Yew OAuth2/OpenIDConnect component, not tied to any CSS framework.
- yew-scroll-area - Custom scroll area for Yew.

### 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.
- yewv - A lightning fast state management module for Yew built with performance and simplicity as a first priority.

### Javascript Library Ports

- Plotly.rs - Rust bindings for the popular Plotly charting library.
- ag-grid-rs - Rust bindings for the AG Grid datatable library.
- popper-rs - Popper JS bindings for Rust.

### 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.
- yew-style-in-rs - Scoped CSS in Rust for Yew.
- yew_icons - Easily include a variety of svg icons(Feather/Font Awesome/Octicons) into your Yew app.
- Yew-Template - A crate for separating HTML and Rust code when using Yew.
- yew-nested-router - A router that supported nesting, with Yew 0.20.
- turf - Macro based compile-time SCSS transpilation, CSS minification, and class name uniquification toolchain inspired by CSS modules.
- browser-panic-hook - A panic handler for browser environments, allowing to fail in an end-user friendly way.
- Rust Floating UI - Floating UI is a library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.

### 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.
- tauri-sys - Raw bindings to the Tauri API for projects using wasm-bindgen.

### Frameworks

- stackable - A framework experience for Yew.

## 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.
- Tauri - Tauri is a framework for building tiny, blazingly fast binaries for all major desktop platforms. Developers can integrate any front-end framework that compiles to HTML, JS and CSS for building their user interface. The backend of the application is a rust-sourced binary with an API that the front-end can interact with.
- yew-fmt - A configurable extension to `rustfmt` for formatting Yew HTML.

## Articles

- Let’s Build a Rust Frontend with Yew
- How to use Rust Yew
- How to use a modal in Rust
- How to use routers in Rust Frontend
- How to modulize your Rust Frontend
- How to use NPM packages with Rust Frontend
- How to use markdown with Rust Frontend
- Fullstack Rust with Yew
- How to write Full Stack Rust code
- How to render a YouTube vlog with Rust Yew fetch API
- How to render blog posts with Rust Yew mounted API
- 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
- Adding Tailwind to Yew

## Courses

- full-stack-todo-rust-course - Full stack rust course including course for Yew.

## 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.
- Leptos - Build fast web applications with Rust.

## 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.

yew.md Github