{"id":13564418,"url":"https://github.com/mhanberg/temple","last_synced_at":"2025-05-14T13:07:22.160Z","repository":{"id":37381880,"uuid":"186015793","full_name":"mhanberg/temple","owner":"mhanberg","description":"An HTML DSL for Elixir and Phoenix","archived":false,"fork":false,"pushed_at":"2025-04-24T09:17:18.000Z","size":566,"stargazers_count":495,"open_issues_count":7,"forks_count":21,"subscribers_count":13,"default_branch":"main","last_synced_at":"2025-04-24T10:28:17.622Z","etag":null,"topics":["elixir","html","phoenix"],"latest_commit_sha":null,"homepage":"","language":"Elixir","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mhanberg.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"mhanberg","custom":["https://champions-of-hope.funraise.org/fundraiser/mitchell-hanberg"]}},"created_at":"2019-05-10T15:54:44.000Z","updated_at":"2025-04-24T09:17:22.000Z","dependencies_parsed_at":"2024-04-29T11:31:14.993Z","dependency_job_id":"7d53f3ea-0f99-4449-bc70-16ae6c12b76c","html_url":"https://github.com/mhanberg/temple","commit_stats":{"total_commits":227,"total_committers":13,"mean_commits":17.46153846153846,"dds":"0.19383259911894268","last_synced_commit":"7a505875af6a1cee1536e516528f5be914df1f3f"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhanberg%2Ftemple","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhanberg%2Ftemple/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhanberg%2Ftemple/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhanberg%2Ftemple/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mhanberg","download_url":"https://codeload.github.com/mhanberg/temple/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254149958,"owners_count":22022851,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elixir","html","phoenix"],"created_at":"2024-08-01T13:01:31.028Z","updated_at":"2025-05-14T13:07:17.145Z","avatar_url":"https://github.com/mhanberg.png","language":"Elixir","funding_links":["https://github.com/sponsors/mhanberg","https://champions-of-hope.funraise.org/fundraiser/mitchell-hanberg"],"categories":["Templating","Elixir"],"sub_categories":[],"readme":"![Temple](temple-github-image.png)\n\n\n[![Actions Status](https://github.com/mhanberg/temple/workflows/CI/badge.svg)](https://github.com/mhanberg/temple/actions)\n[![Hex.pm](https://img.shields.io/hexpm/v/temple.svg)](https://hex.pm/packages/temple)\n\n\u003e You are looking at the README for the main branch. The README for the latest stable release is located [here](https://github.com/mhanberg/temple/tree/v0.11.0).\n\n# Temple\n\nTemple is an Elixir DSL for writing HTML and SVG.\n\n## Installation\n\nAdd `temple` to your list of dependencies in `mix.exs`:\n\n\u003c!-- x-release-please-start-version --\u003e\n```elixir\ndef deps do\n  [\n    {:temple, \"~\u003e 0.14.0\"}\n  ]\nend\n```\n\u003c!-- x-release-please-end --\u003e\n\n## Goals\n\nCurrently Temple has the following things on which it won't compromise.\n\n- Will only work with valid Elixir syntax.\n- Should work in all web environments such as Plug, Aino, Phoenix, and Phoenix LiveView.\n\n## Usage\n\nUsing Temple is as simple as using the DSL inside of an `temple/1` block. The runtime result of the macro is your HTML.\n\nSee the [guides](https://hexdocs.pm/temple/your-first-template.html) for more details.\n\n```elixir\nimport Temple\n\ntemple do\n  h2 do: \"todos\"\n\n  ul class: \"list\" do\n    for item \u003c- @items do\n      li class: \"item\" do\n        div class: \"checkbox\" do\n          div class: \"bullet hidden\"\n        end\n\n        div do: item\n      end\n    end\n  end\n\n  script do: \"\"\"\n  function toggleCheck({currentTarget}) {\n    currentTarget.children[0].children[0].classList.toggle(\"hidden\");\n  }\n\n  let items = document.querySelectorAll(\"li\");\n\n  Array.from(items).forEach(checkbox =\u003e checkbox.addEventListener(\"click\", toggleCheck));\n  \"\"\"\nend\n```\n\n### Components\n\nTemple components are simple to write and easy to use.\n\nUnlike normal partials, Temple components have the concept of \"slots\", which are similar [Vue](https://v3.vuejs.org/guide/component-slots.html#named-slots). You can also refer to HEEx and Surface for examples of templates that have the \"slot\" concept.\n\nTemple components are compatible with HEEx and Surface components and can be shared.\n\nPlease see the [guides](https://hexdocs.pm/temple/components.html) for more details.\n\n```elixir\ndefmodule MyAppWeb.Component do\n  import Temple\n\n  def card(assigns) do\n    temple do\n      section do\n        div do\n          slot @header\n        end\n\n        div do\n          slot @inner_block\n        end\n\n        div do\n          slot @footer\n        end\n      end\n    end\n  end\nend\n```\n\nUsing components is as simple as passing a reference to your component function to the `c` keyword.\n\n```elixir\nimport MyAppWeb.Component\n\nc \u0026card/1 do\n  slot :header do\n    @user.full_name\n  end\n\n  @user.bio\n\n  slot :footer do\n    a href: \"https://twitter.com/#{@user.twitter}\" do\n      \"@#{@user.twitter}\"\n    end\n    a href: \"https://github.com/#{@user.github}\" do\n      \"@#{@user.github}\"\n    end\n  end\nend\n```\n\n### Engine\n\nBy default, Temple will use the `EEx.SmartEngine` that is built into the Elixir standard library. If you are a web framework that uses it's own template engine (such as [Aino](https://github.com/oestrich/aino) and Phoenix/LiveView, you can configure Temple to it!\n\n```elixir\n# config/config.exs\n\nconfig :temple,\n  engine: Aino.View.Engine # or Phoenix.HTML.Engine or Phoenix.LiveView.Engine\n```\n\n### Formatter\n\nTo include Temple's formatter configuration, add `:temple` to your `.formatter.exs`.\n\n```elixir\n[\n  import_deps: [:temple],\n  inputs: [\"*.{ex,exs}\", \"priv/*/seeds.exs\", \"{config,lib,test}/**/*.{ex,exs,lexs}\"],\n]\n```\n\n## Phoenix\n\nWhen using Phoenix ~\u003e 1.7, all you need to do is include `:temple` in your mix.exs.\n\nIf you plan on using the template structure that \u003c 1.6 Phoenix applications use, you can use `:temple_phoenix` as described below.\n\nTo use with [Phoenix](https://github.com/phoenixframework/phoenix), please use the [temple_phoenix](https://github.com/mhanberg/temple_phoenix) package! This bundles up some useful helpers as well as the Phoenix Template engine.\n\n## Related\n\n- [Introducing Temple: An elegant HTML library for Elixir and Phoenix](https://www.mitchellhanberg.com/introducing-temple-an-elegant-html-library-for-elixir-and-phoenix/)\n- [Temple, AST, and Protocols](https://www.mitchellhanberg.com/temple-ast-and-protocols/)\n- [Thinking Elixir Episode 92: Temple with Mitchell Hanberg](https://podcast.thinkingelixir.com/92)\n- [How EEx Turns Your Template Into HTML](https://www.mitchellhanberg.com/how-eex-turns-your-template-into-html/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhanberg%2Ftemple","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmhanberg%2Ftemple","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhanberg%2Ftemple/lists"}