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 Helix.View: 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
open Stdweb

let counter () =
  let incr = Signal.make 0 in
  let count = Signal.reduce (fun total n -> total + n) 0 incr in
  let open Html in
  fragment
    [
      h2 [ style [ ("font-family", "monospace") ] ] [ text "Counter" ];
      div [ style [ ("margin-bottom", "20px") ] ] [ text "Compute a count." ];
      div []
        [
          button [ on_click (fun _ -> Signal.emit 1 incr) ] [ text "+" ];
          button [ on_click (fun _ -> Signal.emit (-1) incr) ] [ text "-" ];
          span [ style [ ("margin-left", "5px") ] ] [ View.show int count ];
        ];
    ]

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

Roadmap

• Add support for Melange.
  • Currently blocked by ocaml/dune#7104.
• 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.