heex-templates

What problem does it solve?

Phoenix HEEx template guidelines help teams write and review templates consistently, preventing common mistakes around interpolation, forms, and rendering.

Core Features & Use Cases

• Enforces correct HEEx usage and syntax across templates, including proper interpolation and literal braces handling.
• Guides the use of Phoenix.Component forms and to_form for form construction, avoiding outdated helpers.
• Standardizes app wide imports of template helpers in html_helpers for consistency across LiveViews and components.
• Provides rules for conditional rendering using cond or case, and cautions against invalid patterns like if with else if.
• Establishes proper class list syntax for dynamic classes and ensures deterministic DOM IDs for testability.
• Clarifies comments in HEEx templates using the approved HEEx comment syntax and supports safe block constructs.
• Outlines the interpolation rules for attributes and bodies, including safe handling of literal braces.

Quick Start

Audit a HEEx template by applying these rules: ensure ~H usage, Phoenix.Component form helpers, unique DOM IDs, and safe interpolation patterns.