Layout

Page layout utilities for wrapping content with common page structure

Page Layout Wrapper

wrap_with_layout


def wrap_with_layout(
    content:FT, # The main content to display
    navbar:Optional=None, # Optional navbar component
    footer:Optional=None, # Optional footer component
    container_id:str='main-content', # ID for the main content container
    container_tag:str='div', # HTML tag for the container
)->FT: # Main element with navbar and content

Wrap content with the full page layout including optional navbar and footer.

This utility provides a consistent page structure across your application. It wraps your content with optional navbar and footer components.

# Example: Simple layout with just content
from fasthtml.common import Div, H1, P

content = Div(
    H1("Page Title"),
    P("This is the main content")
)

page = wrap_with_layout(content)
print("Layout with just content:")
print(page)

Layout with just content:
<main><div id="main-content"><div><h1>Page Title</h1><p>This is the main content</p></div></div></main>

# Example: Layout with navbar and footer
navbar = Div(H1("My App"), id="navbar")
content = Div(H1("Dashboard"), P("Welcome to the dashboard"))
footer = Div(P("© 2025 My Company"), id="footer")

page = wrap_with_layout(content, navbar=navbar, footer=footer)
print("\nLayout with navbar and footer:")
print(page)


Layout with navbar and footer:
<main><div id="navbar"><h1>My App</h1></div><div id="main-content"><div><h1>Dashboard</h1><p>Welcome to the dashboard</p></div></div><div id="footer"><p>© 2025 My Company</p></div></main>

# Example: Using different container tag
content = Div(H1("Article Title"), P("Article content..."))

page = wrap_with_layout(content, container_tag="article")
print("\nLayout with article tag:")
print(page)


Layout with article tag:
<main><article id="main-content"><div><h1>Article Title</h1><p>Article content...</p></div></article></main>