Embed OCaml notebooks in any web page thanks to WebComponents! Just copy and paste the following script in your html page source to load the integration:

<script async
  src="https://cdn.jsdelivr.net/gh/art-w/x-ocaml.js@6/x-ocaml.js"
  src-worker="https://cdn.jsdelivr.net/gh/art-w/x-ocaml.js@6/x-ocaml.worker+effects.js"
  integrity="sha256-3ITn2LRgP/8Rz6oqP5ZQTysesNaSi6/iEdbDvBfyCSE="
  crossorigin="anonymous"
></script>

This will introduce a new html tag <x-ocaml> to present OCaml code, for example:

<x-ocaml>let x = 42</x-ocaml>

The script will initialize a CodeMirror editor integrated with the OCaml interpreter, Merlin and OCamlformat (all running in a web worker). Check out the online demo for more details, including how to load additional OCaml libraries and ppx in your page.

For an even easier integration, @patricoferris made a command-line tool xocmd to convert markdown files to use <x-ocaml>!

Compilation

To avoid relying on a public CDN and host your own copy of the x-ocaml scripts, you can reproduce the javascript files with:

$ git clone --recursive https://github.com/art-w/x-ocaml
$ cd x-ocaml

# Install the dependencies with either dune:
x-ocaml/ $ dune pkg lock
# Or with opam:
x-ocaml/ $ opam update && opam install . --deps-only

# Make sure to use the release profile to optimize the js file size
x-ocaml/ $ dune build --profile=release

x-ocaml/ $ ls *.js
x-ocaml.js  x-ocaml.worker+effects.js  x-ocaml.worker.js

Acknowledgments

This project was heavily inspired by the amazing sketch.sh, @jonludlam's notebooks in Odoc, blogaml by @panglesd, and all the wonderful people who made Try OCaml and other online playgrounds! It was made possible thanks to the invaluable js_of_ocaml-toplevel library, the magical merlin-js by @voodoos, the excellent CodeMirror bindings by @patricoferris, the guidance of @Julow on ocamlformat and the javascript expertise of @xvw.