fast_html_app.py

# This file is the main file for the FastHTML package.
# It imports all the necessary modules and classes.
from fasthtml.common import *

# Create app and router instances
# rt helps to connect url paths to the functions that will be executed
app, rt = fast_app()

# Define a route decorator
@rt('/')  # Define a route for the root path or home route
def get():
    return Div(
        H1('Up and running with FastHTML!'),

        Input(
            type='text',
            name='q',
            hx_get='/trigger_delay',
            hx_trigger='keyup changed delay:500ms',
            hx_target='#search-results',
            placeholder='Search...'
        ),

        Div(id='search-results'),

        Div(
            Button('Search', hx_post='/example', hx_indicator='#spinner'),
            Img(id='spinner', src='/img/bars.svg', cls='htmx-indicator')
        ),

        Hr(),

        Form(
            Div(
                Label('First Name'),
                Input(type='text', name='firstName', value='Joe')
            ),
            Div(
                Label('Last Name'),
                Input(type='text', name='lastName', value='Blow'),
                cls='form-group'
            ),
            Div(
                Label('Email Address'),
                Input(type='email', name='email', value='[email protected]'),
                cls='form-group'
            ),
            Button('Submit', cls='btn'),
            Button('Cancel', hx_get='/contact/1', cls='btn'),
            hx_put='/contact/1',
            hx_target='this',
            hx_swap='outerHTML'
        ),

        Style(
            'body {'
            'display: flex;'
            'justify-content: center;'
            'align-items: center;'
            'height: 100vh;'
            'margin: 0;'
            '}'
            'h1 {'
            'text-align: center;'
            'color: #005fff;'
            '}'
        ),
        hx_get="/change"
    )

serve()