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

▶️ Simple Example

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

module Main where

import Data.Text (Text)
import Web.Atomic.CSS (border, (~))
import Web.Hyperbole

main :: IO ()
main = do
  run 3000 $ do
    liveApp quickStartDocument (runPage page)

page :: (Hyperbole :> es) => Page es '[Message]
page = do
  pure $ do
    hyper Message1 $ messageView "Hello"
    hyper Message2 $ messageView "World!"

data Message = Message1 | Message2
  deriving (Generic, ViewId)

instance HyperView Message es where
  data Action Message
    = Louder Text
    deriving (Generic, ViewAction)

  update (Louder msg) = do
    let new = msg <> "!"
    pure $ messageView new

messageView :: Text -> View Message ()
messageView msg = do
  button (Louder msg) ~ border 1 $ text msg

Documentation

Visit hyperbole.live for documentation and live examples. Also see the Hackage Documentation

Getting Started with Cabal

Create a new application:

$ mkdir myapp
$ cd myapp
$ cabal init

Add hyperbole and text as dependencies to the .cabal file:

    build-depends:
        base
      , hyperbole
      , atomic-css
      , text

    default-language: GHC2021

Paste the above example into Main.hs, then run it:

$ cabal run

Visit http://localhost:3000 to view the application

Learn More

• Comparison with Similar Frameworks
• Local Development
• Using NIX

In the Wild

The NSO uses Hyperbole to manage Level 2 Data pipelines for the DKIST telescope

Contributors

• Sean Hess
• Kamil Figiela
• Christian Georgii
• Pfalzgraf Martin
• Tushar Adhatrao
• Benjamin Thomas
• Adithya Obilisetty
• Jens Krause
• He Zhenxing
• fanshi1028
• jkasalt