Phlex lets you build object-oriented web views in pure Elixir.

Phlex provides a component-based architecture for building HTML, SVG, and other markup views using Elixir's functional programming paradigm.

Getting Started

Create a component by using Phlex.HTML or Phlex.SVG:

defmodule MyApp.Components.Card do
  use Phlex.HTML

  def view_template(assigns, state) do
    state
    |> div([class: "card"], fn state ->
      state
      |> h1([class: "title"], fn state ->
        Phlex.SGML.append_text(state, assigns.title)
      end)
    end)
  end
end

MyApp.Components.Card.render(%{title: "Hello"})
# => "<div class="card"><h1 class="title">Hello</h1></div>"

Phoenix Integration

Phlex components can be used with Phoenix and Phoenix LiveView:

defmodule MyAppWeb.Components.Card do
  use Phlex.HTML

  def view_template(assigns, state) do
    state
    |> div([class: "card"], fn state ->
      Phlex.SGML.append_text(state, assigns.title)
    end)
  end
end

For LiveView integration, use Phlex.Phoenix.to_rendered/2:

defmodule MyAppWeb.MyLive do
  use Phoenix.LiveView

  def render(assigns) do
    Phlex.Phoenix.to_rendered(
      MyAppWeb.Components.Card.render(assigns)
    )
  end
end

Attribute Caching

Phlex automatically caches attribute generation for improved performance. The fetch_attributes/2 function provides a way to cache expensive attribute computations.

Modules

• Phlex.HTML - HTML component base
• Phlex.SVG - SVG component base
• Phlex.SGML - Base functionality for markup components
• Phlex.Phoenix - Phoenix and LiveView integration
• Phlex.StyleCapsule - StyleCapsule integration helper

See the documentation for each module for more details.