reflex-dom-th: reflex-dom-th transpiles HTML templates to haskell code for reflex-dom

[ bsd3, frp, gui, html, javascript, library, reactive, reactivity, user-interface, user-interfaces, web ] [ Propose Tags ]

Reflex-DOM is a very powerful web framework for functional reactive programming (FRP). Web pages itself are written in HTML.

reflex-dom-th combines the power of these two techniques by transpiling HTML templates to Haskell for the reflex-dom library.

[Skip to Readme]


[Last Documentation]

  • Reflex
    • Dom
      • Reflex.Dom.TH
        • Reflex.Dom.TH.Parser


Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


  • No Candidates
Versions [RSS],,,, 0.3.2, 0.3.3, 0.3.4
Change log
Dependencies array, base (>=4 && <5), containers, gettext-th, megaparsec, mtl, reflex-dom-core, template-haskell, text, th-lift-instances [details]
License BSD-3-Clause
Author Christoph Bauer
Category FRP, Web, GUI, HTML, Javascript, Reactive, Reactivity, User Interfaces, User-interface
Home page
Bug tracker
Uploaded by ChristophBauer at 2022-10-01T15:32:33Z
Distributions NixOS:0.3.4
Downloads 353 total (18 in the last 30 days)
Rating (no votes yet) [estimated by Bayesian average]
Your Rating
  • λ
  • λ
  • λ
Status Docs not available [build log]
All reported builds failed as of 2022-10-01 [all 2 reports]

Readme for reflex-dom-th-0.3.4

[back to package description]


Do you develop for the web? And you know functional reactive programming is the way to go. So you must use Reflex-DOM. But how can you integrate all these HTML snippet, which you found. You are tired in converting everything to to el, elAttr' etc, right?

From this day on this reflex-dom-th library will automate the task of converting your HTML templates to Reflex-Dom.


The basic example


is equivalent to

el "div" $ text "hello"

You can also put the html in a external file and include it with

$(domFile "template.html")

It it possible to have multiple elements and attributes

[dom|<ul class="list">
     </ul> |]

Dynamic content can be injected between two curly braces. It will reference an unbound variable. It is not a haskell expression. Keeping haskell out of the template will give you better error messages.

[dom|<ul class="list">
    </ul> |]
  where item1, item2 :: MonadWidget t m =>  m ()
        item1 = text "Item1"
        item2 = text "Item2"

It is also possible to bind additionally a `Dynamic t (Map Text Text)' to the attributes

divWithAttrs :: MonadWidget t m => Dynamic t (Map Text Text) -> m ()
divWithAttrs dynAttrs = [dom|<div class="list" {{attr}}></div> |]

To bind events to the elements it is possible to extract get the elements as a result. The reference number is the position in the result tuple.

(li1, li2, ul, w) <- [dom|<ul #2 class="list">
                           <li #0>Item1</div>
                           <li #1>Item1</div>
	                   <li>{{widget #3}}</div>
                          </ul> |]

There is also support for translatable text from gettext-th.

To add translatable text in a template File (see domFile)

<div>[__|Hello world|]</div>