OCaml (JS)

OCaml is an industrial-strength programming language supporting functional, imperative and object-oriented styles.

LiveCodes runs the OCaml compiler itself, built with js_of_ocaml, so compilation happens in the browser and nothing is sent to a server. The compiler emits a JavaScript program, which the result page then runs.

Note

LiveCodes also has an ocaml language, which runs the ReScript compiler. It is deprecated in favour of this one. Read documentation here.

Demo

show code

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
createPlayground('#container', options);

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
  return (<LiveCodes {...options} />);
}

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "params": {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  }
};
  return (<LiveCodes {...options} />);
}

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.params = {
    "ocaml-js": "let () =\n  print_endline \"Hello, World!\"\n",
    "console": "full"
  };
</script>

Usage

LiveCodes runs OCaml in the browser, including the standard library.

Because the compiled program is JavaScript by the time it runs, it can interact with the page. JavaScript interoperability and DOM access come from js_of_ocaml's Js and Dom_html with open Js_of_ocaml (see the example below).

Modules and Libraries

The standard library is always available. Beyond it, these are linked on demand — the archive is fetched the first time a program names one of its modules, so a program that uses none of them downloads none of them.

js_of_ocaml — Js, Dom_html, and the rest of the browser APIs
Str, Unix, Graphics — from the OCaml distribution
Lwt, js_of_ocaml-lwt — promises and concurrency
Re — regular expressions
jsonm, xmlm, uutf — JSON, XML and Unicode text
fmt, logs — formatting and logging
base64 — base64 encoding
Zarith — Z and Q, arbitrary-precision integers and rationals

Everything here runs in the browser, so a library has to be pure OCaml, or have a JavaScript replacement for its C stubs — Zarith's are provided by zarith_stubs_js. Anything needing real threads, processes or a filesystem will not work, whatever is linked.

This is the set built with the compiler. Other opam packages are not available.

Language Info

Name

ocaml-js

Extensions

js.ocaml, js.ml

Editor

script

Compiler

The OCaml compiler — the same compiler-libs frontend that compiles ordinary OCaml — compiled to JavaScript with js_of_ocaml. It is published as @live-codes/ocaml.

Version

@live-codes/ocaml: v0.2.0

Code Formatting

Not supported.

Limitations

There is no ppx support, since a ppx would have to run at compile time and compilation happens at run time here. So ##, ##. and [%js] are not available; use Js.Unsafe and the rest of the bindings instead.

Example Usage

This example counts button clicks in the DOM, using Dom_html:

show code

import { createPlayground } from 'livecodes';

const options = {
  "template": "ocaml-js"
};
createPlayground('#container', options);

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "template": "ocaml-js"
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "ocaml-js"
};
  return (<LiveCodes {...options} />);
}

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "template": "ocaml-js"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "ocaml-js"
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "ocaml-js"
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "ocaml-js"
};
  return (<LiveCodes {...options} />);
}

<live-codes
  template="ocaml-js"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

Starter Template

https://livecodes.io/?template=ocaml-js

Demo​

Usage​

Modules and Libraries​

Language Info​

Name​

Extensions​

Editor​

Compiler​

Version​

Code Formatting​

Limitations​

Example Usage​

Starter Template​

Links​