heex-templates

name	heex-templates
description	Phoenix HEEx template rules covering interpolation syntax, form building, class lists, conditional rendering, comments, and common anti-patterns. Use when writing or reviewing HEEx templates.

Phoenix HTML / HEEx Template Guidelines

Template Format

• Phoenix templates always use ~H or .html.heex files (known as HEEx), never use ~E

Forms

• Always use the imported Phoenix.Component.form/1 and Phoenix.Component.inputs_for/1 function to build forms. Never use Phoenix.HTML.form_for or Phoenix.HTML.inputs_for as they are outdated
• When building forms always use the already imported Phoenix.Component.to_form/2:

assign(socket, form: to_form(...))

<.form for={@form} id="msg-form">
  <.input field={@form[:content]} type="text" />
</.form>

• Always add unique DOM IDs to key elements (like forms, buttons, etc) when writing templates - these IDs can later be used in tests

App-Wide Template Imports

• For "app wide" template imports, you can import/alias into the your_app_web.ex's html_helpers block, so they will be available to all LiveViews, LiveComponents, and all modules that do use YourAppWeb, :html

Conditional Rendering

• Elixir supports if/else but does NOT support if/else if or if/elsif. **Never use or in Elixircondcase` for multiple conditionals: