Luke Boswell (Jul 14 2025 at 10:59): Luke Boswell (Jul 14 2025 at 10:59):https://github.com/roc-lang/roc/pull/8031
I've made a WASM playground to experiment with. I wanted to be sure we could build for the browser. and figured I'd have some fun with it. It doesn't do much other than compile a single file and show the diagnostics/tokens/AST/CIR (types are a little broken). I haven't really looked closely at the code -- it's a very rough draft.
If we would be open to having something like this include in the repo, I don't mind modifying it. My idea was to have something minimalistic or simple that demonstrates how to build for WASM and integrate with the browser.
Interested to know what people think?
Kiryl Dziamura (Jul 14 2025 at 11:12):Dope!
Richard Feldman (Jul 14 2025 at 11:28):yeah please do put it in the repo! :smiley:
Richard Feldman (Jul 14 2025 at 11:28):let's plan to have it on the website
Kiryl Dziamura (Jul 14 2025 at 11:44):Would be nice to encode content in url
Anton (Jul 14 2025 at 12:20):It already looks great :)
Richard Feldman (Jul 14 2025 at 14:12):Kiryl Dziamura said:
Would be nice to encode content in url
yeah this would be sweet because then we don't need a server to make these shareable
seems hard to find reliable sources on it, but this post suggests 32K maximum URL length - https://medium.com/@python-javascript-php-html-css/recognizing-the-maximum-url-length-for-different-browsers-ff275903b970
Kiryl Dziamura (Jul 14 2025 at 14:13):my first thought was gzip->base64
Richard Feldman (Jul 14 2025 at 14:15):that could work! I'm not sure how well gzip compares to original after paying for base64 though :shrug:
Kiryl Dziamura (Jul 14 2025 at 14:20):from what I remember it's comparable with the original
Kiryl Dziamura (Jul 14 2025 at 14:21):but lz77 is great for text so I expect it would work pretty good. anyway, will check how ts playground does it
Kiryl Dziamura (Jul 14 2025 at 14:26): if (location.hash.startsWith("#code")) {
const code = location.hash.replace("#code/", "").trim()
let userCode = lzstring.decompressFromEncodedURIComponent(code)
// Fallback incase there is an extra level of decoding:
// https://gitter.im/Microsoft/TypeScript?at=5dc478ab9c39821509ff189a
if (!userCode) userCode = lzstring.decompressFromEncodedURIComponent(decodeURIComponent(code))
return userCode
}
well, they use the lzstring method:
so it's a bit fancier than base64
Richard Feldman (Jul 14 2025 at 14:26):cool!
Kiryl Dziamura (Jul 14 2025 at 14:29):they use base65 (65 chars in the alphabet) :smile:
Kiryl Dziamura (Jul 14 2025 at 14:43):if we fully control parsing of the hash fragment, we can afford base81:
A-Z a-z 0-9 - _ . ~ ! $ & ' ( ) * + , ; = : @ / ?
I've been thinking about what the next step for our playground might look like.
I'm wondering if we should consider integrating something like Monaco or CodeMirror instead of just using a textarea. I think this means we can provide syntax highlighting and type hints on hover etc.
Interested to know what people think or if there are any ideas out there.
Richard Feldman (Jul 18 2025 at 00:33):yeah I do think we should do that
Richard Feldman (Jul 18 2025 at 00:34):I very much want to avoid using npm for anything
Richard Feldman (Jul 18 2025 at 00:34):ideally no package.json anywhere in the whole repo :stuck_out_tongue:
Richard Feldman (Jul 18 2025 at 00:34):(I know we have one for Checkmate right now, but that's obsolete and won't survive the transition to the Zig compiler)
Richard Feldman (Jul 18 2025 at 00:35):so if there's a way to get those features without npm, I'm all for it!
Luke Boswell (Jul 18 2025 at 00:45):We could use a CDN build of codemirror, or build one ourselves locally, and vendor the minified js I guess.
Richard Feldman (Jul 18 2025 at 01:40):yeah vendoring sounds good :thumbs_up:
Richard Feldman (Jul 18 2025 at 01:40):grab a pre-bundled/minified version
Richard Feldman (Jul 18 2025 at 01:41):or just bundle/minify it once - I think CodeMirror is the modular one, right? where you use different files to specify which features you want
Luke Boswell (Jul 18 2025 at 01:42):I'm not 100% -- I figure I'd set something minimal up locally with everything we needed then build a release using Parcel or something and use that. I imagine we want to DCE things and I assume tooling would do that for us.
My web experience is very limited though
Richard Feldman (Jul 18 2025 at 02:22):that seems fine - would also be fine to put it in a separate roc-lang repo I suppose
Richard Feldman (Jul 18 2025 at 02:22):and then we just do releases from there and vendor the compiled asset
Nathan Kramer (Jul 18 2025 at 03:56):Hi :)
Is the playground live somewhere? I'm curious to try it
Luke Boswell (Jul 18 2025 at 03:56):Not live... but easy to spin up. zig build playground then serve the files in ./zig-out/playground
Luke Boswell (Jul 18 2025 at 03:57):I usually do zig build && simple-http-server -i -nocache ./zig-out/playground
Nathan Kramer (Jul 18 2025 at 04:16):Very cool. Nicely done.
Luke Boswell (Jul 19 2025 at 11:28):Ok, I've published the playground to a GH Pages site
https://roc-lang.github.io/roc-playground/
The compiler is still very much a WIP, but I wanted to share with everyone here working on the new compiler. It's already super helpful for exploring the new syntax and finding issues.
If you have ideas to improve it please make a PR to this repository :smiling_face:
The WASM asset is hardcoded, we can setup something in CI I guess to build that and update. I figured I'd leave that for a future PR -- if anyone is interested.
Luke Boswell (Jul 31 2025 at 08:43):Just pushed an update https://roc-lang.github.io/roc-playground
If you check it out, can you try and break it and let me know. Trying to flush out bugs or issues.
Tobias Steckenborn (Jul 31 2025 at 12:22):Minor annoyance, though that might be not playground related: Loading the playground you start with a comment. When removing a character from that comment there's an error that you should start with a module header. I can see that as useful if I'd had written code before doing that. But not necessarily for me still writing comments :D
Luke Boswell (Aug 01 2025 at 00:03):What do you think about changing the default to be a minimal roc module. Something like this?
module [add]
add = |a, b| a + b
FYI the hello world, functions, and pattern matching examples you can click at the bottom all show up with errors - not sure if this was an accident or intentional to show the playground editor features, but I might suggest not having the hello world example have an error in it? I feel for that to be there on the simplest example, it gives the impression that things are really broken, for someone coming to the page for the first time.
Anton (Aug 01 2025 at 13:58):all show up with errors
Yeah, it's using the new compiler which is still a work in progress
Luke Boswell (Aug 08 2025 at 04:33):Pushed an update https://roc-lang.github.io/roc-playground/
Again... if people find any issues please let me know :smiley:
Tobias Steckenborn (Aug 08 2025 at 04:59):Is it expected that the samples on the bottom (e.g. the functions and pattern matching ones) contain "problems" for now?
Luke Boswell (Aug 08 2025 at 05:16):Yea -- the compiler is very much a WIP and I've included things more to show the 0.1 syntax. As the features get implemented these errors have been rapidly dissapearing :smiley:
Last updated: Jun 16 2026 at 16:19 UTC