Phoenix, LiveView, and HEEx

Open the Mix application, not just a template#

Open the Phoenix project root with its dependencies installed and SDK selected. The plugin uses project context for route and component intelligence. A loose .heex file cannot provide the same information as a project with routers, components, and LiveViews indexed.

Define a function component#

In an existing Phoenix components module, a small component can declare an input and slot:

attr :title, :string, required: true
slot :inner_block, required: true

def notice(assigns) do
  ~H"""
  <section>
    <h2>{@title}</h2>
    {render_slot(@inner_block)}
  </section>
  """
end

Use it from a template with <.notice title="Saved">Your changes are ready.</.notice>. Invoke completion on component attributes, navigate to their declarations, and inspect missing required-attribute feedback. The function must live in the appropriate Phoenix component context; this fragment is not a standalone Elixir script.

Work with LiveView events#

In HEEx, completion assists with assigns, component attributes/slots, phx-* bindings, and supported directives. Follow the corresponding LiveView callback when reviewing an event. A binding name alone does not prove a matching handler exists at runtime, especially when it is built dynamically.

For external templates, keep the file with the expected owning LiveView/component. Inline ~H content and external .heex have different source locations but share the application’s context.

Inspect routes#

Use Tools → Elixir → Show Phoenix Routes to inspect recognized routes. Follow a route to the controller/LiveView declaration, then review verified route references such as ~p"/orders". Scopes, pipelines, nested resources, and route aliases affect the effective route.

Create new Phoenix controllers, LiveViews, components, schemas, and tasks through available file/live templates, then review generated module names against your application’s namespace. Run the Phoenix build and relevant tests after changing component APIs or routes.