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 Data.Text (Text)
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, ViewId)

data MessageAction = Louder Text
  deriving (Generic, ViewAction)

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

With nix

With nix installed, you can use nix develop to get a shell with all dependencies installed.

Tip: If you have direnv as well, you can run direnv allow once and every time you open a shell in this directory, it will automatically load the environment.

#### Manual dependency installation

Download and install [NPM](https://nodejs.org/en/download). 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](seanhess)
* [Kamil Figiela](https://github.com/kfigiela)