---
visibility: public
---

# Yew

**repo:** [jetli/awesome-yew](https://github.com/jetli/awesome-yew)  
**category:** [[front-end-development|Front-End Development]]
**related:** [[rust|Rust]]

---

# Awesome Yew [![Awesome](https://awesome.re/badge.svg)](https://awesome.re)

[<img src="logo.svg" align="right" width="100" title="Awesome Yew">](https://github.com/yewstack/yew)

> A curated list of awesome things related to Yew.

[Yew](https://github.com/yewstack/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](CONTRIBUTING.md) first.

## Contents

- [Official](#official)
- [Projects](#projects)
- [Templates](#templates)
- [Crates](#crates)
  - [Component Libraries](#component-libraries)
  - [Components](#components)
  - [Hooks](#hooks)
  - [Utils](#utils)
  - [Wasm](#wasm)
- [Tooling](#tooling)
- [Articles](#articles)
- [Books](#books)
- [Alternatives](#alternatives)
- [Related lists](#related-lists)

## Official

- [Yew](https://github.com/yewstack/yew) - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) / [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) framework for building client web [apps](/@harrisonqian/awesome/wiki/platforms/apps).
- [Live demo](https://yew-todomvc.netlify.com) - A todomvc demo.
- [Examples](https://github.com/yewstack/yew/tree/master/examples) - Smaller examples included in official repo.
- [API Docs](https://docs.rs/yew) - Docs on docs.rs.
- [Website](https://yew.rs/) - Official website.
- [Chatroom](https://discord.gg/VQck8X4) - It is pretty active and is a great place to ask questions.
- [Reddit](https://www.reddit.com/r/yew_web/) - Dedicated Sub Reddit.
- [Financial Contribute](https://opencollective.com/yew) - Become a financial contributor and help us sustain our community.
- [Playground](https://play.yew.rs) - Online playground for Yew.

## Projects

- [Realworld example](https://github.com/jetli/rust-yew-realworld-example-app) - Exemplary real world app built with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) + Yew + [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly). It utilizes Yew's latest `function components` and `hooks`. It also supports desktop application powered by [Tauri](https://github.com/tauri-apps/tauri).
- [webapp.rs](https://github.com/saschagrunert/webapp.rs) - A web application completely written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), frontend is built with Yew.
- [Rust-Full-Stack](https://github.com/steadylearner/Rust-Full-Stack) - Easily testable and working [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) codes with blog posts to explain them.
- [Bucket Questions](https://github.com/hgzimmerman/BucketQuestions) - A webapp written entirely in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) for a dumb party game.
- [web-view todomvc desktop app](https://github.com/Extrawurst/rust-webview-todomvc-yew) - Demo how to use yew for a todomvc that compiles to [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) and is bundled as a lightweight(~2mb) desktop app by [web-view](https://github.com/Boscop/web-view), as an alternative to [Electron](/@harrisonqian/awesome/wiki/platforms/electron), [web-view](https://github.com/Boscop/web-view) also has a [demo](https://github.com/Boscop/web-view/tree/master/examples#todo-yew).
- [yew-[react](/@harrisonqian/awesome/wiki/front-end-development/react)-example](https://github.com/hobofan/yew-react-example) - This project shows how to create a web app using a [React](/@harrisonqian/awesome/wiki/front-end-development/react) component inside a Yew component.
- [Kirk](https://github.com/stkevintan/Kirk) - Just A [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) Blog.
- [rust-async-wasm-demo](https://github.com/extraymond/rust-async-wasm-demo) - Toy project to learn [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and async that can be deployed to the web.
- [karaoke-rs](https://github.com/tarkah/karaoke-rs) - A simple, network enabled karaoke player in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [I Love Hue! (rs)](https://github.com/noc7c9/i-love-hue-rs) - A clone of the mobile game I Love Hue in Yew (Rust).
- [yew-styles-page](https://github.com/spielrs/yew-styles-page) - This is an initial project of a framework style for yew.
- [caniuse.rs](https://github.com/jplatte/caniuse.rs) - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) feature search.
- [Rust [electron](/@harrisonqian/awesome/wiki/platforms/electron) yew demo](https://github.com/Extrawurst/rust-electron-demo) - An example of building a [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) based web app (Yew) into a native app using [electron](/@harrisonqian/awesome/wiki/platforms/electron).
- [covplot](https://github.com/jbowens/covplot) - Live graphs of worldwide CoVID-19 data.
- [Minesweeper](https://github.com/jgpaiva/minesweeper) - Minesweeper built with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), Yew and [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly).
- [Freecell](https://github.com/Stigjb/freecell) - A patience game written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and Yew.
- [Yew-WebRTC-Chat](https://github.com/codec-abc/Yew-WebRTC-Chat) - A simple WebRTC chat made with Yew.
- [Yew Fullstack Boilerplate](https://github.com/lukidoescode/yew-fullstack-boilerplate) - Highly opinionated boilerplate for creating full stack applications with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [Chord Quiz](https://github.com/Stigjb/chord-quiz) - Practice recognizing chords in this Rust/Yew/[WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) app.
- [RustMart](https://github.com/sheshbabu/rustmart-yew-example) - Single Page Application (SPA) written using [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), Wasm and Yew.
- [DevAndDev](https://github.com/alepez/devand) - A website where developers can find pair-programming partners. Written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), Yew frontend.
- [yew-octicons](https://github.com/io12/yew-octicons) - An easy interface for using Octicons in Yew projects.
- [Pipe](https://github.com/pipe-fun/pipe) - This is a [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) / Wasm client web app which is a task control center.
- [note-to-yew](https://github.com/oovm/note-to-yew) - Convert your markups into Yew macro online, which is also made by Yew.
- [ASCII-Hangman](https://github.com/getreu/ascii-hangman) - Configurable Hangman game for children with ASCII-art rewarding.
- [dotdotyew](https://github.com/shaunbennett/dotdotyew) - [Dot-voting](https://en.wikipedia.org/wiki/Dot-voting) using Yew, with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) powering the backend API.
- [wasm-2048](https://github.com/dev-family/wasm-2048) - 2048 game implemented with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and Yew and compiled to Wasm.
- [website-wasm](https://github.com/kamiyaa/website-wasm) - My personal website written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) via Yew/Wasm.
- [KeyPress](https://github.com/rayylee/keypress) - A [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) Website example for practising english for chinese.
- [yew-train-ticket](https://github.com/anthhub/yew-train-ticket) - A [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) [Webapp](http://118.190.37.169:8002) example basing Yew newest hooks and functional API, the code style is extremely like [React](/@harrisonqian/awesome/wiki/front-end-development/react) Function Component.
- [yew-d3-example](https://github.com/ivanschuetz/yew-d3-example) - Showing a d3 chart with Yew.
- [Oxfeed](https://github.com/sanpii/oxfeed) - A feed reader written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) with a Yew frontend.
- [Flow.er](https://github.com/LighghtEeloo/flow.er) - A notebook app integrated with todo lists utility. Developed with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly), Yew and Trunk.
- [Fullstack-Rust](https://github.com/vascokk/fullstack-rust) - A Full Stack [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) application (Connect5 game) with Actix-web, Yew, Bulma CSS and Diesel.
- [Sea_battle](https://github.com/MAE664128/sea_battle) - A simple example of a sea battle game. [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) + Yew.
- [tide-async-[graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql)-mongodb](https://github.com/zzy/tide-async-graphql-mongodb) - Clean boilerplate for [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql) services, with wasm/yew frontend.
- [surfer](https://github.com/zzy/surfer) - A blog built on yew + [graphql](/@harrisonqian/awesome/wiki/miscellaneous/graphql), with [live demo site](https://niqin.com). Backend for graphql services, and frontend for web application.
- [qubit](https://abhimanyu003.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/qubit) - A handy calculator, based on [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly), [Live Demo](https://abhimanyu003.github.io/qubit/).
- [Paudle](https://github.com/pmsanford/paudle) - A reimplementation of the excellent word game Wordle by Josh Wardle.
- [Rust algorithms](https://github.com/Jondolf/rust-algorithms) - A website with interactive implementations of various [algorithms](/@harrisonqian/awesome/wiki/theory/algorithms).
- [Marc Portfolio](https://gitlab.com/marcempunkt/maeurerdev) - A software developer portfolio, [Live Demo](https://maeurer.dev/).
- [zzhack](https://github.com/zzhack-stack/zzhack) - A personal blog, based on [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) & Yew, [Live Demo](https://www.zzhack.fun/).
- [Rquote](https://github.com/Altair-Bueno/rquote) - Rquote is a web application built using [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly). It fetches Anime quotes from the Animechan API. [Live Demo](https://rquote.vercel.app/).
- [yew-ssr-tide](https://github.com/zzy/yew-ssr-tide) - The example demonstrates Yew server-side rendering with tide & surf, it needs the **development version** of Yew.
- [yew-ssr-actix-web](https://github.com/zzy/yew-ssr-actix-web) - The example demonstrates Yew server-side rendering with actix-web & reqwest, it needs the **development version** of Yew.
- [PixelGuesser](https://github.com/tdooms/pixelguesser) - PixelGuesser is a real life party gam where players try to guess the contents of an image as quickly as possible.
- [Crabtyper](https://github.com/brancobruyneel/crabtyper) - A speedtyping web app written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [We-Come Monorepo](https://github.com/kabinetkmitb/wecome) - This is a monorepo for wecome KM ITB, [Live Demo](https://wecome-itb.com/).
- [blog-rs](https://github.com/songday/blog-rs) - A blog system in which frontend and backend are ALL written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust). Backend powered by Warp and frontend built on Yew (WASM).
- [mb2](https://devctm.com) - A poker server with a Yew client. Click the `Demo` button and then `Start` to see the client.
- [Puzzle Cube](https://github.com/wainwrightmark/puzzle_cube) - Rubix Cube solver using [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and Yew, [Live Demo](https://wainwrightmark.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/puzzle_cube/).
- [CubeShuffle](https://github.com/philipborg/CubeShuffle) - Card game shuffling utility built with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), Yew, Bulma and Tauri.
- [Rust Audio](https://github.com/austintheriot/audio) - Realtime audio processing / synthesis using Rust/WASM in the browser, [Live Demo](https://austintheriot.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/audio/).
- [Kiomet](https://github.com/SoftbearStudios/kiomet) - An online real-time strategy game in which you expand your territory by capturing towers.
- [Portfolio website](https://github.com/simbleau/website) - A portfolio SPA with accessibility built-in by Spencer Imbleau.
- [tchatche.rs](https://github.com/nag763/tchatchers) - A Websocket chat based application built in Yew and Axum.
- [viz.rs](https://github.com/viz-rs/viz-rs.[github](/@harrisonqian/awesome/wiki/development-environment/github).io) - A website for viz web framework, [Live Demo](https://viz.rs/).
- [theiskaa.com](https://github.com/theiskaa/theiskaa.com) - A real world implementation of Yew framework. [Live at theiskaa.com](https://theiskaa.com).
- [live-ask.com](https://github.com/liveask/liveask) - Realtime Event/Meetup Q&A Platform. [Live at live-ask.com](https://live-ask.com).
- [Sumi](https://github.com/vgwidt/sumi) - Multi-user issue tracking and knowledge base app built with Yew & Actix.
- [hurlurl](https://github.com/lucasmerlin/hurlurl) - A randomizing link shortener, [Live Demo](https://hurlurl.com/).
- [Macige](https://github.com/tramlinehq/macige) - CI workflow generator for mobile app development, [Live Demo](https://macige.tramline.app).
- [Spaceman](https://github.com/eliaperantoni/spaceman) - Spaceman is a [cross-platform](/@harrisonqian/awesome/wiki/platforms/cross-platform) gRPC client designed to be pleasant to use and pretty to look at.
- [Crypto-helper](https://github.com/TheBestTvarynka/crypto-helper) - Web app that can hash, encrypt, and sign the data on the client side. Also includes a JWT debugger. [Website](https://crypto.qkation.com).
- [zoom-rs](https://github.com/security-union/zoom-rs) - Zoom clone written in [rust](/@harrisonqian/awesome/wiki/programming-languages/rust) for research purposes.
- [Ubiquity](https://github.com/opensourcecheemsburgers/ubiquity) - An open-source, [cross-platform](/@harrisonqian/awesome/wiki/platforms/cross-platform) [markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) editor; built with Yew, Tauri, Tailwind, and DaisyUI. [Web App](https://ubiquity.rs).
- [demo_web_zip_wasm](https://github.com/MAE664128/demo_web_zip_wasm) - A simple example program for creating ZIP archives running in the browser using [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly), [Live Demo](https://mae664128.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/demo_web_zip_wasm/).
- [RustedLessPass](https://github.com/RustedLessPass/RustedLessPass) - A stateless password manager. [Web App](https://rustedlesspass.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/).
- [windows-terminal-theme-generator](https://github.com/LelouchFR/windows-terminal-theme-generator/) - Simplify your life to create a [windows](/@harrisonqian/awesome/wiki/platforms/windows) terminal theme. [Live Demo](https://windows-terminal-theme-generator.netlify.app/)
- [SandCat](https://github.com/Xu-Mj/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](https://github.com/madeofpendletonwool/PinePods) - PinePods is a [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) based podcast management system that manages [podcasts](/@harrisonqian/awesome/wiki/entertainment/podcasts) with multi-user support and relies on a central [database](/@harrisonqian/awesome/wiki/databases/database) with clients to connect to it.
- [0721](https://github.com/langyo/0721) - The engine of image hosting written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [Hikari](https://github.com/celestia-island/hikari) - The Frontend of Everything.
- [simply-view-image-for-[python](/@harrisonqian/awesome/wiki/programming-languages/python)-debugging](https://github.com/elazarcoh/simply-view-image-for-python-debugging?tab=[readme](/@harrisonqian/awesome/wiki/miscellaneous/readme)-ov-file) - [Visual studio code](/@harrisonqian/awesome/wiki/editors/visual-studio-code) extension simply view the image of the image variables when debugging [python](/@harrisonqian/awesome/wiki/programming-languages/python).
- [Mindsweeper](https://github.com/AlexBuz/mindsweeper) - A principled take on minesweeper, [Live Demo](https://alexbuz.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/mindsweeper/).
- [scap-rs](https://github.com/emo-crab/scap-rs) - National Vulnerability [Database](/@harrisonqian/awesome/wiki/databases/database) (NVD) implemented by [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), [Live Demo](https://scap.kali-team.cn/).
- [Sentry Relay](https://github.com/getsentry/relay) - The Sentry [Relay](/@harrisonqian/awesome/wiki/front-end-development/relay) is a service that pushes some functionality from the Sentry SDKs as well as the Sentry server into a proxy process.
- [Syre](https://github.com/syre-data/syre) - Scientific data management and insights.
- [candle-wasm-examples](https://github.com/huggingface/candle) - Candle is a minimalist ML framework for [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) with a focus on performance (including GPU support) and ease of use. Try our online demos: [whisper](https://huggingface.co/spaces/lmz/candle-whisper), [LLaMA2](https://huggingface.co/spaces/lmz/candle-llama2), [T5](https://huggingface.co/spaces/radames/Candle-T5-Generation-Wasm), [yolo](https://huggingface.co/spaces/lmz/candle-yolo), [Segment
  Anything](https://huggingface.co/spaces/radames/candle-segment-anything-wasm).
- [chipbox](https://github.com/chipnertkj/chipbox) - chipbox is an open-source desktop DAW written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [Taxy](https://github.com/picoHz/taxy/tree/main) - A reverse proxy server with built-in WebUI, supporting TCP/HTTP/TLS/WebSocket, written in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [Proxelar](https://github.com/emanuele-em/proxelar) - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust)-based Man in the Middle proxy, an early-stage project aimed at providing visibility into network traffic.
- [diff.rs](https://github.com/xfbs/diff.rs) - Web application to render a diff between [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) crate versions. Implemented in Yew, runs fully in the browser as [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly), [Live Demo](https://diff.rs).
- [konnektoren.help](https://github.com/Konnektoren/konnektoren-web-game) - An interactive web application for [learning](/@harrisonqian/awesome/wiki/programming-languages/learning) German grammar, featuring gamified challenges and a map-based interface. [Web App](https://konnektoren.help)
- [layout-viewer](https://prideout.net/layout-viewer) - Examine layouts of integrated circuits with zoom and pan controls.
- [Google Wasefire](https://github.com/google/wasefire) - Secure firmware framework focusing on developer experience.
- [Apache Iggy](https://github.com/apache/iggy) - Apache Iggy: [Hyper](/@harrisonqian/awesome/wiki/development-environment/hyper)-Efficient Message [Streaming](/@harrisonqian/awesome/wiki/big-data/streaming) at Laser Speed.

## Templates

- [Create Yew App](https://github.com/jetli/create-yew-app) - Set up a modern Yew web app by running one command, `npx create-yew-app my-app`.
- [yew-wasm-pack-template](https://github.com/yewstack/yew-wasm-pack-template) - A template for starting a Yew project to be used with wasm-pack.
- [yew-wasm-pack-minimal](https://github.com/yewstack/yew-wasm-pack-minimal) - A minimal template for starting a Yew project using wasm-bindgen and wasm-pack.
- [yew-parcel-template](https://github.com/spielrs/yew-parcel-template) - [Awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) Yew with Yew-Router and Parcel application.
- [yew-template-for-[github](/@harrisonqian/awesome/wiki/development-environment/github)-io](https://github.com/Ja-sonYun/yew-template-for-github-io) - Directly deployable Template of yew project for [github](/@harrisonqian/awesome/wiki/development-environment/github).io, using tailwind and webpack for css, trunk for build and serve.
- [tailwindcss-yew-template](https://github.com/vvcaw/tailwindcss-yew-template) - Simple layout for using Tailwindcss with Yew.
- [axum-yew-setup](https://github.com/rksm/axum-yew-setup) - A starter project that sets up Axum and Yew for full stack [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) web [apps](/@harrisonqian/awesome/wiki/platforms/apps).
- [rust-yew-axum-tauri-desktop](https://github.com/jetli/rust-yew-axum-tauri-desktop) - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) + Yew + Axum + Tauri, full-stack Rust development for Desktop [apps](/@harrisonqian/awesome/wiki/platforms/apps).
- [Yew PWA Minimal](https://github.com/fkohlgrueber/yew-pwa-minimal) - A minimal Progressive Web App using Yew.
- [Yew HTTP Starter](https://github.com/LeTurt333/yew_http_starter) - Yew template with a simple HTTP message & useful helper comments.
- [Yew minimlistic template](https://github.com/averichev/yew-starter-template) - A minimalistic template for quickly starting a project on yew.

## Crates

### Component Libraries

- [yew-mdc](https://github.com/dungeonfog/yew-mdc) - [Material Design](/@harrisonqian/awesome/wiki/front-end-development/material-design) Components for the Yew framework.
- [muicss-yew](https://github.com/AlephAlpha/muicss-yew) - MUI-CSS Components for Yew framework.
- [yew-bulma](https://github.com/kellpossible/yew-bulma) - A [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) library providing components based on the bulma css library for projects using Yew.
- [material-yew](https://github.com/hamza1311/material-yew) - Yew wrapper for Material [Web Components](/@harrisonqian/awesome/wiki/front-end-development/web-components).
- [Yewprint](https://github.com/yewprint/yewprint) - Port of blueprintjs.com to Yew.
- [ybc](https://github.com/thedodd/ybc) - A Yew component library based on the Bulma CSS framework.
- [patternfly-yew](https://github.com/ctron/patternfly-yew) - Patternfly components for Yew.
- [yew-feather](https://github.com/pedrodesu/yew-feather) - Feather [Icons](/@harrisonqian/awesome/wiki/media/icons) components for Yew.
- [tailwind-yew-builder](https://github.com/matiu2/tailwind-yew-builder) - Builds [Tailwind CSS](/@harrisonqian/awesome/wiki/front-end-development/tailwind-css) for Yew using [docker](/@harrisonqian/awesome/wiki/back-end-development/docker)-compose. Also supports Trunk.
- [yew-components](https://github.com/angular-rust/yew-components) - [Material Design](/@harrisonqian/awesome/wiki/front-end-development/material-design) Components for the Yew framework.
- [yew-chart](https://github.com/titanclass/yew-chart) - A Yew-based [charting](/@harrisonqian/awesome/wiki/front-end-development/charting) library that provides SVG based components for rendering charts.
- [tailyew](https://github.com/fuzzycloud/tailyew) - Yew wrapper around DaisyUI (tailwindcss based) components.
- [yew-duskmoon-ui](https://github.com/gsmlg-dev/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](https://gsmlg-dev.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/yew-duskmoon-ui/).
- [yew-bootstrap](https://github.com/isosphere/yew-bootstrap) - A Yew wrapper for the Bootstrap 5 component library.
- [Zu](https://github.com/RustVis/zu) - Yew [web components](/@harrisonqian/awesome/wiki/front-end-development/web-components), implementing [Material Design](/@harrisonqian/awesome/wiki/front-end-development/material-design).
- [yew-nav-link](https://github.com/RAprogramm/yew-nav-link) - A navigational link that is aware of its active state based on the current route in the application.
- [Rust Lucide](https://lucide.rustforweb.org) - Yew port of Lucide, a beautiful & consistent icon toolkit made by the community.
- [Rust Radix](https://radix.rustforweb.org) - Yew port of Radix, a library of components, [icons](/@harrisonqian/awesome/wiki/media/icons), colors, and templates for building high-quality, accessible UI.
- [Rust shadcn/ui](https://shadcn-ui.rustforweb.org) - Yew port of shadcn/ui, a library of beautifully designed components that you can copy and paste into your [apps](/@harrisonqian/awesome/wiki/platforms/apps).

### Components

- [Yew Form](https://github.com/jfbilodeau/yew_form) - Components to simplify handling forms with Yew.
- [yew-component-size](https://github.com/AircastDev/yew-component-size) - A Yew component that emits events when the parent component changes width/height.
- [yew-virtual-scroller](https://github.com/AircastDev/yew-virtual-scroller) - A Yew component for virtual scrolling / scroll windowing.
- [yew-oauth2](https://github.com/ctron/yew-oauth2/) - A plain Yew OAuth2/OpenIDConnect component, not tied to any CSS framework.
- [yew-scroll-area](https://github.com/MatchaChoco010/yew-scroll-area) - Custom scroll area for Yew.

### Hooks

- [yew-hooks](https://github.com/jetli/yew-hooks) - Custom Hooks library for Yew, inspired by [streamich/react-use](https://github.com/streamich/react-use) and [alibaba/hooks](https://github.com/alibaba/hooks).
- [yew-side-effect](https://github.com/futursolo/yew-side-effect) - Reconcile Side Effects in Yew Applications, inspired by [react-side-effect](https://github.com/gaearon/react-side-effect) and [react-helmet](https://github.com/nfl/react-helmet).
- [Bounce](https://github.com/bounce-rs/bounce) - The uncomplicated state management library for Yew, inspired by [Redux](https://github.com/reduxjs/redux) and [Recoil](https://github.com/facebookexperimental/Recoil).
- [yewv](https://github.com/yewv/yewv) - A lightning fast state management module for Yew built with performance and simplicity as a first priority.

### Javascript Library Ports

- [Plotly.rs](https://github.com/igiagkiozis/plotly) - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) bindings for the popular [Plotly](https://plotly.com/javascript/) [charting](/@harrisonqian/awesome/wiki/front-end-development/charting) library.
- [ag-grid-rs](https://github.com/mfreeborn/ag-grid-rs) - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) bindings for the [AG Grid](https://www.ag-grid.com/javascript-data-grid/) datatable library.
- [popper-rs](https://github.com/ctron/popper-rs/) - [Popper JS](https://popper.js.org/) bindings for [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).

### Utils

- [Yewdux](https://github.com/intendednull/yewdux) - [Redux](/@harrisonqian/awesome/wiki/front-end-development/redux)-like state [containers](/@harrisonqian/awesome/wiki/platforms/containers) for Yew [apps](/@harrisonqian/awesome/wiki/platforms/apps).
- [reacty_yew](https://github.com/hobofan/reacty_yew) - Generate Yew components from [React](/@harrisonqian/awesome/wiki/front-end-development/react) components via Typescript type definitions.
- [styled-yew](https://github.com/IcyDefiance/styled-yew) - CSS in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust), similar to styled-components, but for Yew.
- [stylist-rs](https://github.com/futursolo/stylist-rs) - A CSS-in-[Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) styling solution for [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) Applications.
- [Yew Interop](https://github.com/Madoshakalaka/yew-interop) - Load [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) and CSS asynchronously in Yew.
- [Tailwind RS](https://github.com/oovm/tailwind-rs) - Tailwind style tracer in [rust](/@harrisonqian/awesome/wiki/programming-languages/rust), JIT + AOT interpreter.
- [yew-style-in-rs](https://github.com/MatchaChoco010/yew-style-in-rs) - Scoped CSS in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) for Yew.
- [yew_icons](https://github.com/finnbear/yew_icons) - Easily include a variety of svg [icons](/@harrisonqian/awesome/wiki/media/icons)(Feather/Font Awesome/Octicons) into your Yew app.
- [Yew-Template](https://github.com/INSAgenda/yew-template) - A crate for separating HTML and [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) code when using Yew.
- [yew-nested-router](https://github.com/ctron/yew-nested-router) - A router that supported nesting, with Yew 0.20.
- [turf](https://github.com/myFavShrimp/turf) - Macro based compile-time SCSS transpilation, CSS minification, and class name uniquification toolchain inspired by CSS modules.
- [browser-panic-hook](https://github.com/ctron/browser-panic-hook) - A panic handler for browser environments, allowing to fail in an end-user friendly way.
- [Rust Floating UI](https://floating-ui.rustforweb.org/) - Floating UI is a library that helps you create "floating" elements such as tooltips, popovers, dropdowns, and more.

### Wasm

- [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen) - Facilitating high-level interactions between [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) modules and [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript).
- [stdweb](https://github.com/koute/stdweb) - Provides [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) bindings to the Web APIs and to allow a high degree of interoperability between Rust and [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript).
- [tauri-sys](https://github.com/JonasKruckenberg/tauri-sys) - Raw bindings to the Tauri API for projects using wasm-bindgen.

### Frameworks

- [stackable](https://github.com/futursolo/stackable) - A framework experience for Yew.

## Tooling

- [wasm-pack](https://github.com/rustwasm/wasm-pack) - Your favorite [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) -> [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) workflow tool.
- [wasm-pack-action](https://github.com/jetli/wasm-pack-action) - [Github](/@harrisonqian/awesome/wiki/development-environment/github) action to install `wasm-pack` by downloading the executable to speed up CI/CD.
- [wasm-bindgen-action](https://github.com/jetli/wasm-bindgen-action) - [Github](/@harrisonqian/awesome/wiki/development-environment/github) action to install `wasm-bindgen` by downloading the executable to speed up CI/CD.
- [cargo-web](https://github.com/koute/cargo-web) - A Cargo subcommand for the client-side Web.
- [Trunk](https://github.com/thedodd/trunk) - Build, bundle & ship your [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Wasm application to the web.
- [trunk-action](https://github.com/jetli/trunk-action) - [Github](/@harrisonqian/awesome/wiki/development-environment/github) action to install `Trunk` by downloading the executable to speed up CI/CD.
- [wabt](https://github.com/WebAssembly/wabt) - The [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) Binary Toolkit, for the `wasm-strip` and `wasm-objdump` tools to reduce .wasm file size.
- [binaryen](https://github.com/WebAssembly/binaryen) - Compiler infrastructure and toolchain library for [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly), for the `wasm-opt` tool to reduce .wasm file size.
- [Tauri](https://github.com/tauri-apps/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](/@harrisonqian/awesome/wiki/programming-languages/rust)-sourced binary with an API that the front-end can interact with.
- [yew-fmt](https://github.com/schvv31n/yew-fmt) - A configurable extension to `rustfmt` for formatting Yew HTML.

## Articles

- [Let's Build a [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Frontend with Yew](https://dev.to/deciduously/lets-build-a-rust-frontend-with-yew---part-1-3k2o)
- [How to use [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Yew](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20Rust%20Yew.md)
- [How to use a modal in Rust](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20a%20modal%20in%20Rust.md)
- [How to use routers in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Frontend](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20routers%20in%20Rust%20Frontend.md)
- [How to modulize your [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Frontend](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20modulize%20your%20Rust%20Frontend.md)
- [How to use NPM packages with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Frontend](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20NPM%20packages%20with%20Rust%20Frontend.md)
- [How to use [markdown](/@harrisonqian/awesome/wiki/miscellaneous/markdown) with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Frontend](https://github.com/steadylearner/blog/blob/master/posts/Rust/How%20to%20use%20markdown%20with%20code%20snippets%20in%20Rust%20Frontend.md)
- [Fullstack [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) with Yew](https://github.com/steadylearner/blog/tree/master/posts/Rust/Fullstack%20Rust%20with%20Yew.md)
- [How to write Full Stack [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) code](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20write%20Full%20Stack%20Rust%20code.md)
- [How to render a YouTube vlog with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Yew fetch API](https://github.com/steadylearner/blog/blob/master/posts/Rust/How%20to%20render%20a%20YouTube%20vlog%20with%20%20Rust%20Yew%20fetch%20API.md)
- [How to render blog posts with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Yew mounted API](https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20render%20blog%20posts%20with%20Rust%20Yew%20mounted%20API.md)
- [A Web Application completely in Rust](https://medium.com/@saschagrunert/a-web-application-completely-in-[rust](/@harrisonqian/awesome/wiki/programming-languages/rust)-6f6bdb6c4471)
- [Yew - [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) & WebAsse-frontend framework](https://sudonull.com/post/11627-Yew-Rust-WebAsse-frontend-framework)
- [Create a desktop app in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) using Tauri and Yew](https://dev.to/stevepryde/create-a-desktop-app-in-rust-using-tauri-and-yew-2bhe)
- [A code walkthrough video of Yew with a real-world app with Christopher Hunt and Kiki Carter](https://www.youtube.com/watch?v=ilrGIJGdqRo)
- [Adding Tailwind to Yew](https://mikekrisher.com/writings/yew_and_tailwind)

## Courses

- [full-stack-todo-[rust](/@harrisonqian/awesome/wiki/programming-languages/rust)-course](https://github.com/brooks-builds/full-stack-todo-rust-course) - Full stack rust course including course for Yew.

## Books

- [The [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) Book](https://rustwasm.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/docs/book/) - Working with the web and producing .wasm files.
- [The wasm-bindgen Guide](https://rustwasm.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/docs/wasm-bindgen/) - How to bind [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) APIs.
- [The wasm-pack Guide](https://rustwasm.[github](/@harrisonqian/awesome/wiki/development-environment/github).io/docs/wasm-pack/) - How to build and work with [rust](/@harrisonqian/awesome/wiki/programming-languages/rust)-generated [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly).
- [Programming [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) with Rust](https://pragprog.com/book/khrust/programming-webassembly-with-rust) - Includes a chapter `Advanced [JavaScript](/@harrisonqian/awesome/wiki/programming-languages/javascript) [Integration](/@harrisonqian/awesome/wiki/platforms/integration) with Yew` on creating an app with Yew.
- [Creative Projects for [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) Programmers](https://www.oreilly.com/library/view/creative-projects-for/9781789346220/) - Chapter 5, `Creating a Client-Side [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) App Using Yew`.
- [Server-Side WebAssembly](https://www.manning.com/books/server-side-webassembly) - How to use [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) components and the WebAssembly System Interface (WASI) to build web back ends.

## 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](https://github.com/utkarshkukreti/draco) - A [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) library for building client side web applications with [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly).
- [Percy](https://github.com/chinedufn/percy) - A modular toolkit for building isomorphic web [apps](/@harrisonqian/awesome/wiki/platforms/apps) with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) + [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly).
- [Sauron](https://github.com/ivanceras/sauron) - Sauron is an HTML web framework for building web-[apps](/@harrisonqian/awesome/wiki/platforms/apps).
- [Seed](https://github.com/seed-rs/seed) - A [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) framework for creating web [apps](/@harrisonqian/awesome/wiki/platforms/apps).
- [Smithy](https://github.com/rbalicki2/smithy) - A framework for building [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) [apps](/@harrisonqian/awesome/wiki/platforms/apps) in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).
- [Dioxus](https://github.com/DioxusLabs/dioxus) - Elegant [React](/@harrisonqian/awesome/wiki/front-end-development/react)-like library for building user interfaces for desktop, web, mobile, SSR, liveview, and more.
- [Sycamore](https://github.com/sycamore-rs/sycamore) - A reactive library for creating web [apps](/@harrisonqian/awesome/wiki/platforms/apps) in [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly).
- [Leptos](https://github.com/leptos-rs/leptos) - Build fast web applications with [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust).

## Related lists

- [Awesome [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) and WebAssembly](https://github.com/rustwasm/awesome-rust-and-webassembly) - A list of [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) Rust and [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) projects, libraries, tools, and resources.
- [Awesome WebAssembly](https://github.com/mbasso/awesome-wasm) - Collection of [awesome](/@harrisonqian/awesome/wiki/miscellaneous/awesome) things regarding [WebAssembly](/@harrisonqian/awesome/wiki/front-end-development/webassembly) ecosystem.
- [Awesome Rust](https://github.com/rust-unofficial/awesome-rust) - A curated list of [Rust](/@harrisonqian/awesome/wiki/programming-languages/rust) code and resources.
