https://github.com/rizo/helix

Build reactive web interfaces in OCaml.
https://github.com/rizo/helix

javascript jsoo ocaml reactive web

Last synced: 3 months ago
JSON representation

Build reactive web interfaces in OCaml.

• Host: GitHub
• URL: https://github.com/rizo/helix
• Owner: rizo
• Created: 2023-02-13T17:42:38.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-16T15:01:15.000Z (4 months ago)
• Last Synced: 2024-07-16T18:22:34.573Z (4 months ago)
• Topics: javascript, jsoo, ocaml, reactive, web
• Language: OCaml
• Homepage: https://rizo.github.io/helix/
• Size: 1.07 MB
• Stars: 43
• Watchers: 4
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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**](https://rizo.github.io/helix/helix/Helix/index.html) • [**Examples**](https://github.com/rizo/helix/tree/master/examples)

## Features

- Reactive signals with

  [`signal`](https://github.com/rizo/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`](https://rizo.github.io/helix/html/Html/index.html): write your HTML templates directly in OCaml.

- Fine-grained reactivity without Virtual DOM using

  [show/bind](https://rizo.github.io/helix/helix/Helix/index.html#reactive-views): updates are directly applied to the DOM tree based on values emited by reactive signals.

- Js-compatibility library [`jx`](https://rizo.github.io/helix/jx/Jx/index.html): write bindings to interact withe the JavaScript ecosystem.

## Example

```ocaml

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](https://github.com/melange-re/melange).

- Implement a JSX PPX for [Reason](https://reasonml.github.io).

  - 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](https://elm-lang.org/), [Ur/Web](http://www.impredicative.com/ur/),

[SolidJS](https://www.solidjs.com/),

[petite-vue](https://github.com/vuejs/petite-vue),

[Surplus](https://github.com/adamhaile/surplus),

[Brr](https://erratique.ch/software/brr) and [ReactJS](https://reactjs.org/).