ui.iframe

Iframe

Embed a map, a preview or a third-party page — with a required title, a reserved ratio and a safe sandbox by default.

A map on the contact page

title= is required: it is what a screen reader announces for the frame.

Visit us

12 rue du Louvre, 75001 ParisMonday to Friday, 9:00 – 18:00

def office_map() -> None:
    with ui.grid(cols={"base": 1, "md": 3}, gap="lg", classes="w-full"):
        with ui.vstack(gap="xs"):
            ui.heading("Visit us", level=3, size="lg")
            ui.text("12 rue du Louvre, 75001 Paris", size="sm")
            ui.text("Monday to Friday, 9:00 – 18:00", size="sm", color="muted")
        ui.iframe(MAP, title="Map of the Paris office", ratio="video",
                  classes="md:col-span-2")

An email preview, fully locked

sandbox="" refuses everything — scripts, forms, popups. The right setting for HTML you did not write.

Template: invoice-ready

Sandboxed

def email_preview() -> None:
    with ui.card(padding="md", classes="w-full max-w-2xl"), ui.vstack(gap="sm"):
        with ui.hstack(justify="between"):
            ui.text("Template: invoice-ready", weight="medium")
            ui.badge("Sandboxed", icon_left="shield-check", color="success",
                     variant="soft", size="sm")
        ui.iframe(title="Email preview", ratio="wide", sandbox="",
                  attrs={"srcdoc": EMAIL})

A mobile preview

The default sandbox allows scripts, forms and popups; the portrait ratio frames it like a phone.

Mobile preview

See the landing page exactly as a phone renders it, before you publish.

def mobile_preview() -> None:
    with ui.hstack(gap="lg", align="center", wrap=True, justify="center"):
        with ui.vstack(gap="xs", classes="max-w-xs"):
            ui.heading("Mobile preview", level=3, size="lg")
            ui.text("See the landing page exactly as a phone renders it, "
                    "before you publish.", color="muted", size="sm")
        with ui.vstack(classes="w-72 shrink-0"), ui.card(padding="xs"):
            ui.iframe(title="Landing page on a phone", ratio="portrait",
                      attrs={"srcdoc": LANDING})