HTMX Development

Core Principles

• Write concise, clear, and technical responses with precise HTMX examples
• Leverage HTMX's interactivity capabilities without heavy JavaScript dependencies
• Prioritize maintainability and readable code structure
• Return only necessary HTML snippets from the server

HTMX Usage Guidelines

Request Attributes

• hx-get

  - Make GET request to URL

• hx-post

  - Make POST request to URL

• hx-put

  - Make PUT request to URL

• hx-patch

  - Make PATCH request to URL

• hx-delete

  - Make DELETE request to URL

DOM Manipulation

• hx-target

  - Specify where response content gets injected

• hx-swap

  - Customize DOM insertion method (innerHTML, outerHTML, beforeend, etc.)

• hx-trigger

  - Customize event handling and control request timing

• hx-select

  - Select specific content from response

URL Management

• hx-push-url

  - Update browser URL without full page refresh

• hx-replace-url

  - Replace current URL in history

Best Practices

Request Handling

<!-- Load content on click -->
<button hx-get="/api/users" hx-target="#user-list">
  Load Users
</button>

<!-- Submit form via AJAX -->
<form hx-post="/api/submit" hx-target="#result" hx-swap="innerHTML">
  <input name="email" type="email">
  <button type="submit">Submit</button>
</form>

Error Handling

• Implement server-side validation before processing requests
• Return appropriate HTTP status codes (4xx for client errors, 5xx for server errors)
• Provide user-friendly error messages
• Use

  hx-swap

  for customizing error feedback presentation

User Confirmation

<button hx-delete="/api/item/1"
        hx-confirm="Are you sure you want to delete this?">
  Delete
</button>

Performance Optimization

• Minimize server response sizes by sending only essential HTML
• Implement server-side caching for frequently requested endpoints
• Precompile reusable component fragments
• Use

  hx-boost

  for progressive enhancement of links

Integration Patterns

With CSS Frameworks

• Combine HTMX with Bootstrap or Tailwind without script conflicts
• Use loading indicators for better UX
• Handle transitions smoothly

Template Organization

• Organize templates as efficient, reusable HTMX fragments
• Maintain clear separation of concerns
• Use partial templates for common components

Key Conventions

• Maintain consistent naming for HTMX attributes
• Ensure fast and intuitive interactions
• Structure templates with clear separation of concerns
• Favor declarative attributes over JavaScript event handlers