Move Before

htmx will use the experimental moveBefore() API for moving elements, if it is present.

HOME | Explain | Code | Htmx Docs | Full screen
from fasthtml.common import fast_app, Div, Iframe, A, Figure, Label, Article


app, rt = fast_app()


@app.get
def page():
    return Div(
        Label("Feel free to change the page back and forth. The video will keep playing. Enjoy!"),
        Iframe(hx_preserve=True, id="rick-roll", **iframe_kv),
        Label("You are on page: /page1"),
        A("Go to page 2", hx_boost=True, hx_get=page2, hx_target="body"),
    )


@app.get
def page2():
    return Article(
        Label("Feel free to change the page back and forth. The video will keep playing. Enjoy!"),
        Figure(
            Iframe(hx_preserve=True, id="rick-roll", **iframe_kv),
        ),
        Label("You are on page: /page2"),
        A("Back to page 1", hx_boost=True, hx_get=page, hx_target="body"),
    )


iframe_kv = dict(
    src="https://www.youtube.com/embed/GFq6wH5JR2A",
    title="Rick Astley - Never Gonna Give You Up (Official Music Video)",
    frameborder="0",
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share",
    referrerpolicy="strict-origin-when-cross-origin",
    allowfullscreen="",
)

Server Calls