Hyperbole

Hackage Version

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

{-# LANGUAGE DeriveAnyClass #-}
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE TypeFamilies #-}
module Main where

import Data.Text (Text)
import Web.Hyperbole
import Web.Atomic.CSS


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

page :: (Hyperbole :> es) => Eff es (Page '[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

Examples

The examples directory contains an app demonstrating many features. See them in action at hyperbole.live

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
      , text

Paste the above example into Main.hs, and run:

$ cabal run

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

Learn More

In the Wild

The NSO uses Hyperbole to manage Level 2 Data pipelines for the DKIST telescope. It uses complex user interfaces, workers, databases, and more. The entire codebase is open source.

Contributors

Changes

Revision history for hyperbole

0.5.0 – 2025-09-26

Improvements

  • trigger actions in other views
  • Javascript FFI
    • window.Hyperbole - API available from custom JS. runAction allows JS to trigger actions
    • pushEvent - send events to JS from the server
  • Documents
    • Choose to configure with View DocumentHead () instead of ByteString -> ByteString
    • quickStartDocument
    • Live Reload
  • Websocket - ping keepalive
  • New form fields: radio, select
  • Web.Hyperbole.Effect.OAuth2 - Authentication
  • Web.Hyperbole.Effect.GenRandom - Simple random effect used by OAuth2
  • Error handling, custom errors
  • Examples
    • Many additions and improvements
    • External Stylesheet TodoMVC
    • OAuth2 example

Breaking Changes / Improvements

  • Web.Atomic.CSS overhauled, and is now opt-in. Use new @ and ~ operators to apply attributes and styles
  • Web.Hyperbole.Data.Param - unified param encoding for Forms, ViewId, ViewAction, Sessions, Queries
  • Web.Hyperbole.Data.Encoding - encoding for ViewId, ViewAction
  • Web.Hyperbole.Data.URI - Standardize on Network.URI, extra utilities to manage paths
  • trigger: required refactor of Page type alias to support type-checking: Eff es (Page '[]) is now Page es '[]

0.4.3 – 2025-01-31

  • Bug fixes and improvements

0.4.2 – 2025-01-21

  • Cleaner HyperView class (@cgeorgii)
    • data family Action
    • update
  • Type-safe resolution of HyperViews
  • Record-based Forms
  • High-level sessions and query params
  • Events: onLoad, onClick onInput, onSubmit, onDblClick, onKeyDown, onKeyUp
  • Major refactoring
  • Nix build and CI (@Skyfold)
  • New Examples Live: https://docs.hyperbole.live
  • New Examples Added:
    • TodoMVC
    • Forms - Simple
    • DataTable
    • Search - Filters
    • Search - Autocomplete

0.3.6 – 2024-05-21

  • First version. Released on an unsuspecting world.