Skip to content


Switch branches/tags

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Package reflex-dom-htmlea


The aim of the lib is to provide a set of functions that allow

 div (className "myWarning" $ id_ "mydiv" $ defGlobals) $ do

in place of

 elAttr "div" ("class" =: "myWarning" <> "id" =: "mydiv") $ do

and prevents writing e.g. p ( href (URL "..") $ def) $ do .. as p-tag doesn't have href-attribute.

Another aim is to have components with pre-defined functionality. The components try to be self-contained so that there would be no or low need to maintain (dynamic) states outside the components.

The lib uses Reflex.Dom and similar design choices apply when using it.

As of the beginning of 2018, lib started to use new project-stuff.

There are examples:

  • example1: basic use
  • exampleTbl: table-component
  • exampleTree: tree-component

About the naming conventions

  • ' at the end of a tag name is similar as in elAttr' (it calls elAttr' internally)
  • D at the end of a tag name means dynamic (it uses elDynAttr internally)
  • D' at the end of a tag name is similar as in elDynAttr'
  • N at the end of a tag name means default attributes
  • N' is like el'.
  • _ at the end of a tag name means default attributes (that is, empty) and blank content (only a few elements have this defined).
  • "class" attribute function is className in this lib

Other comments

The interactive elements are listed on a separate module. While example1 uses some of those elements, you most likely want to use the widgets from Reflex.Dom or Reflex.Dom.Contrib.

Lib is probably going to see some re-organization and re-naming etc. Suggestions are more than wellcome!


First, get the repo with git clone and cd into the directory, and after that make sure that the reflex-platform is in place:

git submodule update --init --recursive

To build with GHC, use the nix-shell command to enter the sandbox shell and use cabal (which is supplied by the sandbox):

nix-shell -A shells.ghc
cabal new-build all

Or in ghc-shell with ghci :l exampleTbl/app-wai/Main.hs after which :rel and then point the browser to the localhost with appropriate port number.

To build with GHCJS:

nix-shell -A shells.ghcjs
cabal --project-file=cabal-ghcjs.project --builddir=dist-ghcjs new-build all

You can also build examples separately by replacing all with exe:name, e.g.

cabal new-build exe:tableEx
cabal --project-file=cabal-ghcjs.project --builddir=dist-ghcjs new-build exe:exampleTbl

For further information, see the following

Note that if you have already obtained repo but want to update the reflex-platform, you can try, e.g.,

git submodule foreach "(git checkout develop; git pull --recurse-submodules)&"

(Note that the above command gets the develop-branch of the platform.)

See also the .ghci. The warp-compilation can be used with ghci. Also, the can be used if first uncommenting the corresponding target from exampleTbl.cabal-file and then entering the nix-shell with ghc-tools (not ghcjs).


The wish list is quite long at the moment. The list can be seen at It includes larger ones that probably take longer time and things that are on to-be-done-next list and on would-be-nice-to-have list.


As this lib is in it's infancy, maybe it is better to be open to naming convention and re-structuring suggestions etc. At the moment, some of the chosen names for attribute combinators are not consistent with regards to each other.

Bugs are more than likely to be found, as this is early work and there are no test cases (except example-programs).

If you want to compile the examples to android, the singletons-package is a bit problematic at the moment. (This lib may be split because of this.) If you comment the singletons-package from cabal-files and corresponding modules (VS-ending and the examples), then the examples compile to android.

Related work

See github, there are other libs possibly doing the same or almost the same thing. (TODO, check the available libs.)



HTML element and attribute names as functions that use internally el-family of functions.








No releases published


No packages published