Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/DioxusLabs/dioxus/llms.txt

Use this file to discover all available pages before exploring further.

Dioxus provides access to all standard HTML5 elements through the rsx! macro. Elements form the building blocks of your user interface.

​
Basic Elements

Elements are created using their tag name followed by braces containing attributes and children: 
use dioxus::prelude::*;

fn app() -> Element {
    rsx! {
        div {
            h1 { "Hello, Dioxus!" }
            p { "This is a paragraph." }
        }
    }
}

​
Element Structure

Elements in RSX follow this structure: 
element_name {
    // Attributes come first
    class: "my-class",
    id: "my-id",
    
    // Then children elements
    child_element {}
    "text content"
}

​
Common HTML Elements

​
Content Sectioning

rsx! {
    header { "Page header" }
    nav { "Navigation" }
    main {
        article { "Main content" }
        aside { "Sidebar" }
    }
    footer { "Page footer" }
}

​
Text Content

rsx! {
    // Headings
    h1 { "Heading 1" }
    h2 { "Heading 2" }
    h3 { "Heading 3" }
    
    // Paragraphs and text formatting
    p { "A paragraph of text" }
    div {
        b { "Bold text" }
        i { "Italic text" }
        strong { "Important text" }
        em { "Emphasized text" }
    }
    
    // Lists
    ul {
        li { "List item 1" }
        li { "List item 2" }
    }
    
    ol {
        li { "First" }
        li { "Second" }
    }
}

​
Forms and Input

rsx! {
    form {
        label { "Name:" }
        input { r#type: "text", placeholder: "Enter your name" }
        
        label { "Email:" }
        input { r#type: "email", placeholder: "you@example.com" }
        
        button { r#type: "submit", "Submit" }
    }
}

​
Media Elements

rsx! {
    // Images
    img { src: "/path/to/image.png", alt: "Description" }
    
    // Video
    video {
        src: "/path/to/video.mp4",
        controls: true,
    }
    
    // Audio
    audio {
        src: "/path/to/audio.mp3",
        controls: true,
    }
}

​
Element Attributes

Attributes are specified with a colon syntax: 
rsx! {
    div {
        // String attributes
        class: "container",
        id: "main",
        
        // Boolean attributes
        disabled: true,
        hidden: false,
        
        // Numeric attributes
        width: 100,
        height: 50,
    }
}

​
Attribute Shorthand

If you have a variable with the same name as the attribute, you can use shorthand: 
let disabled = true;
let class = "btn btn-primary";

rsx! {
    button {
        disabled,    // Same as disabled: disabled
        class,       // Same as class: class
        "Click me"
    }
}

​
Custom Attributes

For custom or data attributes, use string literals: 
rsx! {
    div {
        "data-id": "123",
        "data-name": "example",
        "aria-label": "Description",
    }
}

​
SVG Elements

SVG elements are supported with proper namespacing: 
rsx! {
    svg {
        view_box: "-1000 -1000 2000 2000",
        width: "400",
        height: "400",
        
        rect {
            x: -1000,
            y: -1000,
            width: 2000,
            height: 2000,
            fill: "#aaa",
        }
        
        circle {
            cx: 0,
            cy: 0,
            r: 200,
            fill: "#333",
        }
    }
}
SVG elements automatically use the correct namespace (http://www.w3.org/2000/svg). You don’t need to specify it manually.

​
Special Elements

​
Fragment

Use Fragment to group elements without a wrapper: 
rsx! {
    Fragment {
        div { "First" }
        div { "Second" }
    }
}

​
Dangerous Inner HTML

For inserting raw HTML (use with caution): 
rsx! {
    div {
        dangerous_inner_html: "<p>Raw HTML content</p>"
    }
}
Be extremely careful with dangerous_inner_html as it can expose your app to XSS attacks. Only use it with trusted content.

​
Element Reference

Dioxus supports all standard HTML5 elements. For a complete list, see the HTML element reference on MDN. Common categories include:
  • Document metadata: head, title, meta, link, style
  • Content sectioning: header, nav, main, article, section, aside, footer
  • Text content: div, p, blockquote, ul, ol, li, dl, dt, dd
  • Inline text: a, span, strong, em, b, i, code, mark
  • Forms: form, input, button, label, select, option, textarea
  • Tables: table, thead, tbody, tr, th, td
  • Media: img, video, audio, canvas, svg

​
Next Steps

Styling

Learn how to style your elements

Events

Handle user interactions

Build docs developers (and LLMs) love

Get started for freeTalk to us