FastHTML Copilot Instructions

fasthtml-copilot-instructions.md

• Core Concepts:

  • FastHTML Basics: Framework for building fast, scalable web applications using pure Python. Integrates seamlessly with HTML, CSS, and JavaScript via HTMX.
  • ASGI and Uvicorn: FastHTML operates on ASGI with Uvicorn as the ASGI server. Starlette provides high-level functionality on top of ASGI.

• Routing and HTTP Methods:

  • Route Definitions: Use @rt decorator to define routes. Function names (get, post, put, delete) map directly to HTTP methods.
  • Dynamic Routing: Use path parameters and types for dynamic route handling. Example: @rt("/{fname:path}.{ext:static}").

• HTML and Components:

  • Component Creation: Build reusable components using Python functions that return HTML elements. Example: def hero(title, statement): return Div(H1(title), P(statement), cls="hero").
  • HTML Structure: Return HTML directly from route handlers using FastHTML's built-in functions like Div(), P(), H1().

• HTMX Integration:

  • Server Interaction: Use HTMX to create dynamic server-side interactions. Any HTML element can trigger server calls via events like hx-get or hx-post.
  • Partial Page Updates: HTMX allows returning partial HTML to update sections of the page without full reloads.

• CSS and Styling:

  • Custom Styles: Integrate CSS frameworks or custom styles using Link and Style components. Disable defaults like Pico CSS if needed.
  • Inline Styles: Apply inline CSS directly via the Style() function within components.

• Advanced Features:

  • Markdown Rendering: Use MarkdownJS() and HighlightJS() to render Markdown and syntax-highlighted code blocks within HTML.
  • Static Files Handling: Serve static files (e.g., images, CSS) via custom routes with FileResponse.

• Best Practices:

  • Component Reusability: Favor modular components to keep code DRY (Don't Repeat Yourself).
  • HTTP Fundamentals: Leverage the full capabilities of HTTP and ASGI for performance and flexibility.
  • Minimalism: Emphasize minimal and clean code, aligning with FastHTML’s lightweight design philosophy.

• APIs and Libraries:

  • Core Imports: Always start with from fasthtml.common import * for access to the most-used components.
  • CSS Frameworks: Utilize built-in CSS framework Pico.