Created bySoftware Mansion

Elixir in your browser⁠.

Popcorn runs Erlang/OTP in WebAssembly, allowing you to reuse your Elixir code on frontend.

mix install popcorn

Features⁠?

Just plain Elixir

Supervisors, GenServers, and any other OTP components just work. The VM runs off the browser's main thread, so a busy process never freezes the page.

Optimised for the web

Under 1 MB of compressed Wasm, with around 2.9 MB for Elixir and the OTP standard library. It boots in about 200 ms. Getting there meant cutting what the browser has no use for — native sockets, distribution, dynamic module loading, crash dumps.

Your dependencies come with you

Req, Jason, Ecto, even Phoenix Live View compile and run unmodified. The bundler packs your whole dependency closure, so there's nothing to list.

Call Elixir from JavaScript (and vice versa)

Communicate with Elixir processes, exchange data, run JS from Elixir code.

const result =
  await popcorn.genserver.call(
    "counter",
    ["add", 1],
  );
if (result.ok) {
  console.log(result.data);
}

Use cases⁠.

Local LiveView

Use LiveView in the frontend

You can use familiar Phoenix LiveViews to create local UI. Makes your app work even when the internet connection is spotty.

Learn more →
Elixir Language Tour

Learn Elixir

We created Elixir Language Tour for Elixir newcomers. It's a great start to learn functional programming. It covers base types, pattern matching, functions, processes, and OTP patterns. Uses Popcorn under the hood.

Demos⁠!

Loading runtime…
Memory
Total memory
processes
binary
code
ets
atom + other
Processes
Top processes
Processes
no processes yet
Reductions/s
Load
run queue
reductions / sReductions count the work performed by the BEAM VM each second.
processes / max
gc runsGarbage collection runs reclaim memory from BEAM processes.
uptime

Starting the Elixir runtime