I have the pleasure to announce the release of TyXML 4.4.0, with special Reason support!

TyXML is a library for building statically correct HTML and SVG documents. TyXML provides a set of combinators which use the OCaml type system to ensure the validity of the HTML. TyXML is now a stable library and this release comes with a few newly supported elements and attributes (such as ARIA elements) and associated bug fixes.

However, the main novelty of this release is a long awaited feature: the support for Reason’s JSX syntax in the brand new tyxml-jsx package. When this package is loaded, the JSX syntax is reinterpreted in term of TyXML combinators and HTML validity is then checked by the type system:

open Tyxml;
let to_reason = <a href="reasonml.github.io/"> "Reason!" </a>
let to_reason : Tyxml.Html.elt([> ([> Html_types.txt ])Html_types.a ])

Here the type describes that it correctly nested some text inside a a tag. The Tyxml module from the tyxml library provides a textual output, but we can also build DOM trees using the js_of_ocaml-tyxml package:

open Js_of_ocaml_tyxml;
open Tyxml_js;

let intro = <span id="hello"> "Hello!" </span>;
let content = <> intro <Content title="the content"> ...my_long_content </Content> </>;

Content here is a custom component (i.e., a module containing a createElement function). The JSX syntax supports exactly the same conventions as the ReasonReact one.

We can also build reactive web pages, virtual dom, or tierless (aka, isomorphic) web pages, all with exactly the same API and the same typing properties. You simply need to have the Html and Svg modules in scope! Examples are available here and the documentation is available here.

So far, TyXML does not interact with ReasonReact in any way. However, it should be possible to add a TyXML API to create ReasonReact’s elements. This might be done in a future version.

The initial implementation (and proper motivational push) was provided by some vocal Ahrefs programmers, so thanks to them and happy programming!