Skip to content
GHCJS example code
Haskell HTML Nix CSS Shell GLSL
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
TodoMVC
bouncing-canvas
bouncing-diagrams
diagrams-minimal
diagrams-reflex-counting
diagrams-reflex-follow
echo-button
echo
embed
hamlet-static
hello
scripts
timer
webgl-01-triangle
.gitignore
LICENSE
README.md
build.sh
cabal.config
gh-pages.sh

README.md

GHCJS Examples

hello

Hello World example, uses the bare minimum of functions from ghcjs-dom to get text into the browser window.

embed

Only slightly more elaborate than hello, sets a large chunk of static HTML, and then selects several elements by id. The use of documentGetElementById is important. The use of embedFile is not so important. Both will disappear as I move to better libraries for constructing HTML.

hamlet

Use hamlet and blaze-html to create the inner HTML content.

echo

Use ghcjs-dom to read from an input field and echo the value to a paragraph..

echo-button

Like echo, but register a callback on a button, and only update the paragraph when the button is pressed. This is the simplest example with a callback.

timer

A countdown timer using an MVar event queue to tie the knot. Callbacks on DOM elements add events to the queue. A single Haskell thread pops events from the queue and updates the (global) state. A render function is called in a loop by requestAnimationFrame and updates the DOM based on the global state. This is the simplest example with an event queue.

diagrams-minimal

Uses diagrams-ghcjs and ghcjs-canvas to render to a Canvas element.

bouncing-canvas

Uses ghcjs-canvas to render a bouncing ball. Click in the canvas to move the ball to that point.

bouncing-diagrams

Uses diagrams-ghcjs to render a bouncing ball. Click in the canvas to move the ball to that point.

diagrams-reflex-counting

Uses diagrams-reflex to render a circle, and respond to clicks on the circle. The counter should update only when the circle is clicked, not when other parts of the SVG are clicked.

diagrams-reflex-follow

Uses diagrams-reflex to render a circle at the current mouse position. Uses the mouse position event streams associated with each Diagram by diagrams-reflex.

You can’t perform that action at this time.