Phoenix LiveView HEEx

Mix.install([
  {:mdex, "~> 0.11"},
  {:phoenix_playground, "~> 0.1"},
  {:req_embed, "~> 0.3"}
])

Intro

MDEx integrates with Phoenix LiveView, allowing you to write Markdown that includes Phoenix components, phx-* bindings, and Elixir expressions. Use the ~MD[...]HEEX sigil modifier to compile Markdown templates with full HEEx support. See the HEEx Integration guide for more details.

Example

defmodule MarkdownLive do
  use Phoenix.LiveView
  import MDEx.Sigil

  def mount(_params, _session, socket) do
    {:ok, assign(socket, message: "Have a nice day", count: 0)}
  end

  def render(assigns) do
    ~MD"""
    

    

    # Demo

    Hello from MDEx :wave:

    **Markdown** and **HEEx** together!

    Today is _{Calendar.strftime(DateTime.utc_now(), "%B %d, %Y")}_

    ---

    
      -
      {@count}
      +
    

    <%= @message %>
    

    ---

    Built with:
    - <.link href="https://crates.io/crates/comrak">comrak
    - <.link href="https://hex.pm/packages/mdex">MDEx

    
    """HEEX
  end

  def handle_event("inc", _, socket), do: {:noreply, update(socket, :count, &amp;(&amp;1 + 1))}
  def handle_event("dec", _, socket), do: {:noreply, update(socket, :count, &amp;(&amp;1 - 1))}
end

PhoenixPlayground.start(live: MarkdownLive, open_browser: true)