Sponsored by AppSignal
Would you like to see your link here? Contact us
Notesclub

p5js inside Livebook

livebooks/p5js_inside_livebook.livemd

p5js inside Livebook

Mix.install([
  {:kino, "~> 0.9.3"}
])

P5js code

defmodule P5js do
  use Kino.JS

  def new(html) do
    Kino.JS.new(__MODULE__, html)
  end

  asset "main.js" do
    """
    export function init(ctx, html) {
      ctx.importJS("https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.js");
      ctx.importJS("https://cdn.jsdelivr.net/gh/adolfont/adolfont.github.io/js/sketch.js");

      ctx.root.innerHTML = html;
    }
    """
  end
end

P5js.new("

Testing p5js inside livebook

"
)