Installation
-
Add Popcorn to your dependencies
Add the following to your
mix.exs
file:mix.exs {:popcorn, github: "software-mansion/popcorn"} -
Configure Popcorn
Create or update your
config.exs
file:config.exs config :popcorn,start_module: HelloPopcorn,out_dir: "static/wasm" -
Create your entrypoint module
Define a module that will serve as your application’s entry point:
hello_popcorn.ex defmodule HelloPopcorn dodef start() doPopcorn.Wasm.register("main"):okendend -
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>
Popcorn file structure
Section titled “Popcorn file structure”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