# yewstack/yew **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/yewstack-yew).** 32,421 stars · 1,453 forks · Rust · apache-2.0 ## Links - GitHub: https://github.com/yewstack/yew - Homepage: https://yew.rs - awesome-repositories: https://awesome-repositories.com/repository/yewstack-yew.md ## Topics `asmjs` `concurrency` `elm` `emscripten` `gui` `hacktoberfest` `jsx` `multithreading` `rust` `wasm` `web` `web-framework` `webworkers` ## Description Yew is a framework for building front-end web applications using Rust and WebAssembly. It provides a component-based architecture that allows developers to create modular, reusable user interface elements that manage their own state and logic. By compiling code into binary modules, the framework enables high-performance execution within modern browser environments. The framework distinguishes itself through a macro-based markup language that transforms declarative, HTML-like syntax into strongly-typed component structures during compilation. It features a robust server-side rendering engine that generates initial HTML to improve page load performance and search engine visibility. This is complemented by a hydration-capable runtime that synchronizes state and event listeners between server-generated markup and the client-side application, ensuring a transition to full interactivity without requiring a full page re-render. Yew supports complex interface development through virtual DOM reconciliation, which applies minimal updates to the browser document based on state changes. It also incorporates suspense-driven data fetching to manage asynchronous operations, ensuring that components only render once their required data is resolved. The framework includes tools for bundling web applications and configuring build environments to target WebAssembly platforms. ## Tags ### Web Development - [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures.md) — Creates modular and reusable interface elements that manage their own state and logic. - [Functional Components](https://awesome-repositories.com/f/web-development/functional-components.md) — Builds reusable user interface elements as functions that manage state and return visual structures. ([source](https://yew.rs/docs/next/concepts/function-components)) - [Hydration Frameworks](https://awesome-repositories.com/f/web-development/hydration-frameworks.md) — Attaches event listeners and reactive logic to pre-rendered server markup by matching the virtual tree against existing DOM nodes. - [WebAssembly Frameworks](https://awesome-repositories.com/f/web-development/webassembly-frameworks.md) — Building high-performance web applications by compiling code into binary format for execution within modern browser environments. - [WebAssembly Frontend Frameworks](https://awesome-repositories.com/f/web-development/webassembly-frontend-frameworks.md) — Compiles code into high-performance binary modules to execute complex user interfaces directly within the browser. - [HTML Hydration](https://awesome-repositories.com/f/web-development/html-hydration.md) — Connects server-generated HTML to the client application by reconciling the virtual DOM with existing markup. ([source](https://yew.rs/docs/next/advanced-topics/server-side-rendering)) - [Rendering Engines](https://awesome-repositories.com/f/web-development/rendering-engines.md) — Generates initial HTML on the server to improve page load performance and search engine visibility. - [Server-Side Rendering Engines](https://awesome-repositories.com/f/web-development/server-side-rendering-engines.md) — Generates static markup on the server to improve initial load performance before handing off control to the client-side runtime. - [Virtual DOM Reconciliation](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation.md) — Tracks UI state changes by comparing tree structures and applying minimal updates to the browser document. - [Client-Side Hydration](https://awesome-repositories.com/f/web-development/client-side-hydration.md) — Connects static server-generated HTML to an interactive application state for seamless functionality. - [Hydration Runtimes](https://awesome-repositories.com/f/web-development/hydration-runtimes.md) — A client-side execution layer that attaches interactivity to pre-rendered server markup by synchronizing state and event listeners after initial load. - [Markup Compilers](https://awesome-repositories.com/f/web-development/markup-compilers.md) — Transforms declarative HTML-like syntax into strongly-typed component structures during the compilation phase to ensure structural integrity. - [Server-Side Renderers](https://awesome-repositories.com/f/web-development/server-side-renderers.md) — Renders components into HTML strings by initializing a server-side renderer for initial page delivery. ([source](https://yew.rs/docs/next/advanced-topics/server-side-rendering)) - [Server-Side Rendering Utilities](https://awesome-repositories.com/f/web-development/server-side-rendering-utilities.md) — Generates initial HTML on the server to improve search engine visibility and provide faster content delivery. - [Declarative UI Layouts](https://awesome-repositories.com/f/web-development/declarative-ui-layouts.md) — Defines user interface layouts using a declarative syntax that supports standard HTML and SVG tags. ([source](https://yew.rs/docs/next/concepts/html)) - [SSR Data Fetching](https://awesome-repositories.com/f/web-development/ssr-data-fetching.md) — Manages data fetching during server-side rendering to ensure consistent state between server and client. ([source](https://yew.rs/docs/next/advanced-topics/server-side-rendering)) - [Suspense Mechanisms](https://awesome-repositories.com/f/web-development/suspense-mechanisms.md) — Pauses component rendering until asynchronous data dependencies are fully resolved. - [Conditional Rendering](https://awesome-repositories.com/f/web-development/conditional-rendering.md) — Renders components conditionally by embedding control flow expressions directly within the markup. ([source](https://yew.rs/docs/next/concepts/html)) - [State Serialization](https://awesome-repositories.com/f/web-development/state-serialization.md) — Serializes server-computed state to ensure components have necessary data available during the first render. ([source](https://yew.rs/docs/next/advanced-topics/server-side-rendering)) ### User Interface & Experience - [Declarative UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/declarative-ui-frameworks.md) — A UI paradigm where developers compose interfaces from reusable functional components and the framework reconciles state changes into rendered output. ### Programming Languages & Runtimes - [WebAssembly](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/webassembly.md) — Executes high-performance binary modules within the browser sandbox environment. ### Development Tools & Productivity - [Web Bundlers](https://awesome-repositories.com/f/development-tools-productivity/web-bundlers.md) — Bundles web applications by managing build processes and packaging assets for deployment. ([source](https://yew.rs/docs/getting-started/introduction))