1

Dr.Mohammed Al-Hubaishi
FastHTML
Advanced Computer Programming
DR. MOHAMMED AL-HUBAISHI
 2
Key Differences between FastHTML and FastAPI

FastHTML FastAPI

► • Focus on UI development ► • API-first approach

► • Server-side rendering ► • JSON/REST focused
► • Component-based ► • Endpoint-based
► • Built-in templating ► • No built-in templating
► • Full-stack framework ► • Backend framework

Dr.Mohammed Al-Hubaishi
 3
Use Cases and Recommendations

When to use FastHTML: When to use FastAPI:

► • Full-stack web applications ► • REST API development

► • Server-rendered UIs ► • Microservices
► • Real-time applications ► • Backend services
► • Rapid prototyping ► • High-performance APIs
► • Traditional web apps ► • Mobile app backends

Dr.Mohammed Al-Hubaishi
 4
FastHTML Overview and Architecture
• FastHTML is a modern web framework for building dynamic web applications
• Core Features:
- Server-side HTML rendering
- Component-based architecture
- Built-in state management
- Real-time updates
• Architecture:
- Built on top of FastAPI
- Uses Jinja2 templating engine
- WebSocket support for real-time features
Dr.Mohammed Al-Hubaishi
 5
HTML Components in FastHTML

• Component-Based Structure: • Template Syntax:

- Reusable HTML components - Similar to Jinja2
- Template inheritance - Component interpolation
- Dynamic component rendering - Conditional rendering
• Features:
- Custom HTML tags
- Component lifecycle hooks
- Props and state management Jinja2 is a modern and designer-friendly templating engine for Python. It is
widely used for generating dynamic HTML, XML, or other markup formats
by combining templates with data.

Dr.Mohammed Al-Hubaishi
 6
JavaScript Integration in FastHTML

• Client-Side Capabilities: • Integration Methods:

- Interactive UI elements - Inline scripts
- Event handling - External JavaScript files
- AJAX requests - WebSocket connections
• JavaScript Features:
- Built-in reactive system
- State synchronization
- DOM manipulation

Dr.Mohammed Al-Hubaishi
 7
CSS Handling in FastHTML

• Styling Approaches:
• Asset Management:
- Scoped CSS
- Static file serving
- Global stylesheets
- CSS preprocessing
- Dynamic styling
- Style optimization
• CSS Features:
- Component-specific styles
- CSS modules support
- Style inheritance

Dr.Mohammed Al-Hubaishi
 8
Install Python

Dr.Mohammed Al-Hubaishi
 9

Install FastHTML
A Modern Python Web Framework for Rapid Development

Dr.Mohammed Al-Hubaishi
 Example of Basic Text Elements: 10
• H1 to H6 heading tags
Header example • Text formatting

http://localhost:5001/

https://github.com/DrMohammedhbi/FastHTML https://youtu.be/YQy7Rt7Zj8s

Dr.Mohammed Al-Hubaishi
 11
Button Interaction

@app.route("/"): This defines a route for the root (/). http://localhost:5001/

http://localhost:5001/change

Dr.Mohammed Al-Hubaishi
 12
Creating the Application

app = FastHTML()
► FastHTML() initializes the web application. This is the main object that
handles routing and serving the application.

serve()
► serve(): Starts the web server and serves the application, making it
accessible in a browser.

Dr.Mohammed Al-Hubaishi
 13
What is HTMX?

HTMX is a lightweight JavaScript library that allows you to add AJAX

functionality to your web pages using HTML attributes. It simplifies the
process of making HTTP requests (GET, POST, etc.) and updating parts of
the page dynamically.

Common HTMX Attributes:

•
hx-get: Sends an HTTP GET request to the specified URL.

•
hx-post: Sends an HTTP POST request to the specified URL.

•
hx-target: Specifies the part of the page to update with the response.
•hx-swap: Defines how the response should be swapped into the target element.

Dr.Mohammed Al-Hubaishi
 14
Defining the First Route (/)

► @app.route("/change"): This decorator defines a

route for the /change URL.
► change_text(): This function is executed when a
user visits the /change URL (or when the hx_get
request is triggered).
► P(“Click me!"): Returns a new paragraph element
with the text "You clicked the button!"

Dr.Mohammed Al-Hubaishi
 15
What is hx_get ?

► hx_get is an attribute used in conjunction with HTMX, a lightweight

JavaScript library that enables dynamic, interactive web applications
without requiring a full-page reload or heavy JavaScript frameworks.

► hx_get is an HTMX attribute that specifies a URL to send an HTTP GET

request to when the associated HTML element is triggered (e.g., clicked,
hovered, etc.).
► When the request is sent, the server's response (usually HTML or JSON) is
used to update part of the web page dynamically.

Dr.Mohammed Al-Hubaishi
 Forms and Input Elements

Form Components:
• Input fields
• Text areas
• Buttons
• Checkboxes
• Radio buttons
 App Routing and Titled

fast_app(live=True) is a helper function that initializes the app object and a routing object (rt) in one step.
The live=True argument likely enables some form of live reloading or hot-reloading, which is useful during development.
 App Routing

Feature (FastHTML) (fast_app())

Initialization Directly creates a FastHTML instance. Uses a helper function (fast_app()) to initialize.

Routing Uses @app.route("/") for routing. Uses @rt('/') for routing.

Modularity Less modular; app and routing are combined. More modular; separates app and routing.

Use Case Simpler, for smaller applications. More flexible, for larger or modular apps.

Dr.Mohammed Al-Hubaishi
18
 19
Example 3: Navigation Bar

https://www.w3schools.com/html/html_lists.asp

HTML

Dr.Mohammed Al-Hubaishi
 20
Example 4: Dynamic Content Update

Dr.Mohammed Al-Hubaishi
 21
Example 5: Form Submission

Dr.Mohammed Al-Hubaishi
 22
Simple Counter

Dr.Mohammed Al-Hubaishi
 23
Image Display

Dr.Mohammed Al-Hubaishi
 24
List of Items

Dr.Mohammed Al-Hubaishi
 25
Conditional Rendering

Dr.Mohammed Al-Hubaishi
 26
CSS Styling

Dr.Mohammed Al-Hubaishi
 27
Loading Spinner

Dr.Mohammed Al-Hubaishi
 28
Modal Dialog

Dr.Mohammed Al-Hubaishi
 29
Countdown Timer

Dr.Mohammed Al-Hubaishi
 30
File Upload

Dr.Mohammed Al-Hubaishi
 31
JSON Response

Dr.Mohammed Al-Hubaishi
 32
Fetch API Integration

Dr.Mohammed Al-Hubaishi
 33
References

► https://fastht.ml/

Dr.Mohammed Al-Hubaishi
Link Layer: 6-34