Skip to content

rizo/helix

Folders and files

NameName
Last commit message
Last commit date

Latest commit

518bc48 · Mar 21, 2025
Jun 13, 2023
Sep 16, 2024
Sep 16, 2024
Jul 17, 2024
Mar 20, 2024
Mar 21, 2025
Sep 17, 2024
Oct 31, 2024
Mar 20, 2024
Feb 14, 2023
Sep 10, 2024
Sep 17, 2024
Sep 16, 2024
Sep 19, 2024
Oct 22, 2024
Sep 5, 2024
Mar 20, 2024
Mar 20, 2024
Feb 19, 2023
Sep 17, 2024
Sep 17, 2024

Repository files navigation

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 DocsExamplesStarter Project

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"

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.