Uploaded by
Published on

Latest Release ComVer Build Status Gitter Chat

Build purely functional, type-safe web applications.

  • Isomorphic routing and rendering
  • Hot reloading
  • Render to React (or any virtual DOM library)
  • Time-travelling debug extension

Learn more

Read the Guide to learn more about Pux.

Quick start

The starter app provides everything you need to get started:

git clone git:// my-awesome-pux-app
cd my-awesome-pux-app
npm install
npm start


The following chunk of code sets up a basic counter that can be incremented and decremented:

module Main where

import Control.Bind (bind)
import Control.Monad.Eff (Eff)
import Data.Function (const, ($))
import Data.Ring ((+), (-))
import Data.Show (show)
import Data.Unit (Unit)
import Pux (CoreEffects, start)
import Pux.DOM.Events (onClick)
import Pux.DOM.HTML (HTML)
import Pux.Renderer.React (renderToDOM)
import Text.Smolder.HTML (button, div, span)
import Text.Smolder.Markup (text, (#!))

data Event = Increment | Decrement

type State = Int

-- | Return a new state (and effects) from each event
foldp ::  fx. Event -> State -> EffModel State Event fx
foldp Increment n = { state: n + 1, effects: [] }
foldp Decrement n = { state: n - 1, effects: [] }

-- | Return markup from the state
view :: State -> HTML Event
view count =
  div do
    button #! onClick (const Increment) $ text "Increment"
    span $ text (show count)
    button #! onClick (const Decrement) $ text "Decrement"

-- | Start and render the app
main ::  fx. Eff (CoreEffects fx) Unit
main = do
  app <- start
    { initialState: 0
    , view
    , foldp
    , inputs: []

  renderToDOM "#app" app.markup app.input