Helix

Build reactive web interfaces in OCaml.

Note: this project is experimental. The core functionality is stable but the API may break before the official release.

API Docs • Examples

Features

• Reactive signals with signal: signals represent values that change over time and can be used to model any dynamic state in your application.
• Declarative HTML with Helix.Html: write your HTML templates directly in OCaml.
• Fine-grained reactivity without Virtual DOM using show/bind: updates are directly applied to the DOM tree based on values emited by reactive signals.
• Js-compatibility library jx: write bindings to interact withe the JavaScript ecosystem.

Example

open Helix

let counter () =
  let count = Signal.make 0 in
  let open Html in
  div
    [ style_list [ ("border", "1px solid #eee"); ("padding", "1em") ] ]
    [
      h2 [] [ text "Counter" ];
      div [] [ text "Compute a count." ];
      div []
        [
          button
            [ on_click (fun () -> Signal.update (fun n -> n + 1) count) ]
            [ text "+" ];
          button
            [ on_click (fun () -> Signal.update (fun n -> n - 1) count) ]
            [ text "-" ];
          button [ on_click (fun () -> Signal.emit 0 count) ] [ text "Reset" ];
          div
            [
              style_list [ ("font-size", "32px") ];
              bind
                (fun n -> style_list [ ("color", if n < 0 then "red" else "blue") ])
                count;
            ]
            [ show (fun n -> text (string_of_int n)) count ];
        ];
    ]

let () =
  match Stdweb.Dom.Document.get_element_by_id "root" with
  | Some root -> Html.mount root (counter ())
  | None -> failwith "No #root element found"

Roadmap

• Add support for Melange.
• Implement a JSX PPX for Reason.
  • WIP implementation: https://github.com/rizo/helix/tree/master/experiments/helix-ppx.
• Server-side rendering.
• Support for scoped CSS styling using web-components.

Acknowledgements

This library is based on ideas found in other libraries and projects such as: Elm, Ur/Web, SolidJS, petite-vue, Surplus, Brr and ReactJS.