{"id":21457790,"url":"https://github.com/cfmvcarlos/fastapi-htmx-jinja2","last_synced_at":"2026-04-12T22:54:58.782Z","repository":{"id":264015515,"uuid":"892025966","full_name":"CFMVCarlos/FastAPI-HTMX-Jinja2","owner":"CFMVCarlos","description":"FastAPI-HTMX-Jinja2 is a web app that integrates FastAPI for the backend, HTMX for dynamic content updates, and Jinja2 for rendering HTML templates. It features real-time updates via WebSockets and server-sent events, dynamic content swapping, and includes Pytest tests for core functionality for building interactive applications.","archived":false,"fork":false,"pushed_at":"2024-11-23T16:18:48.000Z","size":120,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-23T13:33:11.796Z","etag":null,"topics":["css3","fastapi","fastapi-template","html5","htmx","htmx-extension","jinja2","pytest","python","python3"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CFMVCarlos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-21T11:35:55.000Z","updated_at":"2024-11-23T16:18:52.000Z","dependencies_parsed_at":"2024-11-21T15:18:59.838Z","dependency_job_id":"bae2acec-4041-49d7-9a20-051069be1c56","html_url":"https://github.com/CFMVCarlos/FastAPI-HTMX-Jinja2","commit_stats":null,"previous_names":["cfmvcarlos/fastapi-htmx-jinja2"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CFMVCarlos%2FFastAPI-HTMX-Jinja2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CFMVCarlos%2FFastAPI-HTMX-Jinja2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CFMVCarlos%2FFastAPI-HTMX-Jinja2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CFMVCarlos%2FFastAPI-HTMX-Jinja2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CFMVCarlos","download_url":"https://codeload.github.com/CFMVCarlos/FastAPI-HTMX-Jinja2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243971193,"owners_count":20376784,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css3","fastapi","fastapi-template","html5","htmx","htmx-extension","jinja2","pytest","python","python3"],"created_at":"2024-11-23T06:07:06.031Z","updated_at":"2026-04-12T22:54:58.728Z","avatar_url":"https://github.com/CFMVCarlos.png","language":"Python","funding_links":[],"categories":[],"sub_categories":[],"readme":"# FastAPI Custom Made\n\nThis project showcases a custom implementation using **FastAPI** for backend services and **HTMX** for dynamic web development. It integrates various HTMX features with FastAPI to create a smooth, interactive user experience, enabling server-driven updates without full-page reloads.\n\n## Installation\n\nFollow these steps to set up the project on your local machine:\n\n1. **Clone the repository:**\n    ```bash\n    git clone https://github.com/CFMVCarlos/FastAPI-HTMX-Jinja2\n    ```\n\n2. **Navigate to the project directory:**\n    ```bash\n    cd FastAPI-HTMX-Jinja2\n    ```\n\n3. **Install the necessary dependencies:**\n    ```bash\n    pip install -r requirements.txt\n    ```\n\n## Usage\n\nTo run the application locally, follow these steps:\n\n1. **Start the FastAPI server:**\n    ```bash\n    uvicorn app.main:app --reload\n    ```\n\n2. **Open your browser and visit:**\n    [localhost](http://127.0.0.1:8000)\n\nTo run the FastAPI tests, use the following command:\n\n```bash\npython -m pytest test_app.py\n```\n\n## Features\n\nThis project combines **HTMX** with **FastAPI** to deliver an interactive web interface with the following features:\n\n### 1. Built-in HTMX Features\n\n- **Button Click Actions:**\n   - Dynamically change text colors (`RED`, `BLUE`, `GREEN`) by sending `hx-post` requests.\n   - Changes are reflected on the target element (`#p1`).\n  \n- **Element Addition:**\n   - Add new elements dynamically to the bottom of the page using `hx-swap-oob=\"true\"` and `hx-target=\"body\"`.\n\n- **Element Swapping:**\n   - Swap an element's content with the response using `hx-select`.\n\n- **Input Value Inclusion:**\n   - Include input field values in requests with `hx-include`.\n\n- **Confirmation Before Action:**\n   - Display a confirmation prompt before executing actions like deletions using `hx-confirm`.\n\n- **Boosted Content:**\n   - Enhance links and targets for content swapping using `hx-boost=\"true\"`.\n\n- **Loading States:**\n   - Implement loading states with custom classes for target elements (`data-loading-states`).\n\n- **Path Dependencies:**\n   - Trigger updates based on specific path dependencies using `hx-ext=\"path-deps\"`.\n\n- **Request Synchronization:**\n   - Ensure requests run sequentially using `hx-sync`.\n\n- **File Download:**\n   - Provide downloadable files through anchor links with `download=\"surprise_party.png\"`.\n\n### 2. HTMX Extensions Features\n\n- **Class Tools Extension:**\n   - Toggle classes on elements dynamically (`classes=\"toggle faded:1s \u0026 toggle red:1s\"`).\n\n- **Server-Sent Events (SSE):**\n   - Implement real-time updates with server streams using `hx-ext=\"sse\"`.\n\n- **WebSockets Extension:**\n   - Enable WebSocket connections for live data updates using `hx-ext=\"ws\"`.\n\n- **Advanced Loading States:**\n   - Add advanced loading states with delays and class changes during content refreshes.\n\n- **Preload Extension:**\n   - Preload content when interacting with specific elements (`preload=\"mousedown\"`).\n\n- **Remove-Me Extension:**\n   - Automatically remove elements after a set duration (`remove-me=\"10s\"`).\n\n- **SweetAlert2 Integration:**\n   - Use **SweetAlert2** for enhanced confirmation dialogs (`onClick=\"Swal.fire({...})\"`).\n\n- **HTMX Event Handling (`hx-on:*`):**\n   - Trigger JavaScript code before and after HTMX requests (`hx-on::before-request`, `hx-on::after-request`).\n\n### 3. Jinja2 Templates\n\nThe project utilizes **Jinja2** for dynamic HTML generation. It allows the creation of custom content by rendering variables, loops, and conditionals on the server side, then sending this content to the client.\n\n### 4. FastAPI Pytest Tests\n\nThe project includes a comprehensive suite of **FastAPI pytest tests** to verify application functionality. Key tests include:\n\n- **Root and Delete Endpoints:**\n   - Test for proper rendering of the root template and handling of DELETE requests.\n\n- **Button Click Behavior:**\n   - Ensure that button clicks trigger the expected content changes (e.g., color updates).\n\n- **Element Addition and Swapping:**\n   - Validate the addition of new elements and the swapping of content dynamically.\n\n- **Dynamic Content Rendering:**\n   - Verify that form inputs and query parameters are properly rendered in response to user interactions.\n\n- **Server-Sent Events (SSE):**\n   - Ensure that server events are triggered when a predefined condition is met (e.g., after a certain number of requests).\n\n- **WebSocket Communication:**\n   - Confirm WebSocket connections and message exchanges for real-time updates.\n\n- **Response and State Changes:**\n   - Ensure that changes to application state (e.g., text updates, status changes) are reflected in real-time.\n\n- **Loading States and Path Dependencies:**\n   - Validate loading states and path dependencies to ensure proper content changes are triggered.\n\n- **SweetAlert2 Integration:**\n   - Test the integration of SweetAlert2 for confirmation dialogs during interactions.\n\n## Author\n\n- [Carlos Valente](https://github.com/CFMVCarlos)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfmvcarlos%2Ffastapi-htmx-jinja2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcfmvcarlos%2Ffastapi-htmx-jinja2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcfmvcarlos%2Ffastapi-htmx-jinja2/lists"}