Dioxus Documentation Site

Dioxus is a cross-platform framework for building applications using the Rust programming language. It allows you to maintain a single codebase to target web, desktop, and mobile platforms.

Key characteristics include:

• Declarative UI: Apps are declared using HTML and CSS.
• Reactivity: Uses a model inspired by web frameworks like React and SolidJS.
• Native Performance: Code runs natively without a virtual machine, allowing zero-overhead calls to system APIs.
• Fullstack Support: Includes built-in support for server functions and routing.

Dioxus Fullstack is a suite of utilities for building both the frontend and backend of an application entirely in Rust. It integrates deeply with the Axum framework to provide features like Server-Side Rendering (SSR), type-safe Server Functions, and asset management.

Note that Dioxus Fullstack does not include built-in utilities for Databases, Caches, Sessions, or Mailers; you should use third-party crates like sqlx or tower-sessions for these requirements.

Dioxus allows you to build user interfaces using a combination of HTML, CSS, and Rust.

Core Capabilities

• Web: UIs are native and accessible.
• Desktop & Mobile: Widgets are rendered either in a webview or natively using hybrid native components.

What Dioxus Provides

• Hot-reloading: Support for Rust code, UI, styles, and assets.
• Cross-platform renderers: Targets include web, desktop, and mobile.
• Reactivity system: For managing and updating application state.
• Cross-platform APIs: A growing SDK of APIs available across platforms.
• Fullstack capabilities: Backend integration for building fullstack web applications.
• Production tools: Tools for bundling and deploying applications.

Dioxus Fullstack provides a suite of utilities designed to build complete web applications with integrated server and client logic. It supports the following core capabilities:

• Rendering Strategies: Supports Incremental, Static, and Server-Side Rendering (SSR).
• Hydration: Provides mechanisms to hydrate your application on the client side, turning static HTML into an interactive application.
• Server-Client Communication: Facilitates seamless communication between the server and the client.

For concrete implementations and integration patterns with other frameworks or desktop renderers, refer to the official Dioxus examples directory.

The Dioxus 0.5 documentation provides a structured path for new users, starting from basic introduction and setup to advanced fullstack capabilities.

Key learning paths include:

• Introduction: Basic welcome and getting started guides.
• Guides: Conceptual overviews, component creation, state management, and data fetching.
• Reference: Deep dives into RSX, Components, Props, Hooks, Routing, and platform-specific APIs (Desktop, Mobile, Web, SSR, Liveview).
• Router: Specialized documentation for building complex navigation, nested routes, layouts, and programmatic navigation.
• Cookbook: Practical recipes for error handling, state management, testing, and integrations like Tailwind or Internationalization.

While Dioxus is primarily declarative via RSX, certain tasks require imperative or low-level access. Common escape hatches include:

• Custom Attributes: Using quoted names for non-standard attributes.
• dangerous_inner_html: Injecting raw HTML strings.
• Web Components: Using framework-agnostic custom elements.
• eval: Running arbitrary JavaScript.
• web-sys: Direct JS interop on the web.
• Direct DOM Access: Using onmounted, onresize, or onvisible events.
• Native Widgets: Accessing system-level UI (e.g., file dialogs) via FFI.
• Dioxus Native: A specialized renderer for high-performance GPU/WGPU integration.

The tutorial is structured into several key learning modules that cover the full lifecycle of a Dioxus application:

• Setup & Creation: Tooling Setup, Creating a new app.
• Frontend Fundamentals: How Components Work, Creating UI with RSX, Styling and Assets, Adding State.
• Data & Logic: Fetching Data, Adding a Backend, Integrating a Database, App Routing.
• Distribution & Launch: Bundling, Deployment, Next Steps.

Dioxus supports mobile app development by rendering via the platform's WebView or experimentally through WGPU (via Blitz).

Important Considerations:

• WebView Renderer: Does not support animations, transparency, or native widgets. It is best suited for CRUD-style applications where rapid development is prioritized over high-fidelity UI.
• Platform Support: Mobile is currently the least-supported renderer target. This guide focuses on iOS, but Android users can follow similar steps using the android guide in cargo-mobile.
• Hardware Note: macOS M1 support is currently limited and may require troubleshooting.

Dioxus provides several ways to manage state across your application:

• Hooks: The primary way to create and manage state within a component.
• Context: A pattern for sharing state from a parent component down to its descendants without manual prop drilling.
• Routing: Manages the application state as it relates to the URL.
• Resource (use_resource): Used to create async tasks and monitor their state (e.g., loading, error, or success).
• Coroutine (use_coroutine): Helps manage external state or long-running processes.
• Spawn: A utility to create and run an async task.