{"id":32162719,"url":"https://github.com/chrbauer/reflex-dom-th","last_synced_at":"2026-02-21T15:03:41.021Z","repository":{"id":56876403,"uuid":"455869024","full_name":"chrbauer/reflex-dom-th","owner":"chrbauer","description":"reflex-dom-th transpiles HTML templates to haskell code for reflex-dom","archived":false,"fork":false,"pushed_at":"2022-12-31T10:55:14.000Z","size":64,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-12-08T11:53:31.408Z","etag":null,"topics":["dom","haskell","html","megaparsec","reflex-frp","template-haskell"],"latest_commit_sha":null,"homepage":"","language":"Haskell","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chrbauer.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-02-05T12:52:14.000Z","updated_at":"2023-11-24T00:23:42.000Z","dependencies_parsed_at":"2023-01-31T19:01:05.221Z","dependency_job_id":null,"html_url":"https://github.com/chrbauer/reflex-dom-th","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chrbauer/reflex-dom-th","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrbauer%2Freflex-dom-th","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrbauer%2Freflex-dom-th/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrbauer%2Freflex-dom-th/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrbauer%2Freflex-dom-th/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chrbauer","download_url":"https://codeload.github.com/chrbauer/reflex-dom-th/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chrbauer%2Freflex-dom-th/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29684076,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T14:31:22.911Z","status":"ssl_error","status_checked_at":"2026-02-21T14:31:22.570Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["dom","haskell","html","megaparsec","reflex-frp","template-haskell"],"created_at":"2025-10-21T14:01:31.869Z","updated_at":"2026-02-21T15:03:41.015Z","avatar_url":"https://github.com/chrbauer.png","language":"Haskell","funding_links":[],"categories":[],"sub_categories":[],"readme":"# reflex-dom-th\nDo you develop for the web? And you know functional reactive programming is the way to go. So you must use Reflex-DOM.\nBut how can you integrate all these HTML snippet, which you found. You are tired in converting everything to to el, elAttr' etc, right?\n\nFrom this day on this reflex-dom-th library will automate the task of converting your HTML templates to Reflex-Dom.\n\n# Examples\n\nThe basic example\n\n```\n[dom|\u003cdiv\u003ehello\u003c/div\u003e|]\n```\n\nis equivalent to\n\n```\nel \"div\" $ text \"hello\"\n```\n\nYou can also put the html in a external file and include it with\n\n```\n$(domFile \"template.html\")\n```\n\nIt it possible to have multiple elements and attributes\n\n```\n[dom|\u003cul class=\"list\"\u003e\n       \u003cli\u003eItem1\u003c/div\u003e\n       \u003cli\u003eItem1\u003c/div\u003e\n     \u003c/ul\u003e |]\n```     \n\nDynamic 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.\n\n```\n[dom|\u003cul class=\"list\"\u003e\n      \u003cli\u003e{{item1}}\u003c/div\u003e\n      \u003cli\u003e{{item2}}\u003c/div\u003e\n    \u003c/ul\u003e |]\n  where item1, item2 :: MonadWidget t m =\u003e  m ()\n        item1 = text \"Item1\"\n        item2 = text \"Item2\"\n```\n\nIt is also possible to bind additionally a `Dynamic t (Map Text Text)' to the attributes\n\n```\ndivWithAttrs :: MonadWidget t m =\u003e Dynamic t (Map Text Text) -\u003e m ()\ndivWithAttrs dynAttrs = [dom|\u003cdiv class=\"list\" {{attr}}\u003e\u003c/div\u003e |]\n```\n\n\nTo 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.\n\n```\n(li1, li2, ul, w) \u003c- [dom|\u003cul #2 class=\"list\"\u003e\n                           \u003cli #0\u003eItem1\u003c/div\u003e\n                           \u003cli #1\u003eItem1\u003c/div\u003e\n\t                   \u003cli\u003e{{widget #3}}\u003c/div\u003e\n                          \u003c/ul\u003e |]\n```\t\t       \n\n\nThere is also support for translatable text from [gettext-th](https://hackage.haskell.org/package/gettext-th). \n\nTo add translatable text in a template File (see domFile) \n\n```\n\u003cdiv\u003e[__|Hello world|]\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrbauer%2Freflex-dom-th","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchrbauer%2Freflex-dom-th","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchrbauer%2Freflex-dom-th/lists"}