Hyperbole

Create fully interactive HTML applications with type-safe serverside Haskell. Inspired by HTMX, Elm, and Phoenix LiveView

Learn more about Hyperbole on Hackage

{-# LANGUAGE DeriveAnyClass #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TypeFamilies #-}

import Web.Hyperbole

main = do
  run 3000 $ do
    liveApp (basicDocument "Example") (page mainPage)


mainPage = do
  handle message
  load $ do
    pure $ do
      el bold "My Page"
      hyper (Message 1) $ messageView "Hello"
      hyper (Message 2) $ messageView "World!"


data Message = Message Int
  deriving (Generic, Param)

data MessageAction = Louder Text
  deriving (Generic, Param)

instance HyperView Message where
  type Action Message = MessageAction


message :: Message -> MessageAction -> Eff es (View Message ())
message _ (Louder m) = do
  let new = m <> "!"
  pure $ messageView new


messageView m = do
  el_ $ text m
  button (Louder m) id "Louder"

Examples

The example directory contains an app with pages demonstrating various features

• Main
• Simple
• Counter
• CSS Transitions
• Forms
• Sessions
• Redirects
• Lazy Loading and Polling
• Errors
• Contacts (Advanced)

Learn More

View Documentation on Hackage

• https://hackage.haskell.org/package/hyperbole/docs/Web-Hyperbole.html

View on Github

• https://github.com/seanhess/hyperbole

In Production

The NSO uses Hyperbole for the L2 Data creation UI for the DKIST telescope

Local Development

Dependencies

Download and install NPM. On a mac, can be installed via homebrew:

brew install npm

Install client dependencies

cd client
npm install

Building

Build JavaScript client

cd client
npx webpack

Run examples

cd example
cabal run

Tests

cabal test

File watching

Run tests, then recompile everything on file change and restart examples

bin/dev

Contributors

• Sean Hess
• Kamil Figiela