package elm_system

OCaml Elm Playground

Create pictures, animations, and video games with OCaml!

This is a port of the excellent Elm playground package https://github.com/evancz/elm-playground to OCaml.

Documentation

• Getting started (this file)
• Tutorial
• Basic examples
• Basic games
• API reference
• Index
• Changelog

Features

The OCaml elm_playground package allows you to easily create pictures, animations, and even video games in a portable way using an API that really simplifies how to view the computer and its devices (the screen, keyboard, and mouse).

The goal is similar to the old graphics package but goes even further in terms of simplification.

The main API is defined in a single Playground.mli module and is implemented by two backends:

• a native (SDL-based) backend to run your game on your desktop from a terminal
• a web (vdom-based) backend to run your game in a browser

Here is for example a simple Snake game you can run from your browser (use the arrow keys to change the direction of the snake and eat the ball to grow your length). You can run the same game on your desktop without changing a line of code.

Install

To install the playground, run opam install elm_playground and then install one or both backends with opam install elm_playground_native and/or opam install elm_playground_web.

Simple native application

Here is a very simple application using the playground:

open Playground

(* the (x, y) position of the blue square  *)
type model = (float * float)

let initial_state : model = (0., 0.)

let view _computer (x, y) = [ 
  square blue 40.
   |> move x y
 ]

let update computer (x, y) =
  (x +. to_x computer.keyboard, y +. to_y computer.keyboard)

let app = 
  game view update initial_state

let main = Playground_platform.run_app app

It is a very simple game defining a model type, a view function, and an update function to specify how the game behaves. It is using the "Model-View-Update" architecture to organize the code of a graphical interactive application (see https://guide.elm-lang.org/architecture/ for more information).

To compile this application, simply do:

$ cd docs/toy-native-example
$ opam install --deps-only --yes .
$ dune exec --root . ./Toy.exe

You should then see on your desktop:

If you type on the arrow keys on your keyboard the blue square should move in the corresponding direction. If you type q it will exit the game.

Note that with the Playground API the center of the screen is at (0, 0).

Simple web application

To compile this same application for the web, simply do:

$ cd docs/toy-web-example
$ opam install --deps-only --yes .
$ dune build --root .
$ cp _build/default/Toy.bc.js static/

You should then be able to use the web app by going to: https://aryx.github.io/ocaml-elm-playground/toy-web-example/static/Toy.html

By default the generated javascript file can be big so to get a smaller one you can do instead:

$ dune build --root . --profile=release
$ cp _build/default/Toy.bc.js static/

Next steps

Read the tutorial at: https://aryx.github.io/ocaml-elm-playground/elm_playground/

Look at the code under examples/ and games/.

Here is a screenshot of the Tetris Playgound game running:

You can even try it online here

You can see a few more screenshots here.

AI disclaimer

The API and ideas behind the code of this library are the work of Evan Czaplicki for Elm at https://github.com/evancz/elm-playground I (Pad) mostly ported the API and ideas, as well as some of the web backend code, to OCaml. I then added also a native backend (using tsdl), which was not in the Elm version (Elm is a web language). The final library is very small, less than 3000 LOC.

I recently (Sep 2026) used Claude Code to fix many small bugs and now about 20% of the code is written by Claude Code (especially the code to handle animaged GIFs).