dioxus/examples

Examples

Most of these examples are run through webview so you don't need the Dioxus CLI installed to preview the functionality.

These examples are fully-fledged micro apps. They can be ran with the cargo run --example XYZ

Example	What it does	Status
The basics	A few basic examples to preview Dioxus	🛠
fine grained reactivity	Escape diffing by writing values directly	🛠
Global State Management	Share state between components	🛠
Virtual Refs	Cross-platform imperative elements	🛠
Inline Styles	Define styles for elements inline	🛠
Conditional Rendering	Hide/Show elements using conditionals	✅

These examples are not necessarily meant to be run, but rather serve as a reference for the given functionality.

Example	What it does	Status
The basics	A few basic examples to preview Dioxus	🛠
fine grained reactivity	Escape diffing by writing values directly	🛠
Global State Management	Share state between components	🛠
Virtual Refs	Cross-platform imperative elements	🛠
Inline Styles	Define styles for elements inline	🛠
Conditional Rendering	Hide/Show elements using conditionals	✅
Maps/Iterators	Use iterators in the rsx! macro	✅
Render To string	Render a mounted virtualdom to a string	🛠
Component Children	Pass children into child components	🛠
Function Driven children	Pass functions to make VNodes	🛠
Memoization & Borrowed Data	Suppress renders, borrow from parents	✅
Fragments	Support root-less element groups	✅
Null/None Components	Return nothing!	🛠
Spread Pattern for props	Manually specify and override props	✅
Controlled Inputs	this does	🛠
Custom Elements	Define custom elements	🛠
Web Components	Custom elements to interface with WebComponents	🛠
Testing And debugging	this does	🛠
Asynchronous Data	Using suspense to wait for data	🛠
Fiber/Scheduled Rendering	this does	🛠
CSS Compiled Styles	this does	🛠
Anti-patterns	A collection of discouraged patterns	✅
Complete rsx reference	A complete reference for all rsx! usage	✅
Event Listeners	Attach closures to events on elements	✅

These web-specific examples must be run with dioxus-cli using dioxus develop --example XYZ

Example	What it does
asd	this does
asd	this does