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 • Starter Project
- 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.
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"This library is based on ideas found in other libraries and projects such as: Elm, Ur/Web, SolidJS, petite-vue, Surplus, Brr and ReactJS.
Warning 58 [no-cmx-file]: no cmx file was found in path for module Helix, and its interf
ace was not compiled with -opaque
Helix is built to be used with js_of_ocaml, which itself works with OCaml's bytecode. The above warning suggests that Helix does not provide a native "cmx" file. This is expected since Helix is built with dune's byte mode. To resolve this issue, build your executables with (modes js) and your libraries with (modes byte). See https://dune.readthedocs.io/en/stable/reference/dune/executable.html#linking-modes.