Simple functional UI framework written in Reasonml.

Usage no npm install needed!

<script type="module">
  import bsRembrant from '';



Simple functional UI framework written in Reasonml.

Getting started

open Rembrandt.Elements;

type model = int;
type action =
  | Add
  | Sub
  | Twice;

let update =
    (model: model, action: action): (model, Command.command('action)) =>
  switch (action) {
  | Add => (model + 1, Command.null)
  | Sub => (model - 1, Command.null)
  | Twice => (model + 1, Command.action(Add))
    (model, dispatch) =>
        <div key="1" id="count"> {string_of_int(model) |> text} </div>
        <button key="2" id="plus" onClick={_ => Add |> dispatch}>
        <button key="3" id="minus" onClick={_ => Sub |> dispatch}>
        <button key="4" id="double" onClick={_ => Twice |> dispatch}>
          {text("twice +")}



Initial store value.


Function for modify model. It takes current model and dispatched action. It returns 2 element tuple with new model and command.


Way to run side effects in asynchronously. Command.null wouldn't run anything, Command.action will dispatch action asynchronously, will run passed function with dispatch as argument.


On every state change result on function will be render on rootNode. Argument dispatch should be call with proper action on DOM event callback.

rootId (optional)

String for find rootNode via document.getElementById default is "app".

initAction (optional)

Action to dispatch after first render. Default is Command.null.

middlewares (optional)

List of functions to apply on each state update. Each takes oldModel, newModel and action as arguments. See Rembrandt.MiddleWares.logger in examples/ Default is [].