{"id":13617067,"url":"https://github.com/joelburget/react-haskell","last_synced_at":"2025-04-04T21:07:44.404Z","repository":{"id":23061907,"uuid":"26415316","full_name":"joelburget/react-haskell","owner":"joelburget","description":"React bindings for Haskell","archived":false,"fork":false,"pushed_at":"2015-08-02T03:17:48.000Z","size":5494,"stargazers_count":352,"open_issues_count":14,"forks_count":26,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-28T20:07:05.414Z","etag":null,"topics":["ghcjs","haskell","react"],"latest_commit_sha":null,"homepage":null,"language":"Haskell","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/joelburget.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-11-10T01:04:47.000Z","updated_at":"2024-12-01T03:52:14.000Z","dependencies_parsed_at":"2022-08-20T23:10:23.740Z","dependency_job_id":null,"html_url":"https://github.com/joelburget/react-haskell","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelburget%2Freact-haskell","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelburget%2Freact-haskell/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelburget%2Freact-haskell/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/joelburget%2Freact-haskell/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/joelburget","download_url":"https://codeload.github.com/joelburget/react-haskell/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247249524,"owners_count":20908212,"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":["ghcjs","haskell","react"],"created_at":"2024-08-01T20:01:36.594Z","updated_at":"2025-04-04T21:07:44.381Z","avatar_url":"https://github.com/joelburget.png","language":"Haskell","funding_links":[],"categories":["Awesome React","Haskell"],"sub_categories":["Tools"],"readme":"# React-Haskell [![Hackage](https://img.shields.io/hackage/v/react-haskell.svg?style=flat-square)](https://hackage.haskell.org/package/react-haskell)\n\nAs crazy as it seems, using [React](http://facebook.github.io/react) and [Haskell](https://www.haskell.org) together just *may* be a good idea.\n\nI was driven to create this thing because I had a large existing Haskell codebase I wanted to put online. However, even without existing code, I think a lot of problems are better modeled in Haskell than JavaScript or  other languages. Or you might want to use some existing Haskell libraries.\n\n## Examples\n\nLet's put a simple paragraph on the page:\n\n```haskell\nsample :: ReactNode a\nsample = p_ [ class_ \"style\" ] $ em_ \"Andy Warhol\"\n\nmain :: IO ()\nmain = do\n    Just doc \u003c- currentDocument\n    let elemId :: JSString\n        elemId = \"inject\"\n    Just elem \u003c- documentGetElementById doc elemId\n    render sample elem\n```\n\nThat creates a DOM node on the page that looks like:\n\n```html\n\u003cp class=\"style\"\u003e\n    \u003cem\u003eAndy Warhol\u003c/em\u003e\n\u003c/p\u003e\n```\n\nWe can make that a little more complicated with some more child nodes.\n\n```haskell\nsample :: ReactNode a\nsample = div_ [ class_ \"beautify\" ] $ do\n    \"The Velvet Underground\"\n\n    input_\n\n    \"Lou Reed\"\n```\n\nBut of course that input doesn't do anything. Let's change that.\n\n```haskell\nsample :: JSString -\u003e ReactNode JSString\nsample = div_ $ do\n    \"Favorite artist:\"\n\n    input_ [ onChange (Just . value . target) ]\n\n    text str\n```\n\n## Getting Started\n\nThe first step is a working GHCJS installation. The easiest way is to download a virtual machine with GHCJS pre-installed. I recommend \u003ca href=\"https://github.com/joelburget/ghcjs-box\"\u003eghcjs-box\u003c/a\u003e.\n\nNow that GHCJS is installed we can use cabal to create a project.\n\n```bash\n$ mkdir project\n$ cd project\n$ cabal init # generate a .cabal file\n```\nNow edit the cabal file to include dependencies.\n\n```cabal\nbuild-depends:\n  base \u003e= 4.8 \u0026\u0026 \u003c 5,\n  ghcjs-base,\n  ghcjs-dom,\n  react-haskell \u003e= 1.3\n```\nNow we can write `Main.hs`.\n\n```haskell\nsample :: ReactNode a\nsample = p_ [ class_ \"style\" ] $ em_ \"Andy Warhol\"\n\nmain :: IO ()\nmain = do\n    Just elem \u003c- elemById \"id\"\n    render sample elem\n```\n\n## Next Steps\n\n### Reference\n\n* [haddocks](http://hackage.haskell.org/package/react-haskell)\n* [examples](https://github.com/joelburget/react-haskell/tree/master/example)\n\n### Additional Resources\n\n* [Animating Web UI with React and Haskell](http://joelburget.com/react-haskell) (article)\n* [Writing a React JS front-end in Haskell](http://begriffs.com/posts/2015-01-12-reactjs-in-haskell.html) (video)\n\n## Is it Right for Me?\n\nReact-Haskell is a great tool for building web UI from Haskell. However, you may want to consider the alternatives:\n\n* By writing plain React / JSX you can speed development by avoiding the GHCJS compilation step. This also has the advantage of being a bit more universal - more people use React through JSX than React-Haskell.\n* [ghcjs-react](https://github.com/fpco/ghcjs-react) is a very similar project.\n* [Reflex](https://github.com/ryantrinkle/try-reflex) is an FRP system built with GHCJS in mind.\n\n## Small Print\n\n[MIT License](http://opensource.org/licenses/MIT)\n\n[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/joelburget/react-haskell/trend.png)](https://bitdeli.com/free \"Bitdeli Badge\")\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoelburget%2Freact-haskell","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjoelburget%2Freact-haskell","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjoelburget%2Freact-haskell/lists"}