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:

1. 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.

2. 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.

Stephan (Jun 16 2026 at 16:19):

Thanks Anton! So i tried running the zig compilation again with -Doptimize=ReleaseSmall but then the error appears again. That is what i do: i am pulling the latest main from git and :

zig build build-echo-wasm -Doptimize=ReleaseSmall
cd .\zig-out\lib\
python -m http.server 8000

As soon as i click on run, there is an error shown below : echo: step 'BuildEnv.init' failed: OutOfMemory

Should i open an issue for this? I suspect that maybe there is something wrong when i build this on my machine (i am on windows), because otherwise Luke would've run into this weeks ago?

I also let DeepSeek explore the build.zig and there isn't any windows specific going on for the wasm build. The optimization is also already hardcoded for the echo platform (build.zig, line 3154, .optimize = .ReleaseSmall,).

Thanks for looking at the PR, i will adress the issue :)

Anton (Jun 16 2026 at 16:27):

Thanks for the additional details @Stephan, I will investigate and fix this tomorrow (probably).

Anton (Jun 17 2026 at 16:47):

I will investigate and fix this tomorrow (probably).

I want to finish #9600 first to avoid merge conflicts.

Stephan (Jun 18 2026 at 11:24):

Great! So the PR for building the WASM compiler in the nightly got merged. I am not seeing the wasm in the artifacts, but i think it should be build in todays nightly. Then i can also check again, if this wasm works out of the box in my browser.

I played a bit around and added an example to the front page. I will open a draft PR later, after i check, that the downloading of the compiler wasm in the website build-script works. I also used the current style for consistency.

I tried to find an example, that shows some features of roc, like static dispatch. But it would be nice to get your opinions on what we should show as an example an how we can improve the communication for the new syntax.

Luke Boswell (Jun 18 2026 at 12:21):

I wouldn't stress too much about which example. I think the priority is just to get it integrated and working well. That example looks good to me.

Stephan (Jun 18 2026 at 19:15):

Yeah you're right :) I opened a PR for the website, with the interactive code widget on the frontpage (https://github.com/roc-lang/www.roc-lang.org/pull/75)

The OutOfMemoryError also happend with the latest nightly build from CI. As soon as this error is fixed, the code widget should work. I tested this with my workaround:

Stephan schrieb:

• 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

Last updated: Jul 23 2026 at 13:15 UTC