Anton (Jul 01 2026 at 18:00): Anton (Jul 01 2026 at 18:00):@Stephan added a code example on the Roc homepage that you can run with the wasm compiler :shocked:
Check it out at the preview url and run it so we can be sure it works for everyone, other feedback is welcome too.
We did not add syntax highlighting yet, that is for a follow-up.
Tobias Steckenborn (Jul 01 2026 at 18:07):Looks good!
Would be great to get output on https://roc-lang.github.io/roc-playground as well :zany_face:
Anton (Jul 01 2026 at 18:10):I have added it to my TODOs but there are currently 24 TODOs above it :sweat_smile:
Austin Clements (Jul 01 2026 at 19:17):Love it! It worked in chrome on my iphone including making a code edit
Stephan (Jul 01 2026 at 20:22):Thanks @Anton for testing, merging and the visual upgrades! Yeah i think i will look into syntax highlighting next, that would be nice.
Tobias Steckenborn schrieb:
Would be great to get output on https://roc-lang.github.io/roc-playground as well :zany_face:
I would love to poke around in the playground at some point
Richard Feldman (Jul 01 2026 at 21:22):this is so cool!!! :star_struck::star_struck::star_struck:
amazing work, @Stephan!
Aurélien Geron (Jul 01 2026 at 21:33):Very cool! Maybe drop_if(|todo| todo.done) rather than keep_if(|todo| !todo.done)? It's a tiny detail, but I feel like it's easier to parse.
Richard Feldman (Jul 01 2026 at 21:52):We did not add syntax highlighting yet, that is for a follow-up.
has anyone started on this yet? I have thoughts on how to do it efficiently!
Luke Boswell (Jul 01 2026 at 22:04):We've only got the grammars -- our previous solution in the rust compiler used the tokenizer. I disabled the highlighting in e.g. roc docs until we ported something across.
Luke Boswell (Jul 01 2026 at 22:04):So afaik no-one is working on anything
Richard Feldman (Jul 01 2026 at 22:25):ah I actually think a different solution makes sense for this vs docs, but if nobody's working on it I can take it!
Richard Feldman (Jul 01 2026 at 22:26):is the code for this pushed somewhere so I can build it?
Luke Boswell (Jul 01 2026 at 22:30):Pushed for what? build.zig produces the echo.wasm module
Luke Boswell (Jul 01 2026 at 22:31):I wasn't sure how we would do syntax highlighting in the browser. It's currently a text field, but I assume we would want to embed a code editor widget or something for highlighting?
Richard Feldman (Jul 01 2026 at 22:34):nah we can do something simpler
Richard Feldman (Jul 01 2026 at 22:35):Luke Boswell said:
Pushed for what? build.zig produces the echo.wasm module
oh it's already landed in the roc-lang/roc/ repo somewhere?
Luke Boswell (Jul 01 2026 at 22:39):Are you asking about this? https://github.com/roc-lang/roc/tree/main/src/echo_platform
Luke Boswell (Jul 01 2026 at 22:40):The echo platform has been in the repo for a while.
@Stephan fixed it and helped us to wire it into the roc-lang.org
Stephan (Jul 01 2026 at 22:40):Thanks Richard, the hard work was already done by @Luke Boswell and others, i just wired the compiler wasm into the website.
I assumed we use something like codemirror as the code editor, which needs some grammar. Basically the same system as the playground
Richard Feldman (Jul 01 2026 at 22:47):yeah sorry, the wiring into the website part is what I'm looking for, not the echo platform :smile:
Luke Boswell (Jul 01 2026 at 22:48):Stephen if you are interested in working on the playground... I should probably track down some details on the roc tooling plans we discussed a while back.
Basically, in the same way we have roc glue, you can do roc tooling and provide the cli a .roc plugin to run.
For glue the cli provides a structured list of types from the provided platform, which the script can then use to code generate the interface... e.g. make a C or Zig library for that specific platform.
For tooling, the general idea was to provide various internals like the AST etc so you could manipulate roc code in a programatic way -- instead of regex or stringly replacing things.
How this relates to the playground... currently the playground does all kinds of strange things to reach into the compiler internals to present details like the AST or CIR etc. But if we refactored that around the tooling capability it would be a much simpler, way less fragile, and we can extend it with more capability easily.
This would also have the benefit of building out the tooling capability -- which currently is just a rough idea.
Since the playground was made the compiler internals have evolved a lot. So it would be awesome to start exposing more of those, like the LIR etc.
Richard Feldman (Jul 01 2026 at 22:48):like the "here is the textarea that connects to the wasm build of the compiler with the Run button that sends its contents to the compiler and prints the results in the other element below it" part
Luke Boswell (Jul 01 2026 at 22:48):@Richard Feldman see https://github.com/roc-lang/www.roc-lang.org/pull/75
Richard Feldman (Jul 01 2026 at 22:49):sweet, that's exactly what I'm looking for! :smiley:
thanks!
Notification Bot (Jul 01 2026 at 23:55):A message was moved from this topic to #contributing > Roc playground by Luke Boswell.
Stephan (Jul 01 2026 at 23:56):As for the interactive roc code widget, it would be super nice, if we can get syntax highlighting to work easily and then be able to use it wherever we like on the website with a simple html class. I think a tutorial for the language in which the user can just try changing the code or doing small exercises would be super valuable. It also would be nice to have all the examples interactive and I would love to help port them over, when the rest is ready.
Richard Feldman (Jul 02 2026 at 23:17):
PR into preview for syntax highlighting
Last updated: Jul 23 2026 at 13:15 UTC