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@2/x-ocaml.js"
  src-worker="https://cdn.jsdelivr.net/gh/art-w/x-ocaml.js@2/x-ocaml.worker+effects.js"
></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.

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.