Getting started

Installation

From the opam repository

opam install html_of_jsx -y

or from source (via opam pin)

Pin a specific development commit from GitHub:

opam pin add html_of_jsx.dev "https://github.com/davesnx/html_of_jsx.git#01c813023e432cd4088b86ee21d5c3af2fc63bdc" -y

or with the dune package manager

Add html_of_jsx to the depends field in your dune-project:

(package
 (name my_app)
 (depends
  (ocaml (>= 4.14))
  (html_of_jsx (>= 0.1.0))))

Then lock and install:

dune pkg lock
dune build

Dune setup

Every executable or library that uses JSX needs two things: the runtime library and the ppx preprocessor.

An executable:

(executable
 (name server)
 (libraries html_of_jsx)
 (preprocess (pps html_of_jsx.ppx)))

A library:

(library
 (name components)
 (libraries html_of_jsx)
 (preprocess (pps html_of_jsx.ppx)))

See ppx settings for all available flags.

Syntax setup

html_of_jsx works with two JSX-capable syntaxes: Reason and mlx.

Reason

opam install reason -y

Reason files use the .re extension and work out of the box with dune.

mlx

mlx lets you write JSX directly inside OCaml files.

opam install mlx ocamlformat-mlx ocamlmerlin-mlx -y

Add the dialect to your dune-project:

(dialect
 (name mlx)
 (implementation
  (extension mlx)
  (merlin_reader mlx)
  (format
   (run ocamlformat-mlx %{input-file}))
  (preprocess
   (run mlx-pp %{input-file}))))

Then name your files with the .mlx extension instead of .ml.

Editor support

The vscode-ocaml-platform extension supports both Reason and mlx out of the box, including syntax highlighting, type information, and go-to-definition.

Next

• Core API for basic usage
• Settings for ppx flags
• Dream integration to integrate with Dream
• How the ppx works for a closer look at the JSX transformation.