Portals

Portals render children into a remote DOM target — ideal for modals, toasts, and tooltips.

Portal target

Add a target element in your layout shell:

view! {
    <>
        <main><Slot /></main>
        <div id="modal-root" data-r-portal-target="modal"></div>
    </>
}

Portal content

#[component]
fn Modal(open: bool, children: Vec<Child>) -> View {
    if !open {
        return view! { <></> };
    }
    portal("modal", children)
}

view! {
    <Modal open={show_modal.get()}>
        <div class="modal-backdrop">
            <div class="modal">"Dialog content"</div>
        </div>
    </Modal>
}

data-r-portal

SSR emits a <template data-r-portal=\"modal\">. After resume, the runtime moves children into the matching data-r-portal-target element.