# Dioxus Fullstack

> Comprehensive Dioxus 0.7 framework expertise for building modern fullstack applications with Rust. Use when working with Dioxus for web, desktop, or mobile app development, setting up projects, implementing state management, routing, data fetching, CSS-in-Rust styling, or integrating with backend APIs and databases.

- **Type:** Skill
- **Install:** `agentstack add skill-qretaio-skills-dioxus-fullstack`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [qretaio](https://agentstack.voostack.com/s/qretaio)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [qretaio](https://github.com/qretaio)
- **Source:** https://github.com/qretaio/skills/tree/main/skills/dioxus-fullstack
- **Website:** https://qreta.io/

## Install

```sh
agentstack add skill-qretaio-skills-dioxus-fullstack
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Dioxus 0.7 Fullstack Development

Comprehensive Dioxus 0.7 framework expertise for building modern fullstack applications with Rust. Covers desktop, web, and mobile app development with seamless Rust integration.

## Core Dioxus 0.7 Concepts

### Essential References

- **Official Docs**: https://dioxuslabs.com/docs/0.7/dioxus/
- **Fullstack Guide**: https://dioxuslabs.com/docs/0.7/fullstack/
- **CLI Reference**: https://dioxuslabs.com/docs/0.7/cli/
- **Awesome Dioxus**: https://dioxuslabs.com/awesome/

### Project Structure

```
src/
├── main.rs           # Main application entry
├── app.rs            # Root app component
├── components/       # Reusable UI components
├── pages/            # Route/page components
├── hooks/            # Custom hooks
├── server/           # Server-only code (fullstack)
├── assets/           # Static assets
└── routes/           # Route definitions (new in 0.7)
```

### Key Dependencies (Dioxus 0.7)

```bash
# Use dx add to install dependencies:
dx add dioxus --features fullstack
dx add dioxus-router
dx add dioxus-desktop
dx add dioxus-mobile
dx add serde --features derive
dx add reqwest
dx add tokio --features full
dx add sqlx --features "runtime-tokio-rustls,postgres"
dx add dioxus-logger  # New logging system
```

## Development Patterns

### Component Architecture

- Use functional components with hooks (`use_signal`, `use_effect`)
- Implement proper prop typing with Rust structs
- Leverage `children` for composition
- Use `cx.render` for conditional rendering
- New: `fn Component(cx: Scope) -> Element` syntax

### State Management (0.7 Updates)

- Local state: `use_signal` hook (preferred over `use_state`)
- Global state: Copy/Clone signals or context providers
- Server state: Use server functions with new `#[server]` macro
- Signals are now Copy and Clone by default

### Routing (0.7 Rewrite)

```rust
use dioxus_router::prelude::*;

#[derive(Clone, Routable, Debug, PartialEq)]
enum Route {
    #[route("/")]
    Home {},
    #[route("/blog/:id")]
    BlogPost { id: u32 },
    #[route("/about")]
    About {},
    #[nest("/admin")]
        #[route("/dashboard")]
        AdminDashboard {},
    #[end_nest]
    #[route("/:..route")]
    NotFound { route: Vec },
}

fn App(cx: Scope) -> Element {
    render! {
        Router:: {}
    }
}
```

### Data Fetching (0.7 Server Functions)

```rust
use dioxus::prelude::*;

#[server]
async fn get_user(id: u32) -> Result {
    // Database logic here
    let user = sqlx::query_as::("SELECT * FROM users WHERE id = $1")
        .bind(id)
        .fetch_one(&db)
        .await?;
    Ok(user)
}

// Client usage
fn UserComponent(cx: Scope, id: u32) -> Element {
    let user = use_resource(cx, || async move { get_user(id).await });

    render! {
        div {
            match &*user.read() {
                Some(Ok(user)) => rsx! { "Hello, {user.name}" },
                Some(Err(e)) => rsx! { "Error: {e}" },
                None => rsx! { "Loading..." },
            }
        }
    }
}
```

### Styling (0.7 Enhancements)

- CSS-in-Rust with `dioxus-css` or `dioxus-free-components`
- Tailwind CSS integration with `dioxus-tailwind`
- Scoped CSS with CSS modules support
- New CSS hot-reloading in development
- Inline styles for dynamic styling

## Best Practices

### Performance (0.7 Features)

- Use `use_memo` for expensive computations
- Implement proper key props for lists
- Lazy load routes and components with new suspense boundaries
- Optimize re-renders with signal dependency tracking
- Use `use_callback` for stable event handlers

### Error Handling

- Use `Result` types throughout
- Implement proper error boundaries with `ErrorBoundary`
- Server function error propagation
- Graceful fallbacks for network failures
- New: Global error handling with `use_error_boundary`

### Testing

- Component unit tests with `dioxus-testing`
- Integration tests for fullstack
- E2E testing with Playwright or similar
- Server function testing
- New: Headless rendering for tests

### Security

- Input validation and sanitization
- CSRF protection for server functions
- Proper authentication/authorization
- Environment variable management
- New: Built-in XSS protection

## Tooling & Workflow

### Development Commands (Dioxus CLI 0.7)

```bash
# New project with templates
dx create my-app --template fullstack
dx create my-app --template desktop
dx create my-app --template mobile

# Development server with hot reload
dx serve

# Add dependencies (preferred over manual Cargo.toml editing)
dx add dioxus-logger
dx add sqlx --features postgres
dx add reqwest --features json

# Build for production
dx build --platform web
dx build --platform desktop
dx build --platform mobile

# Generate deployment bundle
dx build --release

# Run tests
dx test

# Check project status
dx check
```

### IDE Setup

- Use rust-analyzer with Dioxus support
- Configure tailwind CSS class completion
- Set up proper TOML language server
- Use Dioxus VS Code extension
- New: Integrated debugging support

### Common Integrations (0.7 Ready)

- **Database**: SQLx for async DB operations with connection pooling
- **HTTP**: reqwest for client requests
- **Authentication**: Auth0 integration via server functions
- **File Uploads**: Multipart form handling with streaming
- **WebSockets**: Real-time communication with built-in support
- **PWA**: Progressive Web App capabilities

## Common Patterns

### Form Handling (0.7 Signals)

```rust
#[component]
fn LoginForm(cx: Scope) -> Element {
    let mut email = use_signal(cx, || "".to_string());
    let mut password = use_signal(cx, || "".to_string());
    let mut errors = use_signal(cx, Vec::::new);

    let on_submit = move |_| {
        // Validation and submission logic
        if email.read().is_empty() {
            errors.write().push("Email is required".to_string());
        }
    };

    render! {
        form { onsubmit: on_submit,
            input {
                type: "email",
                value: "{email}",
                oninput: move |e| email.set(e.value())
            }
            input {
                type: "password",
                value: "{password}",
                oninput: move |e| password.set(e.value())
            }
            for error in errors.read() {
                div { class: "error", "{error}" }
            }
            button { type: "submit", "Login" }
        }
    }
}
```

### API Integration (0.7 Server Functions)

```rust
#[server]
async fn create_post(title: String, content: String) -> Result {
    // Validate input
    if title.is_empty() {
        return Err(ServerFnError::ServerError("Title cannot be empty".to_string()));
    }

    // Database insertion
    let post = sqlx::query_as::(
        "INSERT INTO posts (title, content) VALUES ($1, $2) RETURNING *"
    )
    .bind(&title)
    .bind(&content)
    .fetch_one(&db)
    .await?;

    Ok(post)
}

// Usage in component
#[component]
fn PostForm(cx: Scope) -> Element {
    let mut title = use_signal(cx, || "".to_string());
    let mut content = use_signal(cx, || "".to_string());

    let create_post = use_server_future(cx, (title(), content()), |(title, content)| async move {
        create_post(title, content).await
    });

    render! {
        form {
            input {
                value: "{title}",
                oninput: move |e| title.set(e.value())
            }
            textarea {
                value: "{content}",
                oninput: move |e| content.set(e.value())
            }
            button { onclick: move |_| create_post.restart(), "Create Post" }

            match create_post.read() {
                Some(Ok(post)) => rsx! { div { "Created: {post.title}" } },
                Some(Err(e)) => rsx! { div { "Error: {e}" } },
                None => rsx! { div { "Creating..." } },
            }
        }
    }
}
```

### Custom Hooks (0.7 Patterns)

```rust
#[hook]
pub fn use_api(
    cx: Scope,
    endpoint: String
) -> UseResource> {
    use_resource(cx, || async move {
        reqwest::get(&endpoint).await?.json::().await
    })
}

#[hook]
pub fn use_debounce(cx: Scope, value: String, delay_ms: u64) -> Signal {
    let debounced = use_signal(cx, || value.clone());

    use_effect(cx, (value,), |(value,)| {
        spawn(async move {
            tokio::time::sleep(Duration::from_millis(delay_ms)).await;
            debounced.set(value.clone());
        });
        || ()
    });

    debounced
}
```

## Architecture Tips

1. **Separate Concerns**: Keep server and client logic distinct with clear boundaries
2. **Type Safety**: Leverage Rust's type system across the full stack
3. **Error Boundaries**: Implement graceful error handling at component level
4. **Code Splitting**: Use lazy loading and suspense boundaries for optimal bundle sizes
5. **Environment Management**: Proper dev/staging/prod configuration
6. **Signal Best Practices**: Use signals for derived state and computed values
7. **Server Function Design**: Keep server functions focused and testable
8. **Performance Monitoring**: Use built-in performance tracking and profiling tools

This skill provides the essential knowledge and patterns for building robust, performant fullstack applications with Dioxus 0.7 while maintaining Rust's safety and ergonomics throughout the entire development lifecycle.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [qretaio](https://github.com/qretaio)
- **Source:** [qretaio/skills](https://github.com/qretaio/skills)
- **License:** MIT
- **Homepage:** https://qreta.io/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** yes
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-qretaio-skills-dioxus-fullstack
- Seller: https://agentstack.voostack.com/s/qretaio
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.