Skip to content

Installation

  1. Add Popcorn to your dependencies

    Add the following to your mix.exs file:

    mix.exs
    {:popcorn, github: "software-mansion/popcorn"}
  2. Configure Popcorn

    Create or update your config.exs file:

    config.exs
    config :popcorn,
    start_module: HelloPopcorn,
    out_dir: "static/wasm"
  3. Create your entrypoint module

    Define a module that will serve as your application’s entry point:

    hello_popcorn.ex
    defmodule HelloPopcorn do
    def start() do
    Popcorn.Wasm.register("main")
    :ok
    end
    end
  4. Initialize Popcorn in your HTML

    Add the following script to your HTML file:

    <script type="module">
    import { Popcorn } from "./wasm/popcorn.js";
    await Popcorn.init({ onStdout: console.log });
    </script>
  • Directoryyour-app/
    • Directorystatic/
      • Directorywasm/
        • popcorn.js Initializes Popcorn, allows Elixir communication
        • popcorn-iframe.js Manages Wasm module, internal
        • AtomVM.wasm Compiled AtomVM runtime
        • AtomVM.js Runtime glue code for browser APIs
        • app.avm Bundled Elixir bytecode
    • index.html