html_of_jsx

A ppx transformation and a library to write HTML in OCaml, Reason and mlx.

Features

• Brings the "component model" to HTML
• Type-safe: each element only accepts its valid attributes, and attribute values are checked at compile time
• Works with OCaml, Reason and mlx
• Supports all of Reason's JSX features (uppercase components, fragments, optional attributes, punning) with a few improvements (lowercase components, no ppx annotation needed)
• 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

opam install html_of_jsx -y

(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: JSX.element =
  <a href="https://x.com/davesnx">
    <span> (JSX.string "Click me!") </span>
  </a>

let html: string = JSX.render element
(* <a href="https://x.com/davesnx"><span>Click me!</span></a> *)

let element: JSX.element =
  <a href="https://x.com/davesnx">
    <span> {JSX.string("Click me!")} </span>
  </a>;

let html: string = 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.

Links

• GitHub: davesnx/html_of_jsx
• X: x.com/davesnx
• OPAM: html_of_jsx
• Performance: Making html_of_jsx 10x faster

Documentation

• Getting started — installation, dune setup, and first component
• Core API — elements, children, and composition
• Preprocessing flags — -htmx, -react and -disable-static-opt
• How the ppx works — JSX transformation, static analysis, and performance
• Dream integration — integrate with Dream
• HTMX mode — htmx attributes and extensions
• React compatibility — React DOM prop aliases