Temple

Actions Status Hex.pm

You are looking at the README for the main branch. The README for the latest stable release is located here.

Temple is an Elixir DSL for writing HTML and SVG.

Add temple to your list of dependencies in mix.exs:

def deps do
 [
 {:temple, "~> 0.14.0"}
 ]
end

Currently Temple has the following things on which it won't compromise.

• Will only work with valid Elixir syntax.
• Should work in all web environments such as Plug, Aino, Phoenix, and Phoenix LiveView.

Using Temple is as simple as using the DSL inside of an temple/1 block. The runtime result of the macro is your HTML.

See the guides for more details.

import Temple
temple do
 h2 do: "todos"
 ul class: "list" do
 for item <- @items do
 li class: "item" do
 div class: "checkbox" do
 div class: "bullet hidden"
 end
 div do: item
 end
 end
 end
 script do: """
 function toggleCheck({currentTarget}) {
 currentTarget.children[0].children[0].classList.toggle("hidden");
 }

 let items = document.querySelectorAll("li");

 Array.from(items).forEach(checkbox => checkbox.addEventListener("click", toggleCheck));
 """
end

Temple components are simple to write and easy to use.

Unlike normal partials, Temple components have the concept of "slots", which are similar Vue. You can also refer to HEEx and Surface for examples of templates that have the "slot" concept.

Temple components are compatible with HEEx and Surface components and can be shared.

Please see the guides for more details.

defmodule MyAppWeb.Component do
 import Temple
 def card(assigns) do
 temple do
 section do
 div do
 slot @header
 end
 div do
 slot @inner_block
 end
 div do
 slot @footer
 end
 end
 end
 end
end

Using components is as simple as passing a reference to your component function to the c keyword.

import MyAppWeb.Component
c &card/1 do
 slot :header do
 @user.full_name
 end
 @user.bio
 slot :footer do
 a href: "https://twitter.com/#{@user.twitter}" do
 "@#{@user.twitter}"
 end
 a href: "https://github.com/#{@user.github}" do
 "@#{@user.github}"
 end
 end
end

By default, Temple will use Phoenix.HTML.Engine from phoenix_html, which provides HTML escaping. You can use any other engine that implements the EEx.Engine behaviour, such as EEx.SmartEngine or Aino.View.Engine.

# config/config.exs
config :temple,
 engine: Aino.View.Engine # or EEx.SmartEngine or Phoenix.LiveView.Engine

To include Temple's formatter configuration, add :temple to your .formatter.exs.

[
 import_deps: [:temple],
 inputs: ["*.{ex,exs}", "priv/*/seeds.exs", "{config,lib,test}/**/*.{ex,exs,lexs}"],
]

When using Phoenix ~> 1.7, all you need to do is include :temple in your mix.exs.

If you plan on using the template structure that < 1.6 Phoenix applications use, you can use :temple_phoenix as described below.

To use with Phoenix, please use the temple_phoenix package! This bundles up some useful helpers as well as the Phoenix Template engine.

• Introducing Temple: An elegant HTML library for Elixir and Phoenix
• Temple, AST, and Protocols
• Thinking Elixir Episode 92: Temple with Mitchell Hanberg
• How EEx Turns Your Template Into HTML