html_of_jsx

A JSX transformation and a library to write HTML in Reason and mlx.

Features

  • Brings the "component model" to HTML

  • Supports all of Reason's JSX features (uppercase components, fragments, optional attributes, punning) with a few improvements (lowercase components, no ppx annotation needed)

  • Works with Reason and mlx

  • Type-safe: each element only accepts its valid attributes, and attribute values are checked at compile time

  • Sticks to HTML standard attributes: No React idioms (className, htmlFor, etc.)

  • Integrates well with htmx

  • Minimal core API

    • JSX.render to render a JSX element to an HTML string
    • Helpers: JSX.string, JSX.format, JSX.int, JSX.float, JSX.null, JSX.list, JSX.array, JSX.unsafe
    • Advanced rendering: JSX.render_to_channel, JSX.render_streaming
  • Designed to work on the server, but can be used on the client side as well (with Melange or js_of_ocaml)

Installation

bash
opam install html_of_jsx -y
dune
(libraries html_of_jsx)

(preprocess (pps html_of_jsx.ppx))

See Getting started for dune package manager, opam pin, and syntax setup.

Usage

let element = <a href="https://x.com/davesnx">

  <span> {JSX.string("Click me!")} </span>

</a>;



let html = JSX.render(element);

/* <a href="https://x.com/davesnx"><span>Click me!</span></a> */
let element = <a href="https://x.com/davesnx">

  <span>(JSX.string "Click me!")</span>

</a>



let html = JSX.render element

(* <a href="https://x.com/davesnx"><span>Click me!</span></a> *)

See Core API for elements, children, components, and rendering.

Credits

This library was extracted from server-reason-react and later simplified to work only with HTML5.

Documentation