Dioxus Rust Framework

repository·main·Indexed 12 days ago

https://github.com/dioxuslabs/dioxus

A portable, high-performance Rust framework for building cross-platform user interfaces. Dioxus allows developers to use a single codebase to target Web (Wasm), Desktop (WebView/WGPU), Mobile (iOS/Android), and Server (SSR/Fullstack) platforms. Version 0.7.5 includes support for TailwindCSS and a dedicated CLI (dx) for project initialization, platform resolution, and deployment.

Tokens
156.4K
Snippets
445
Records
713
Agent score
98%

What's inside Dioxus

  1. Overview of dioxus-autofmt

    main

    dioxus-autofmt is a pretty printer designed specifically for the rsx syntax tree. It uses a manual set of formatting rules to produce formatted RSX output.

    Note on Stability: The output format is not guaranteed to be stable between minor versions of the crate, as formatting rules may be tweaked.

  2. Overview of Dioxus Liveview

    main

    Dioxus Liveview provides adapters for running the Dioxus VirtualDom over a WebSocket connection. This allows you to run your Dioxus application logic on a server while the UI is rendered in a client browser via WebSockets.

    Currently, the supported backend framework is:

    • Axum

    To integrate Dioxus Liveview into an existing backend framework, the library provides several primitives:

    • A ThreadPool for spawning the !Send VirtualDom and interacting with it from WebSockets.
    • An adapter for transforming various socket types into the LiveViewSocket type.
    • Glue code to load the interpreter into your application.
  3. What is dioxus-core?

    main

    dioxus-core provides a high-performance VirtualDom implementation for Rust. It serves as the engine that powers Dioxus renderers across various platforms including Web, Desktop, Mobile, SSR, TUI, and LiveView. By using dioxus-core, you gain access to the ecosystem of Dioxus components, hooks, and tooling.

    Key features include:

    • UI components defined as functions.
    • State management via hooks.
    • Deep integration with async Rust.
    • High performance and integrated hot-reloading support.
    • An extensible system for UI elements and attributes.
  4. Overview of the depinfo crate

    main
    The depinfo crate is a parser for the .d dependency-info files generated by rustc. It is designed to provide high-quality dependency analysis, which is a core component used by the Dioxus hot-reloading engine and other tools to understand project structures and dependencies accurately.
  5. Overview of dioxus-fullstack

    main

    The dioxus-fullstack package provides high-level abstractions for building fullstack applications with Dioxus. It serves two primary purposes:

    1. Wraps dioxus-server: It provides a simplified interface for managing the server-side component of a Dioxus application.
    2. Exposes an RPC system: It enables seamless communication between the client and the server via a Remote Procedure Call (RPC) system, allowing you to call server-side functions directly from your client-side code.
  6. Overview of Dioxus Hooks

    main

    The dioxus-hooks crate provides essential reactive primitives for Dioxus applications. Unlike React, these hooks are not foundational but are built on top of the primitive use_hook.

    Core hooks include:

    • use_signal: For managing local state.
    • use_effect: For side effects.
    • use_resource: For asynchronous state.
    • use_memo: For derived, memoized state.
    • use_coroutine: For managing long-running tasks or communication.

    You can extend these capabilities by creating custom hooks.

  7. Overview of the Dioxus CLI (dx)

    main
    The dx CLI is a comprehensive build tool for Dioxus applications. It manages the entire application lifecycle, including project scaffolding, development with hot-reloading, production builds, asset processing, and cross-platform bundling for web, desktop, and mobile.
  8. What is Dioxus Fullstack?

    main

    Dioxus Fullstack provides utilities for building truly fullstack applications using the Dioxus framework. It enables features like:

    • Server Functions: Call server-side code from the client as if it were a local function.
    • Axum Integration: Utilities for serving and rendering Dioxus applications using the Axum server framework.
    • Root Prop Passing: Passing initial props from the server to the client.
    • Hot Reloading: Support for instant RSX hot reloading via dioxus-hot-reload.
  9. Overview of rsx-rosetta

    main

    rsx-rosetta is a library designed to facilitate the transition from HTML to Dioxus's native RSX (Rust Syntax Extension) templating language. It provides a central Abstract Syntax Tree (AST) that can ingest various input formats and convert them into strings or other AST representations.

    Supported Inputs (Planned/Current):

    • HTML
    • Syn (Planned)
    • Akama (Planned)
    • Jinja (Planned)

    This tool is useful for developers migrating existing web codebases into Dioxus, as RSX is designed to be more concise than HTML and integrates more naturally with Rust's syntax (enabling better IDE support for folding, highlighting, and block selection within .rs files).

  10. Project structure of a bare-bones Dioxus template

    main

    A bare-bones Dioxus project uses a minimal organization pattern. The entry point for your application logic is src/main.rs, and any static assets required by your application should be placed in the assets/ directory. Dependencies and feature flags are managed via Cargo.toml.

    project/
    ├─ assets/ # Any assets that are used by the app should be placed here
    ├─ src/
    │  ├─ main.rs # main.rs is the entry point to your application
    ├─ Cargo.toml # Defines dependencies and feature flags
  11. Use Dioxus Desktop for webview-based desktop apps

    main

    The dioxus-desktop crate provides a webview-based desktop renderer for the Dioxus VirtualDom. It allows you to build desktop applications using HTML and CSS by leveraging wry and tao for the underlying webview and window management.

    Key Capabilities

    • One-line launch: Easily start a desktop application.
    • Native Threading: The Dioxus VirtualDom runs on a native thread.
    • Full Web Support: Provides full HTML/CSS support via the webview.
    • Direct Window Manipulation: Access window and Proxy types from tao for low-level control.
    • Integration Hooks: Use built-in hooks to access the window, the WebView, and execute JavaScript.

    Platform Requirements

    This renderer requires a webview to be installed on the target system:

    • macOS and iOS: WebView is installed by default.
    • Windows and Linux: WebView might not be preinstalled. You may need to follow specific setup instructions for these platforms to ensure the environment is ready.
  12. Understand the Dioxus Crate Ecosystem

    main

    Dioxus is organized into several specialized crates that handle different parts of the application lifecycle. Understanding this hierarchy helps you identify which dependency to use for specific tasks:

    • Core & State: dioxus-core (VirtualDOM/Runtime), dioxus-signals (Reactivity), dioxus-hooks (Standard hooks like use_signal), and dioxus-html (HTML elements).
    • Routing: dioxus-router for client-side navigation.
    • Renderers:
      • dioxus-web (WASM/Browser)
      • dioxus-desktop (WebView via wry/tao)
      • dioxus-native (GPU-accelerated via blitz/vello)
      • dioxus-liveview (WebSocket streaming)
      • dioxus-ssr (Server-side rendering)
    • Fullstack: dioxus-fullstack for client/server coordination and dioxus-server for Axum integration.
    • CLI: dioxus-cli is the main binary for building and running apps.
    • Assets: manganis provides the asset!() macro for compile-time asset processing.
    • Code Splitting: wasm-splitter and #[wasm_split] for managing WASM chunks.