How to Use GitHub Copilot With Phoenix LiveView in Elixir Projects

GitHub Copilot can accelerate your Phoenix LiveView development by suggesting Elixir code in real time. Many developers find it difficult to make Copilot produce idiomatic LiveView code instead of generic web framework patterns. This article explains how to configure Copilot for Elixir and Phoenix projects and how to write prompts that generate correct LiveView callbacks, event handlers, and HEEx templates. You will learn the exact settings and comment structures that improve suggestion quality.

How GitHub Copilot Understands Elixir and Phoenix LiveView

GitHub Copilot is a code completion tool that uses a large language model trained on public code repositories. It does not have built-in awareness of Phoenix LiveView as a separate framework. Instead, it relies on three signals: the file extension, the project’s existing code, and the comment or code immediately above the cursor. When you open a file with a .ex extension and the file contains a use Phoenix.LiveView statement, Copilot infers the pattern and starts suggesting LiveView-specific callbacks like mount/3, render/1, handle_event/3, and handle_info/2. The quality of these suggestions depends heavily on the surrounding context.

Before you can use Copilot effectively, you need the following prerequisites:

• Visual Studio Code with the GitHub Copilot extension installed and signed in
• ElixirLS extension for VS Code to provide syntax highlighting and language server support
• A Phoenix project with LiveView already set up (Phoenix 1.7 or later recommended)
• GitHub Copilot subscription (Individual, Business, or Enterprise)

Configure VS Code for Copilot With Elixir and Phoenix

Copilot works best when it sees consistent language and framework signals. Follow these steps to configure VS Code for Elixir and Phoenix LiveView development.

1. Open your project in VS Code
   Make sure you are inside your Phoenix project root folder. Copilot uses the open workspace to gather context from all visible files.
2. Create or edit .vscode/settings.json
   Add these settings to restrict Copilot suggestions to Elixir and HEEx files and to enable ElixirLS autocompletion:
   {"elixirLS.suggestSpecs": false, "github.copilot.enable": {"": false, "elixir": true, "heex": true}}
   This prevents Copilot from suggesting code in non-Elixir files like JavaScript or CSS where it may produce irrelevant completions.
3. Install and enable ElixirLS
   Open the Extensions view, search for ElixirLS, and install it. Restart VS Code. ElixirLS provides the language server that Copilot uses to understand Elixir syntax and types.
4. Open a LiveView module file
   Navigate to lib/your_app_web/live/ and open any existing LiveView file. Copilot activates automatically when you start typing in a .ex or .heex file.

Write LiveView Code With Copilot Suggestions

Once your environment is configured, you can start writing LiveView code. Copilot produces better suggestions when you write explicit comments that describe the function you want to implement.

Generate a LiveView mount/3 Callback

1. Type the module definition and use statement
   Begin with defmodule MyAppWeb.MyLive do and use Phoenix.LiveView. Copilot recognizes this pattern and prepares to suggest LiveView callbacks.
2. Write a comment describing the mount function
   Type # Assign current user and load initial data on a new line. Then press Enter. Copilot suggests the full mount/3 function with assigns.
3. Accept the suggestion with Tab
   Review the generated code. It should include socket = assign(socket, :user, user) and a {:ok, socket} tuple. Edit the assigns to match your schema.

Generate a handle_event/3 Clause

1. Write a comment with the event name and action
   Type # handle "save" event: validate params and update user. Copilot uses the event name to suggest the correct function signature.
2. Press Enter after the comment
   Copilot proposes a handle_event/3 clause with a pattern match on “save”. It often includes a changeset validation and a case statement.
3. Cycle through alternatives with Ctrl+Enter
   If the first suggestion does not match your database schema, press Ctrl+Enter to see up to 10 alternative implementations. Choose the one that uses your Ecto schema module.

Generate HEEx Templates Inline

1. Open a .heex file or embed HEEx in render/1
   In your LiveView module, write a render/1 function that returns a ~HEEx string. Copilot suggests HEEx tags and expressions inside the sigil.
2. Type a comment inside the HEEx block
   Write <%# List users with edit button %> inside the HEEx block. Copilot generates a <div> with a :for comprehension and a button.
3. Use phx-click and phx-value attributes
   Copilot often suggests Phoenix-specific attributes like phx-click="edit" and phx-value-id={user.id} when you type phx-. Accept these to reduce manual typing.

Common Issues When Using Copilot With Phoenix LiveView

Copilot Suggests Generic Elixir Code Instead of LiveView Callbacks

This happens when the file does not contain a use Phoenix.LiveView statement or when the comment is too vague. Add use Phoenix.LiveView at the top of the module and write a comment that includes the word “LiveView” or the callback name. For example, # LiveView mount callback produces better results than # setup.

Copilot Generates Outdated Phoenix 1.6 Syntax

Copilot’s training data includes older Phoenix versions. If you see socket.assigns instead of socket.assigns or ~L""" instead of ~HEEx""", edit the suggestion manually. You can also add a comment like # Phoenix 1.7 LiveView to nudge Copilot toward newer patterns.

Copilot Does Not Suggest HEEx Inside render/1

Copilot sometimes stops suggesting code inside the ~HEEx sigil because it treats the entire string as a literal. To fix this, break the HEEx block into smaller parts. Write the opening ~HEEx""" on one line, then a comment, then the closing """. Copilot will suggest content between the delimiters.

Copilot Completions vs Manual LiveView Code: When to Use Each

Item	Copilot Completions	Manual Code
Callback generation	Fast for standard mount, handle_event, handle_info	Needed for custom callbacks like handle_params with non-standard assigns
HEEx templates	Good for simple lists, forms, and buttons	Better for complex nested components or conditional rendering with multiple assigns
Ecto queries	Useful for basic Repo.get and Repo.all with where clauses	Required for complex joins, subqueries, or raw SQL
Error handling	Often omits error tuples or fallback clauses	Necessary for production-grade {:error, socket} patterns

Improve Copilot Suggestions for LiveView Code

You can train Copilot to produce better LiveView suggestions by keeping a consistent coding style across your project. Use the same variable names, assign keys, and callback ordering in every LiveView module. Copilot learns from the open files and will mirror the patterns it sees. For example, if you always write mount/3 before render/1, Copilot will suggest mount first. If you use @impl true before each callback, Copilot will start including that attribute in its suggestions.

Another effective technique is to open multiple LiveView files in the same VS Code window. Copilot uses all open tabs as context. If you have a working LiveView module open alongside the one you are editing, Copilot can copy the assign structure and event names from the working module.

GitHub Copilot can now generate accurate Phoenix LiveView callbacks, event handlers, and HEEx templates when you configure VS Code correctly and write descriptive comments. Start by adding the .vscode/settings.json configuration and writing comments that include the callback name and action. For advanced use, keep several LiveView modules open to give Copilot more context. A useful next step is to try Copilot in a LiveView form with phx-change and phx-submit events to see how it handles both client and server event patterns.