667 lines
34 KiB
HTML
667 lines
34 KiB
HTML
<h1 id="awesome-yew-awesome">Awesome Yew <a
|
||
href="https://awesome.re"><img src="https://awesome.re/badge.svg"
|
||
alt="Awesome" /></a></h1>
|
||
<p><a
|
||
href="https://github.com/yewstack/yew"><img src="logo.svg" align="right" width="100" title="Awesome Yew"></a></p>
|
||
<blockquote>
|
||
<p>A curated list of awesome things related to Yew.</p>
|
||
</blockquote>
|
||
<p><a href="https://github.com/yewstack/yew">Yew</a> is a modern Rust
|
||
framework inspired by Elm and React for creating multi-threaded frontend
|
||
apps with WebAssembly.</p>
|
||
<p>Contributions welcome! Read the <a
|
||
href="CONTRIBUTING.md">contribution guidelines</a> first.</p>
|
||
<h2 id="contents">Contents</h2>
|
||
<ul>
|
||
<li><a href="#official">Official</a></li>
|
||
<li><a href="#projects">Projects</a></li>
|
||
<li><a href="#templates">Templates</a></li>
|
||
<li><a href="#crates">Crates</a>
|
||
<ul>
|
||
<li><a href="#component-libraries">Component Libraries</a></li>
|
||
<li><a href="#components">Components</a></li>
|
||
<li><a href="#hooks">Hooks</a></li>
|
||
<li><a href="#utils">Utils</a></li>
|
||
<li><a href="#wasm">Wasm</a></li>
|
||
</ul></li>
|
||
<li><a href="#tooling">Tooling</a></li>
|
||
<li><a href="#articles">Articles</a></li>
|
||
<li><a href="#books">Books</a></li>
|
||
<li><a href="#alternatives">Alternatives</a></li>
|
||
<li><a href="#related-lists">Related lists</a></li>
|
||
</ul>
|
||
<h2 id="official">Official</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/yewstack/yew">Yew</a> - Rust /
|
||
WebAssembly framework for building client web apps.</li>
|
||
<li><a href="https://yew-todomvc.netlify.com">Live demo</a> - A todomvc
|
||
demo.</li>
|
||
<li><a
|
||
href="https://github.com/yewstack/yew/tree/master/examples">Examples</a>
|
||
- Smaller examples included in official repo.</li>
|
||
<li><a href="https://docs.rs/yew">API Docs</a> - Docs on docs.rs.</li>
|
||
<li><a href="https://yew.rs/">Website</a> - Official website.</li>
|
||
<li><a href="https://discord.gg/VQck8X4">Chatroom</a> - It is pretty
|
||
active and is a great place to ask questions.</li>
|
||
<li><a href="https://www.reddit.com/r/yew_web/">Reddit</a> - Dedicated
|
||
Sub Reddit.</li>
|
||
<li><a href="https://opencollective.com/yew">Financial Contribute</a> -
|
||
Become a financial contributor and help us sustain our community.</li>
|
||
<li><a href="https://play.yew.rs">Playground</a> - Online playground for
|
||
Yew.</li>
|
||
</ul>
|
||
<h2 id="projects">Projects</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/jetli/rust-yew-realworld-example-app">Realworld
|
||
example</a> - Exemplary real world app built with Rust + Yew +
|
||
WebAssembly. It utilizes Yew’s latest <code>function components</code>
|
||
and <code>hooks</code>. It also supports desktop application powered by
|
||
<a href="https://github.com/tauri-apps/tauri">Tauri</a>.</li>
|
||
<li><a href="https://github.com/saschagrunert/webapp.rs">webapp.rs</a> -
|
||
A web application completely written in Rust, frontend is built with
|
||
Yew.</li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/Rust-Full-Stack">Rust-Full-Stack</a>
|
||
- Easily testable and working Rust codes with blog posts to explain
|
||
them.</li>
|
||
<li><a href="https://github.com/hgzimmerman/BucketQuestions">Bucket
|
||
Questions</a> - A webapp written entirely in Rust for a dumb party
|
||
game.</li>
|
||
<li><a
|
||
href="https://github.com/Extrawurst/rust-webview-todomvc-yew">web-view
|
||
todomvc desktop app</a> - Demo how to use yew for a todomvc that
|
||
compiles to WebAssembly and is bundled as a lightweight(~2mb) desktop
|
||
app by <a href="https://github.com/Boscop/web-view">web-view</a>, as an
|
||
alternative to Electron, <a
|
||
href="https://github.com/Boscop/web-view">web-view</a> also has a <a
|
||
href="https://github.com/Boscop/web-view/tree/master/examples#todo-yew">demo</a>.</li>
|
||
<li><a
|
||
href="https://github.com/hobofan/yew-react-example">yew-react-example</a>
|
||
- This project shows how to create a web app using a React component
|
||
inside a Yew component.</li>
|
||
<li><a href="https://github.com/stkevintan/Kirk">Kirk</a> - Just A Rust
|
||
WebAssembly Blog.</li>
|
||
<li><a
|
||
href="https://github.com/extraymond/rust-async-wasm-demo">rust-async-wasm-demo</a>
|
||
- Toy project to learn Rust and async that can be deployed to the
|
||
web.</li>
|
||
<li><a href="https://github.com/tarkah/karaoke-rs">karaoke-rs</a> - A
|
||
simple, network enabled karaoke player in Rust.</li>
|
||
<li><a href="https://github.com/noc7c9/i-love-hue-rs">I Love Hue!
|
||
(rs)</a> - A clone of the mobile game I Love Hue in Yew (Rust).</li>
|
||
<li><a
|
||
href="https://github.com/spielrs/yew-styles-page">yew-styles-page</a> -
|
||
This is an initial project of a framework style for yew.</li>
|
||
<li><a href="https://github.com/jplatte/caniuse.rs">caniuse.rs</a> -
|
||
Rust feature search.</li>
|
||
<li><a href="https://github.com/Extrawurst/rust-electron-demo">Rust
|
||
electron yew demo</a> - An example of building a Rust based web app
|
||
(Yew) into a native app using electron.</li>
|
||
<li><a href="https://github.com/jbowens/covplot">covplot</a> - Live
|
||
graphs of worldwide CoVID-19 data.</li>
|
||
<li><a href="https://github.com/jgpaiva/minesweeper">Minesweeper</a> -
|
||
Minesweeper built with Rust, Yew and WebAssembly.</li>
|
||
<li><a href="https://github.com/Stigjb/freecell">Freecell</a> - A
|
||
patience game written in Rust and Yew.</li>
|
||
<li><a
|
||
href="https://github.com/codec-abc/Yew-WebRTC-Chat">Yew-WebRTC-Chat</a>
|
||
- A simple WebRTC chat made with Yew.</li>
|
||
<li><a
|
||
href="https://github.com/lukidoescode/yew-fullstack-boilerplate">Yew
|
||
Fullstack Boilerplate</a> - Highly opinionated boilerplate for creating
|
||
full stack applications with Rust.</li>
|
||
<li><a href="https://github.com/Stigjb/chord-quiz">Chord Quiz</a> -
|
||
Practice recognizing chords in this Rust/Yew/WebAssembly app.</li>
|
||
<li><a
|
||
href="https://github.com/sheshbabu/rustmart-yew-example">RustMart</a> -
|
||
Single Page Application (SPA) written using Rust, Wasm and Yew.</li>
|
||
<li><a href="https://github.com/alepez/devand">DevAndDev</a> - A website
|
||
where developers can find pair-programming partners. Written in Rust,
|
||
Yew frontend.</li>
|
||
<li><a href="https://github.com/io12/yew-octicons">yew-octicons</a> - An
|
||
easy interface for using Octicons in Yew projects.</li>
|
||
<li><a href="https://github.com/pipe-fun/pipe">Pipe</a> - This is a Rust
|
||
/ Wasm client web app which is a task control center.</li>
|
||
<li><a href="https://github.com/oovm/note-to-yew">note-to-yew</a> -
|
||
Convert your markups into Yew macro online, which is also made by
|
||
Yew.</li>
|
||
<li><a href="https://github.com/getreu/ascii-hangman">ASCII-Hangman</a>
|
||
- Configurable Hangman game for children with ASCII-art rewarding.</li>
|
||
<li><a href="https://github.com/shaunbennett/dotdotyew">dotdotyew</a> -
|
||
<a href="https://en.wikipedia.org/wiki/Dot-voting">Dot-voting</a> using
|
||
Yew, with Rust powering the backend API.</li>
|
||
<li><a href="https://github.com/dev-family/wasm-2048">wasm-2048</a> -
|
||
2048 game implemented with Rust and Yew and compiled to Wasm.</li>
|
||
<li><a href="https://github.com/kamiyaa/website-wasm">website-wasm</a> -
|
||
My personal website written in Rust via Yew/Wasm.</li>
|
||
<li><a href="https://github.com/rayylee/keypress">KeyPress</a> - A Rust
|
||
WebAssembly Website example for practising english for chinese.</li>
|
||
<li><a
|
||
href="https://github.com/anthhub/yew-train-ticket">yew-train-ticket</a>
|
||
- A Rust WebAssembly <a href="http://118.190.37.169:8002">Webapp</a>
|
||
example basing Yew newest hooks and functional API, the code style is
|
||
extremely like React Function Component.</li>
|
||
<li><a
|
||
href="https://github.com/ivanschuetz/yew-d3-example">yew-d3-example</a>
|
||
- Showing a d3 chart with Yew.</li>
|
||
<li><a href="https://github.com/sanpii/oxfeed">Oxfeed</a> - A feed
|
||
reader written in Rust with a Yew frontend.</li>
|
||
<li><a href="https://github.com/LighghtEeloo/flow.er">Flow.er</a> - A
|
||
notebook app integrated with todo lists utility. Developed with Rust,
|
||
WebAssembly, Yew and Trunk.</li>
|
||
<li><a
|
||
href="https://github.com/vascokk/fullstack-rust">Fullstack-Rust</a> - A
|
||
Full Stack Rust application (Connect5 game) with Actix-web, Yew, Bulma
|
||
CSS and Diesel.</li>
|
||
<li><a href="https://github.com/MAE664128/sea_battle">Sea_battle</a> - A
|
||
simple example of a sea battle game. Rust + Yew.</li>
|
||
<li><a
|
||
href="https://github.com/zzy/tide-async-graphql-mongodb">tide-async-graphql-mongodb</a>
|
||
- Clean boilerplate for graphql services, with wasm/yew frontend.</li>
|
||
<li><a href="https://github.com/zzy/surfer">surfer</a> - A blog built on
|
||
yew + graphql, with <a href="https://niqin.com">live demo site</a>.
|
||
Backend for graphql services, and frontend for web application.</li>
|
||
<li><a href="https://abhimanyu003.github.io/qubit">qubit</a> - A handy
|
||
calculator, based on Rust and WebAssembly, <a
|
||
href="https://abhimanyu003.github.io/qubit/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/pmsanford/paudle">Paudle</a> - A
|
||
reimplementation of the excellent word game Wordle by Josh Wardle.</li>
|
||
<li><a href="https://github.com/Jondolf/rust-algorithms">Rust
|
||
algorithms</a> - A website with interactive implementations of various
|
||
algorithms.</li>
|
||
<li><a href="https://gitlab.com/marcempunkt/maeurerdev">Marc
|
||
Portfolio</a> - A software developer portfolio, <a
|
||
href="https://maeurer.dev/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/zzhack-stack/zzhack">zzhack</a> - A
|
||
personal blog, based on Rust & Yew, <a
|
||
href="https://www.zzhack.fun/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/Altair-Bueno/rquote">Rquote</a> - Rquote
|
||
is a web application built using Rust and WebAssembly. It fetches Anime
|
||
quotes from the Animechan API. <a href="https://rquote.vercel.app/">Live
|
||
Demo</a>.</li>
|
||
<li><a href="https://github.com/zzy/yew-ssr-tide">yew-ssr-tide</a> - The
|
||
example demonstrates Yew server-side rendering with tide & surf, it
|
||
needs the <strong>development version</strong> of Yew.</li>
|
||
<li><a
|
||
href="https://github.com/zzy/yew-ssr-actix-web">yew-ssr-actix-web</a> -
|
||
The example demonstrates Yew server-side rendering with actix-web &
|
||
reqwest, it needs the <strong>development version</strong> of Yew.</li>
|
||
<li><a href="https://github.com/tdooms/pixelguesser">PixelGuesser</a> -
|
||
PixelGuesser is a real life party gam where players try to guess the
|
||
contents of an image as quickly as possible.</li>
|
||
<li><a href="https://github.com/brancobruyneel/crabtyper">Crabtyper</a>
|
||
- A speedtyping web app written in Rust.</li>
|
||
<li><a href="https://github.com/kabinetkmitb/wecome">We-Come
|
||
Monorepo</a> - This is a monorepo for wecome KM ITB, <a
|
||
href="https://wecome-itb.com/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/songday/blog-rs">blog-rs</a> - A blog
|
||
system in which frontend and backend are ALL written in Rust. Backend
|
||
powered by Warp and frontend built on Yew (WASM).</li>
|
||
<li><a href="https://devctm.com">mb2</a> - A poker server with a Yew
|
||
client. Click the <code>Demo</code> button and then <code>Start</code>
|
||
to see the client.</li>
|
||
<li><a href="https://github.com/wainwrightmark/puzzle_cube">Puzzle
|
||
Cube</a> - Rubix Cube solver using Rust and Yew, <a
|
||
href="https://wainwrightmark.github.io/puzzle_cube/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/philipborg/CubeShuffle">CubeShuffle</a>
|
||
- Card game shuffling utility built with Rust, Yew, Bulma and
|
||
Tauri.</li>
|
||
<li><a href="https://github.com/austintheriot/audio">Rust Audio</a> -
|
||
Realtime audio processing / synthesis using Rust/WASM in the browser, <a
|
||
href="https://austintheriot.github.io/audio/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/SoftbearStudios/kiomet">Kiomet</a> - An
|
||
online real-time strategy game in which you expand your territory by
|
||
capturing towers.</li>
|
||
<li><a href="https://github.com/simbleau/website">Portfolio website</a>
|
||
- A portfolio SPA with accessibility built-in by Spencer Imbleau.</li>
|
||
<li><a href="https://github.com/nag763/tchatchers">tchatche.rs</a> - A
|
||
Websocket chat based application built in Yew and Axum.</li>
|
||
<li><a href="https://github.com/viz-rs/viz-rs.github.io">viz.rs</a> - A
|
||
website for viz web framework, <a href="https://viz.rs/">Live
|
||
Demo</a>.</li>
|
||
<li><a href="https://github.com/theiskaa/theiskaa.com">theiskaa.com</a>
|
||
- A real world implementation of Yew framework. <a
|
||
href="https://theiskaa.com">Live at theiskaa.com</a>.</li>
|
||
<li><a href="https://github.com/liveask/liveask">live-ask.com</a> -
|
||
Realtime Event/Meetup Q&A Platform. <a
|
||
href="https://live-ask.com">Live at live-ask.com</a>.</li>
|
||
<li><a href="https://github.com/vgwidt/sumi">Sumi</a> - Multi-user issue
|
||
tracking and knowledge base app built with Yew & Actix.</li>
|
||
<li><a href="https://github.com/lucasmerlin/hurlurl">hurlurl</a> - A
|
||
randomizing link shortener, <a href="https://hurlurl.com/">Live
|
||
Demo</a>.</li>
|
||
<li><a href="https://github.com/tramlinehq/macige">Macige</a> - CI
|
||
workflow generator for mobile app development, <a
|
||
href="https://macige.tramline.app">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/eliaperantoni/spaceman">Spaceman</a> -
|
||
Spaceman is a cross-platform gRPC client designed to be pleasant to use
|
||
and pretty to look at.</li>
|
||
<li><a
|
||
href="https://github.com/TheBestTvarynka/crypto-helper">Crypto-helper</a>
|
||
- Web app that can hash, encrypt, and sign the data on the client side.
|
||
Also includes a JWT debugger. <a
|
||
href="https://crypto.qkation.com">Website</a>.</li>
|
||
<li><a href="https://github.com/security-union/zoom-rs">zoom-rs</a> -
|
||
Zoom clone written in rust for research purposes.</li>
|
||
<li><a
|
||
href="https://github.com/opensourcecheemsburgers/ubiquity">Ubiquity</a>
|
||
- An open-source, cross-platform markdown editor; built with Yew, Tauri,
|
||
Tailwind, and DaisyUI. <a href="https://ubiquity.rs">Web App</a>.</li>
|
||
<li><a
|
||
href="https://github.com/MAE664128/demo_web_zip_wasm">demo_web_zip_wasm</a>
|
||
- A simple example program for creating ZIP archives running in the
|
||
browser using WebAssembly, <a
|
||
href="https://mae664128.github.io/demo_web_zip_wasm/">Live
|
||
Demo</a>.</li>
|
||
<li><a
|
||
href="https://github.com/RustedLessPass/RustedLessPass">RustedLessPass</a>
|
||
- A stateless password manager. <a
|
||
href="https://rustedlesspass.github.io/">Web App</a>.</li>
|
||
<li><a
|
||
href="https://github.com/LelouchFR/windows-terminal-theme-generator/">windows-terminal-theme-generator</a>
|
||
- Simplify your life to create a windows terminal theme. <a
|
||
href="https://windows-terminal-theme-generator.netlify.app/">Live
|
||
Demo</a></li>
|
||
<li><a href="https://github.com/Xu-Mj/sandcat">SandCat</a> - 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.</li>
|
||
<li><a
|
||
href="https://github.com/madeofpendletonwool/PinePods">PinePods</a> -
|
||
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.</li>
|
||
<li><a href="https://github.com/langyo/0721">0721</a> - The engine of
|
||
image hosting written in Rust.</li>
|
||
<li><a href="https://github.com/celestia-island/hikari">Hikari</a> - The
|
||
Frontend of Everything.</li>
|
||
<li><a
|
||
href="https://github.com/elazarcoh/simply-view-image-for-python-debugging?tab=readme-ov-file">simply-view-image-for-python-debugging</a>
|
||
- Visual studio code extension simply view the image of the image
|
||
variables when debugging python.</li>
|
||
<li><a href="https://github.com/AlexBuz/mindsweeper">Mindsweeper</a> - A
|
||
principled take on minesweeper, <a
|
||
href="https://alexbuz.github.io/mindsweeper/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/emo-crab/scap-rs">scap-rs</a> - National
|
||
Vulnerability Database (NVD) implemented by Rust, <a
|
||
href="https://scap.kali-team.cn/">Live Demo</a>.</li>
|
||
<li><a href="https://github.com/getsentry/relay">Sentry Relay</a> - The
|
||
Sentry Relay is a service that pushes some functionality from the Sentry
|
||
SDKs as well as the Sentry server into a proxy process.</li>
|
||
<li><a href="https://github.com/syre-data/syre">Syre</a> - Scientific
|
||
data management and insights.</li>
|
||
<li><a
|
||
href="https://github.com/huggingface/candle">candle-wasm-examples</a> -
|
||
Candle is a minimalist ML framework for Rust with a focus on performance
|
||
(including GPU support) and ease of use. Try our online demos: <a
|
||
href="https://huggingface.co/spaces/lmz/candle-whisper">whisper</a>, <a
|
||
href="https://huggingface.co/spaces/lmz/candle-llama2">LLaMA2</a>, <a
|
||
href="https://huggingface.co/spaces/radames/Candle-T5-Generation-Wasm">T5</a>,
|
||
<a href="https://huggingface.co/spaces/lmz/candle-yolo">yolo</a>, <a
|
||
href="https://huggingface.co/spaces/radames/candle-segment-anything-wasm">Segment
|
||
Anything</a>.</li>
|
||
<li><a href="https://github.com/chipnertkj/chipbox">chipbox</a> -
|
||
chipbox is an open-source desktop DAW written in Rust.</li>
|
||
<li><a href="https://github.com/picoHz/taxy/tree/main">Taxy</a> - A
|
||
reverse proxy server with built-in WebUI, supporting
|
||
TCP/HTTP/TLS/WebSocket, written in Rust.</li>
|
||
<li><a href="https://github.com/emanuele-em/proxelar">Proxelar</a> -
|
||
Rust-based Man in the Middle proxy, an early-stage project aimed at
|
||
providing visibility into network traffic.</li>
|
||
<li><a href="https://github.com/xfbs/diff.rs">diff.rs</a> - Web
|
||
application to render a diff between Rust crate versions. Implemented in
|
||
Yew, runs fully in the browser as WebAssembly, <a
|
||
href="https://diff.rs">Live Demo</a>.</li>
|
||
<li><a
|
||
href="https://github.com/Konnektoren/konnektoren-web-game">konnektoren.help</a>
|
||
- An interactive web application for learning German grammar, featuring
|
||
gamified challenges and a map-based interface. <a
|
||
href="https://konnektoren.help">Web App</a></li>
|
||
<li><a href="https://prideout.net/layout-viewer">layout-viewer</a> -
|
||
Examine layouts of integrated circuits with zoom and pan controls.</li>
|
||
</ul>
|
||
<h2 id="templates">Templates</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/jetli/create-yew-app">Create Yew App</a>
|
||
- Set up a modern Yew web app by running one command,
|
||
<code>npx create-yew-app my-app</code>.</li>
|
||
<li><a
|
||
href="https://github.com/yewstack/yew-wasm-pack-template">yew-wasm-pack-template</a>
|
||
- A template for starting a Yew project to be used with wasm-pack.</li>
|
||
<li><a
|
||
href="https://github.com/yewstack/yew-wasm-pack-minimal">yew-wasm-pack-minimal</a>
|
||
- A minimal template for starting a Yew project using wasm-bindgen and
|
||
wasm-pack.</li>
|
||
<li><a
|
||
href="https://github.com/spielrs/yew-parcel-template">yew-parcel-template</a>
|
||
- Awesome Yew with Yew-Router and Parcel application.</li>
|
||
<li><a
|
||
href="https://github.com/Ja-sonYun/yew-template-for-github-io">yew-template-for-github-io</a>
|
||
- Directly deployable Template of yew project for github.io, using
|
||
tailwind and webpack for css, trunk for build and serve.</li>
|
||
<li><a
|
||
href="https://github.com/vvcaw/tailwindcss-yew-template">tailwindcss-yew-template</a>
|
||
- Simple layout for using Tailwindcss with Yew.</li>
|
||
<li><a href="https://github.com/rksm/axum-yew-setup">axum-yew-setup</a>
|
||
- A starter project that sets up Axum and Yew for full stack Rust web
|
||
apps.</li>
|
||
<li><a
|
||
href="https://github.com/jetli/rust-yew-axum-tauri-desktop">rust-yew-axum-tauri-desktop</a>
|
||
- Rust + Yew + Axum + Tauri, full-stack Rust development for Desktop
|
||
apps.</li>
|
||
<li><a href="https://github.com/fkohlgrueber/yew-pwa-minimal">Yew PWA
|
||
Minimal</a> - A minimal Progressive Web App using Yew.</li>
|
||
<li><a href="https://github.com/LeTurt333/yew_http_starter">Yew HTTP
|
||
Starter</a> - Yew template with a simple HTTP message & useful
|
||
helper comments.</li>
|
||
<li><a href="https://github.com/averichev/yew-starter-template">Yew
|
||
minimlistic template</a> - A minimalistic template for quickly starting
|
||
a project on yew.</li>
|
||
</ul>
|
||
<h2 id="crates">Crates</h2>
|
||
<h3 id="component-libraries">Component Libraries</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/dungeonfog/yew-mdc">yew-mdc</a> -
|
||
Material Design Components for the Yew framework.</li>
|
||
<li><a href="https://github.com/AlephAlpha/muicss-yew">muicss-yew</a> -
|
||
MUI-CSS Components for Yew framework.</li>
|
||
<li><a href="https://github.com/kellpossible/yew-bulma">yew-bulma</a> -
|
||
A Rust library providing components based on the bulma css library for
|
||
projects using Yew.</li>
|
||
<li><a href="https://github.com/hamza1311/material-yew">material-yew</a>
|
||
- Yew wrapper for Material Web Components.</li>
|
||
<li><a href="https://github.com/yewprint/yewprint">Yewprint</a> - Port
|
||
of blueprintjs.com to Yew.</li>
|
||
<li><a href="https://github.com/thedodd/ybc">ybc</a> - A Yew component
|
||
library based on the Bulma CSS framework.</li>
|
||
<li><a href="https://github.com/ctron/patternfly-yew">patternfly-yew</a>
|
||
- Patternfly components for Yew.</li>
|
||
<li><a href="https://github.com/pedrodesu/yew-feather">yew-feather</a> -
|
||
Feather Icons components for Yew.</li>
|
||
<li><a
|
||
href="https://github.com/matiu2/tailwind-yew-builder">tailwind-yew-builder</a>
|
||
- Builds Tailwind CSS for Yew using docker-compose. Also supports
|
||
Trunk.</li>
|
||
<li><a
|
||
href="https://github.com/angular-rust/yew-components">yew-components</a>
|
||
- Material Design Components for the Yew framework.</li>
|
||
<li><a href="https://github.com/titanclass/yew-chart">yew-chart</a> - A
|
||
Yew-based charting library that provides SVG based components for
|
||
rendering charts.</li>
|
||
<li><a href="https://github.com/fuzzycloud/tailyew">tailyew</a> - Yew
|
||
wrapper around DaisyUI (tailwindcss based) components.</li>
|
||
<li><a
|
||
href="https://github.com/gsmlg-dev/yew-duskmoon-ui">yew-duskmoon-ui</a>
|
||
- Duskmoon UI Component Library. This package use <code>stylist</code>
|
||
to embbed css in components, so no extra CSS file is needed. <a
|
||
href="https://gsmlg-dev.github.io/yew-duskmoon-ui/">Live Demo</a>.</li>
|
||
<li><a
|
||
href="https://github.com/isosphere/yew-bootstrap">yew-bootstrap</a> - A
|
||
Yew wrapper for the Bootstrap 5 component library.</li>
|
||
<li><a href="https://github.com/RustVis/zu">Zu</a> - Yew web components,
|
||
implementing Material Design.</li>
|
||
<li><a
|
||
href="https://github.com/RAprogramm/yew-nav-link">yew-nav-link</a> - A
|
||
navigational link that is aware of its active state based on the current
|
||
route in the application.</li>
|
||
<li><a href="https://lucide.rustforweb.org">Rust Lucide</a> - Yew port
|
||
of Lucide, a beautiful & consistent icon toolkit made by the
|
||
community.</li>
|
||
<li><a href="https://radix.rustforweb.org">Rust Radix</a> - Yew port of
|
||
Radix, a library of components, icons, colors, and templates for
|
||
building high-quality, accessible UI.</li>
|
||
<li><a href="https://shadcn-ui.rustforweb.org">Rust shadcn/ui</a> - Yew
|
||
port of shadcn/ui, a library of beautifully designed components that you
|
||
can copy and paste into your apps.</li>
|
||
</ul>
|
||
<h3 id="components">Components</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/jfbilodeau/yew_form">Yew Form</a> -
|
||
Components to simplify handling forms with Yew.</li>
|
||
<li><a
|
||
href="https://github.com/AircastDev/yew-component-size">yew-component-size</a>
|
||
- A Yew component that emits events when the parent component changes
|
||
width/height.</li>
|
||
<li><a
|
||
href="https://github.com/AircastDev/yew-virtual-scroller">yew-virtual-scroller</a>
|
||
- A Yew component for virtual scrolling / scroll windowing.</li>
|
||
<li><a href="https://github.com/ctron/yew-oauth2/">yew-oauth2</a> - A
|
||
plain Yew OAuth2/OpenIDConnect component, not tied to any CSS
|
||
framework.</li>
|
||
<li><a
|
||
href="https://github.com/MatchaChoco010/yew-scroll-area">yew-scroll-area</a>
|
||
- Custom scroll area for Yew.</li>
|
||
</ul>
|
||
<h3 id="hooks">Hooks</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/jetli/yew-hooks">yew-hooks</a> - Custom
|
||
Hooks library for Yew, inspired by <a
|
||
href="https://github.com/streamich/react-use">streamich/react-use</a>
|
||
and <a href="https://github.com/alibaba/hooks">alibaba/hooks</a>.</li>
|
||
<li><a
|
||
href="https://github.com/futursolo/yew-side-effect">yew-side-effect</a>
|
||
- Reconcile Side Effects in Yew Applications, inspired by <a
|
||
href="https://github.com/gaearon/react-side-effect">react-side-effect</a>
|
||
and <a href="https://github.com/nfl/react-helmet">react-helmet</a>.</li>
|
||
<li><a href="https://github.com/bounce-rs/bounce">Bounce</a> - The
|
||
uncomplicated state management library for Yew, inspired by <a
|
||
href="https://github.com/reduxjs/redux">Redux</a> and <a
|
||
href="https://github.com/facebookexperimental/Recoil">Recoil</a>.</li>
|
||
<li><a href="https://github.com/yewv/yewv">yewv</a> - A lightning fast
|
||
state management module for Yew built with performance and simplicity as
|
||
a first priority.</li>
|
||
</ul>
|
||
<h3 id="javascript-library-ports">Javascript Library Ports</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/igiagkiozis/plotly">Plotly.rs</a> - Rust
|
||
bindings for the popular <a
|
||
href="https://plotly.com/javascript/">Plotly</a> charting library.</li>
|
||
<li><a href="https://github.com/mfreeborn/ag-grid-rs">ag-grid-rs</a> -
|
||
Rust bindings for the <a
|
||
href="https://www.ag-grid.com/javascript-data-grid/">AG Grid</a>
|
||
datatable library.</li>
|
||
<li><a href="https://github.com/ctron/popper-rs/">popper-rs</a> - <a
|
||
href="https://popper.js.org/">Popper JS</a> bindings for Rust.</li>
|
||
</ul>
|
||
<h3 id="utils">Utils</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/intendednull/yewdux">Yewdux</a> -
|
||
Redux-like state containers for Yew apps.</li>
|
||
<li><a href="https://github.com/hobofan/reacty_yew">reacty_yew</a> -
|
||
Generate Yew components from React components via Typescript type
|
||
definitions.</li>
|
||
<li><a href="https://github.com/IcyDefiance/styled-yew">styled-yew</a> -
|
||
CSS in Rust, similar to styled-components, but for Yew.</li>
|
||
<li><a href="https://github.com/futursolo/stylist-rs">stylist-rs</a> - A
|
||
CSS-in-Rust styling solution for WebAssembly Applications.</li>
|
||
<li><a href="https://github.com/Madoshakalaka/yew-interop">Yew
|
||
Interop</a> - Load JavaScript and CSS asynchronously in Yew.</li>
|
||
<li><a href="https://github.com/oovm/tailwind-rs">Tailwind RS</a> -
|
||
Tailwind style tracer in rust, JIT + AOT interpreter.</li>
|
||
<li><a
|
||
href="https://github.com/MatchaChoco010/yew-style-in-rs">yew-style-in-rs</a>
|
||
- Scoped CSS in Rust for Yew.</li>
|
||
<li><a href="https://github.com/finnbear/yew_icons">yew_icons</a> -
|
||
Easily include a variety of svg icons(Feather/Font Awesome/Octicons)
|
||
into your Yew app.</li>
|
||
<li><a href="https://github.com/INSAgenda/yew-template">Yew-Template</a>
|
||
- A crate for separating HTML and Rust code when using Yew.</li>
|
||
<li><a
|
||
href="https://github.com/ctron/yew-nested-router">yew-nested-router</a>
|
||
- A router that supported nesting, with Yew 0.20.</li>
|
||
<li><a href="https://github.com/myFavShrimp/turf">turf</a> - Macro based
|
||
compile-time SCSS transpilation, CSS minification, and class name
|
||
uniquification toolchain inspired by CSS modules.</li>
|
||
<li><a
|
||
href="https://github.com/ctron/browser-panic-hook">browser-panic-hook</a>
|
||
- A panic handler for browser environments, allowing to fail in an
|
||
end-user friendly way.</li>
|
||
<li><a href="https://floating-ui.rustforweb.org/">Rust Floating UI</a> -
|
||
Floating UI is a library that helps you create “floating” elements such
|
||
as tooltips, popovers, dropdowns, and more.</li>
|
||
</ul>
|
||
<h3 id="wasm">Wasm</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/rustwasm/wasm-bindgen">wasm-bindgen</a>
|
||
- Facilitating high-level interactions between WebAssembly modules and
|
||
JavaScript.</li>
|
||
<li><a href="https://github.com/koute/stdweb">stdweb</a> - Provides Rust
|
||
bindings to the Web APIs and to allow a high degree of interoperability
|
||
between Rust and JavaScript.</li>
|
||
<li><a
|
||
href="https://github.com/JonasKruckenberg/tauri-sys">tauri-sys</a> - Raw
|
||
bindings to the Tauri API for projects using wasm-bindgen.</li>
|
||
</ul>
|
||
<h3 id="frameworks">Frameworks</h3>
|
||
<ul>
|
||
<li><a href="https://github.com/futursolo/stackable">stackable</a> - A
|
||
framework experience for Yew.</li>
|
||
</ul>
|
||
<h2 id="tooling">Tooling</h2>
|
||
<ul>
|
||
<li><a href="https://github.com/rustwasm/wasm-pack">wasm-pack</a> - Your
|
||
favorite Rust -> WebAssembly workflow tool.</li>
|
||
<li><a
|
||
href="https://github.com/jetli/wasm-pack-action">wasm-pack-action</a> -
|
||
Github action to install <code>wasm-pack</code> by downloading the
|
||
executable to speed up CI/CD.</li>
|
||
<li><a
|
||
href="https://github.com/jetli/wasm-bindgen-action">wasm-bindgen-action</a>
|
||
- Github action to install <code>wasm-bindgen</code> by downloading the
|
||
executable to speed up CI/CD.</li>
|
||
<li><a href="https://github.com/koute/cargo-web">cargo-web</a> - A Cargo
|
||
subcommand for the client-side Web.</li>
|
||
<li><a href="https://github.com/thedodd/trunk">Trunk</a> - Build, bundle
|
||
& ship your Rust Wasm application to the web.</li>
|
||
<li><a href="https://github.com/jetli/trunk-action">trunk-action</a> -
|
||
Github action to install <code>Trunk</code> by downloading the
|
||
executable to speed up CI/CD.</li>
|
||
<li><a href="https://github.com/WebAssembly/wabt">wabt</a> - The
|
||
WebAssembly Binary Toolkit, for the <code>wasm-strip</code> and
|
||
<code>wasm-objdump</code> tools to reduce .wasm file size.</li>
|
||
<li><a href="https://github.com/WebAssembly/binaryen">binaryen</a> -
|
||
Compiler infrastructure and toolchain library for WebAssembly, for the
|
||
<code>wasm-opt</code> tool to reduce .wasm file size.</li>
|
||
<li><a href="https://github.com/tauri-apps/tauri">Tauri</a> - 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.</li>
|
||
<li><a href="https://github.com/schvv31n/yew-fmt">yew-fmt</a> - A
|
||
configurable extension to <code>rustfmt</code> for formatting Yew
|
||
HTML.</li>
|
||
</ul>
|
||
<h2 id="articles">Articles</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://dev.to/deciduously/lets-build-a-rust-frontend-with-yew---part-1-3k2o">Let’s
|
||
Build a Rust Frontend with Yew</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20Rust%20Yew.md">How
|
||
to use Rust Yew</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20a%20modal%20in%20Rust.md">How
|
||
to use a modal in Rust</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20routers%20in%20Rust%20Frontend.md">How
|
||
to use routers in Rust Frontend</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20modulize%20your%20Rust%20Frontend.md">How
|
||
to modulize your Rust Frontend</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20use%20NPM%20packages%20with%20Rust%20Frontend.md">How
|
||
to use NPM packages with Rust Frontend</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/blob/master/posts/Rust/How%20to%20use%20markdown%20with%20code%20snippets%20in%20Rust%20Frontend.md">How
|
||
to use markdown with Rust Frontend</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/Fullstack%20Rust%20with%20Yew.md">Fullstack
|
||
Rust with Yew</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20write%20Full%20Stack%20Rust%20code.md">How
|
||
to write Full Stack Rust code</a></li>
|
||
<li><a
|
||
href="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 a YouTube vlog with Rust Yew fetch API</a></li>
|
||
<li><a
|
||
href="https://github.com/steadylearner/blog/tree/master/posts/Rust/How%20to%20render%20blog%20posts%20with%20Rust%20Yew%20mounted%20API.md">How
|
||
to render blog posts with Rust Yew mounted API</a></li>
|
||
<li><a
|
||
href="https://medium.com/@saschagrunert/a-web-application-completely-in-rust-6f6bdb6c4471">A
|
||
Web Application completely in Rust</a></li>
|
||
<li><a
|
||
href="https://sudonull.com/post/11627-Yew-Rust-WebAsse-frontend-framework">Yew
|
||
- Rust & WebAsse-frontend framework</a></li>
|
||
<li><a
|
||
href="https://dev.to/stevepryde/create-a-desktop-app-in-rust-using-tauri-and-yew-2bhe">Create
|
||
a desktop app in Rust using Tauri and Yew</a></li>
|
||
<li><a href="https://www.youtube.com/watch?v=ilrGIJGdqRo">A code
|
||
walkthrough video of Yew with a real-world app with Christopher Hunt and
|
||
Kiki Carter</a></li>
|
||
<li><a href="https://mikekrisher.com/writings/yew_and_tailwind">Adding
|
||
Tailwind to Yew</a></li>
|
||
</ul>
|
||
<h2 id="courses">Courses</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/brooks-builds/full-stack-todo-rust-course">full-stack-todo-rust-course</a>
|
||
- Full stack rust course including course for Yew.</li>
|
||
</ul>
|
||
<h2 id="books">Books</h2>
|
||
<ul>
|
||
<li><a href="https://rustwasm.github.io/docs/book/">The WebAssembly
|
||
Book</a> - Working with the web and producing .wasm files.</li>
|
||
<li><a href="https://rustwasm.github.io/docs/wasm-bindgen/">The
|
||
wasm-bindgen Guide</a> - How to bind Rust and JavaScript APIs.</li>
|
||
<li><a href="https://rustwasm.github.io/docs/wasm-pack/">The wasm-pack
|
||
Guide</a> - How to build and work with rust-generated WebAssembly.</li>
|
||
<li><a
|
||
href="https://pragprog.com/book/khrust/programming-webassembly-with-rust">Programming
|
||
WebAssembly with Rust</a> - Includes a chapter
|
||
<code>Advanced JavaScript Integration with Yew</code> on creating an app
|
||
with Yew.</li>
|
||
<li><a
|
||
href="https://www.oreilly.com/library/view/creative-projects-for/9781789346220/">Creative
|
||
Projects for Rust Programmers</a> - Chapter 5,
|
||
<code>Creating a Client-Side WebAssembly App Using Yew</code>.</li>
|
||
</ul>
|
||
<h2 id="alternatives">Alternatives</h2>
|
||
<p>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.</p>
|
||
<ul>
|
||
<li><a href="https://github.com/utkarshkukreti/draco">Draco</a> - A Rust
|
||
library for building client side web applications with WebAssembly.</li>
|
||
<li><a href="https://github.com/chinedufn/percy">Percy</a> - A modular
|
||
toolkit for building isomorphic web apps with Rust + WebAssembly.</li>
|
||
<li><a href="https://github.com/ivanceras/sauron">Sauron</a> - Sauron is
|
||
an HTML web framework for building web-apps.</li>
|
||
<li><a href="https://github.com/seed-rs/seed">Seed</a> - A Rust
|
||
framework for creating web apps.</li>
|
||
<li><a href="https://github.com/rbalicki2/smithy">Smithy</a> - A
|
||
framework for building WebAssembly apps in Rust.</li>
|
||
<li><a href="https://github.com/DioxusLabs/dioxus">Dioxus</a> - Elegant
|
||
React-like library for building user interfaces for desktop, web,
|
||
mobile, SSR, liveview, and more.</li>
|
||
<li><a href="https://github.com/sycamore-rs/sycamore">Sycamore</a> - A
|
||
reactive library for creating web apps in Rust and WebAssembly.</li>
|
||
<li><a href="https://github.com/leptos-rs/leptos">Leptos</a> - Build
|
||
fast web applications with Rust.</li>
|
||
</ul>
|
||
<h2 id="related-lists">Related lists</h2>
|
||
<ul>
|
||
<li><a
|
||
href="https://github.com/rustwasm/awesome-rust-and-webassembly">Awesome
|
||
Rust and WebAssembly</a> - A list of awesome Rust and WebAssembly
|
||
projects, libraries, tools, and resources.</li>
|
||
<li><a href="https://github.com/mbasso/awesome-wasm">Awesome
|
||
WebAssembly</a> - Collection of awesome things regarding WebAssembly
|
||
ecosystem.</li>
|
||
<li><a href="https://github.com/rust-unofficial/awesome-rust">Awesome
|
||
Rust</a> - A curated list of Rust code and resources.</li>
|
||
</ul>
|
||
<p><a href="https://github.com/jetli/awesome-yew">yew.md Github</a></p>
|