As crazy as it seems, using React and Haskell together just may be a good idea.

I 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.

Let's put a simple paragraph on the page:

sample :: React () ()
sample = p_ [ class_ "style" ] $ em_ "Andy Warhol"

main :: IO ()
main = do
    Just elem <- elemById "id"
    render elem sample

That creates a DOM node on the page that looks like:

<p class="style">
    <em>Andy Warhol</em>
</p>

We can make that a little more complicated with some more child nodes.

sample :: React () ()
sample = div_ [ class_ "beautify" ] $ do
    "The Velvet Underground"

    input_

    "Lou Reed"

But of course that input doesn't do anything. Let's change that.

sample :: JSString -> React AppKey ()
sample str = div_ $ do
    "Favorite artist:"

    input_ [ onChange (Just . value . target) ]

    text str

• Animating Web UI with React and Haskell (article)
• Writing a React JS front-end in Haskell (video)

TODO

Jordan Walke sketched out a similar API for OCaml.

We should try to adhere to React's Virtual DOM Terminology when possible.

MIT License