Website Echo Platform · contributing

Stream: contributing

Topic: Website Echo Platform

Luke Boswell (Jun 01 2026 at 01:18):

If anyone is interested in helping out and looking for a project to poke at, here is an idea.

We have an interpreted wasm build of the compiler which includes the builtin echo platform. The purpose of this is to provide interactive functionality in the tutorial on the website, and it's also builtin to the cli so anyone with roc is able to copy-paste examples and be up and running before they learn about platforms etc.

I believe all the parts are built and working in isolation. You can run the example by serving the files in zig-out/lib/ after zig build. It would be great if anyone is interested in updating the website and wiring this up so we can use that.

There are some details here to experiment with like maybe the wasm module should be loaded lazily, or how to make the UX nice.

Let me know if you're interested in looking at this.

Stephan (Jun 15 2026 at 18:28):

Hi Luke,

i am interested in this and took a look at the WASM Roc compiler. I compiled the compiler with zig and served the /zig-out/lib/ folder locally. First i was unable to run the example because of an OutOfMemory error in Firefox and Edge.

After some ai assistance i could resolve the issue by changing the following code:

build.zig line ~2996: add echo_wasm.import_memory = false; (+ explicit initial_memory / max_memory / stack_size for cross-browser consistency)
echo.zig line ~42: bump wasm_heap_memory from [128 * 1024 * 1024]u8 to [512 * 1024 * 1024]u8

I have no experience in zig or building WASM. According to the ai agent there are these two issues:

build.zig: The echo_wasm build step was missing import_memory = false. Without it, the WASM module imports memory from the host, but app.js doesn't supply a WebAssembly.Memory in its importObject (it accesses memory as wasm.instance.exports.memory). This mismatch causes the WASM runtime to operate with incorrectly-sized memory.
src/echo_platform/echo.zig: The FixedBufferAllocator heap was 128 MiB, matching the recommendation in src/compile/README.md. However, on WASM that's not enough. The FixedBufferAllocator is a bump allocator — free() is a no-op, so every allocation during BuiltinModules.init (deserializing the compiled builtin module via loadCompiledModule, then TypedCIR.Modules.init, then CheckedArtifact.publishFromTypedModule) consumes permanent space. The cumulative allocations exceed 128 MiB.

Maybe you can check if this is really an error and needs to be changed or if the OutOfMemory error is somehow related to my machine.

After that i build an example page with the wasm build and some roc examples. The wasm is lazy loaded on clicking the first "Run" button.

You can see the result here:

https://stephdin.github.io/roc-examples-wasm/

I tried to build everything as simple as possible (static html and js) so that later in the examples page we can just write:

<h2>Hello, World!</h2>
<p>
    A Roc program starts with a <code>main!</code> function. The
    <code>!</code> at the end of the name means it's an
    <em>effectful function</em>, it can run side effects like printing.
    <code>echo!</code> prints a line of text to the output.
</p>

<pre class="roc-example">
main! = |_| {
    echo!("Hello, Roc!")
    Ok({})
}
</pre>

The script replaces every "roc-example" class with a text-area, output and the run button.

Let me now what you think! The simple code is here: https://github.com/stephdin/roc-examples-wasm

I am currently trying to figure out, how to integrate this into the current website.

Maybe you can give me some hints, where the examples should be located and how they could be integrated in the current page and if this is even the direction you want this to be going :)

Stephan (Jun 15 2026 at 22:13):

I looked at the build_website script and how everything is currently handled and i think the integration should be quite straightforward.

If we want to get wasm compiler working in a tutorial or in the examples we would need to:

add the current wasm build to the nightlies
download it in the build_website script
inject the wasm lazy loading and replacement js into the static_site_gen script
use the correct class for every roc snippet, that we want to have runnable
port the examples to the new syntax and add relevant class

The only issue i see is syntax highlighting . A simple text-area does not support highlighting, so we need to either switch to something more complex (e.g. codemirror) or be okay with no syntax highlighting for the moment.

Luke Boswell (Jun 15 2026 at 22:42):

Wow this is awesome :heart_eyes:

Luke Boswell (Jun 15 2026 at 22:46):

I'm impressed with how small you managed to get the compiler wasm binary. It's only 1.5MB which seems totally reasonable to me for the full pipeline and interpreter.

Luke Boswell (Jun 15 2026 at 22:52):

Do we need to patch the current implementation in roc-lang/roc so it builds correctly? That would be a PR I assume.

For adding it to the nightlies, I think it is this repository https://github.com/roc-lang/nightlies/ -- would you be happy to make a PR for that?

I think no syntax highlighting is acceptable for now. We can always improve it later once we have the core functionality working.

For a first step I think we could add a single demo under the Examples header on the front page i.e. https://www.roc-lang.org/#examples -- once we have everything wired up and working end to end, the second step I think would be to start thinking about lifting something like the mini tutorial into a proper page and sprinkle a few examples in there.

This would be a really great foundation for Richard to launch from with all the new content he has been prepping for the new tutorial. We can work on the styling, functionality of integrating the runnable Echo exercises, CI integration etc decoupled from the content.

Luke Boswell (Jun 15 2026 at 22:54):

Also I think the website lives here now https://github.com/roc-lang/www.roc-lang.org

Luke Boswell (Jun 15 2026 at 22:55):

Let me know if there is anything you would like me to help with. Also I'm sure @Anton will be happy to review or help with any PR's for this. He is really good with the website setup and infrastructure.

Stephan (Jun 16 2026 at 11:04):

Thank you!

I build the compiler normally and it generated the echo.wasm, which is 6.7MB on disk, which is then probably gzipped on the fly. It is really amazing that the whole compiler and echo platform is running in the browser in a few MBs.

I can open a PR for the changes for compiling the WASM compiler. I compiles fine without them, but i could not get it to run without these changes in a browser. Has anyone else hit the same OutOfMemoryError?

I opened a PR for including the WASM artifact in the nightlies (https://github.com/roc-lang/nightlies/pull/15).

This is all quite exciting and fun, i will open the PRs for roc-lang/roc and a the website later :)

Adding a single working example/demo on the front page is a good idea.

Anton (Jun 16 2026 at 11:53):

Thanks @Stephan, I will try to review you PR today!

Anton (Jun 16 2026 at 14:48):

First i was unable to run the example because of an OutOfMemoryerror in Firefox and Edge.

I think this happens if you do not build with -Doptimize=ReleaseSmallbut I'm not 100% sure. If that is the problem, we should make that flag the default (for wasm) and print a warning if the ReleaseSmall flag was not passed.

Last updated: Jun 16 2026 at 16:19 UTC