Hi there,
Introducing Roclet: reactive notebooks in Roc, running in your browser (even offline).
Here's a quick intro video (the top is a bit cropped, sorry about that).
Roclet.mp4
Huge thanks to @Luke Boswell who helped a lot with this! :folded_hands:
Super cool, it already looks very polished :sparkles:
Cool logo too :)
We could try porting some examples to see if this is a better format :eyes:
Very excited! It reminds me very strongly of Elixir's Livebook in UI and features. I like how it tells you if an output is stale, although the indicator for this (a kind of stuck loading circle) isn't the most intuitive imo. To expand on the rich outputs, Livebooks have a cool feature called smart cells, which is basically some nice UI over doing graphs, sql queries/results, process monitoring etc. The key feature being that you can 'expand' the cell to convert it into an ordinary Elixir cell with the equivalent function.
I would also love a way to run this in the context of a local project and import modules, or perhaps install local projects.
Looks great! What do you do use for rendering markdown? (see https://ageron.github.io/roclet/web/edit.html)
Cool project! What prevents the packages to loaded automatically? Why is the manual download and upload needed?
Jonathan said:
Very excited! It reminds me very strongly of Elixir's Livebook in UI and features. I like how it tells you if an output is stale, although the indicator for this (a kind of stuck loading circle) isn't the most intuitive imo. To expand on the rich outputs, Livebooks have a cool feature called smart cells, which is basically some nice UI over doing graphs, sql queries/results, process monitoring etc. The key feature being that you can 'expand' the cell to convert it into an ordinary Elixir cell with the equivalent function.
Thanks Jonathan! Yes, Livebook was one of the main sources of inspiration.
You're right about the stale result indicator, I'll try to improve that. Any suggestions?
I like smart cells too, good idea.
Jonathan said:
I would also love a way to run this in the context of a local project and import modules, or perhaps install local projects.
You can install the Roclet server: this solves the package download hassle, and allows you to open a folder and access it's notebooks more easily (UI to be improved).
Steve Howell said:
Looks great! What do you do use for rendering markdown? (see https://ageron.github.io/roclet/web/edit.html)
Thanks Steve! Roclet uses CodeMirror 6 for the editor, with different highlighting sources:
notramo said:
Cool project! What prevents the packages to loaded automatically? Why is the manual download and upload needed?
Thanks notramo! Yeah, that's the most annoying limitation of serverless Roclet: it's due to CORS–the browser prevents a script on one website from reading data from a different website—unless that website explicitly grants permission using CORS headers.
The simplest solution is to make the server fetch the packages, but this is not possible on a static website (currently Roclet is hosted on Github Pages = static). For now you can install the Roclet server locally, it solves the problem.
In the short term I can make all the most common packages (including all the ones used in the demos) available on the website, so at least users won't get the download/load experience while trying out Roclet. Or we could provide bundles containing notebooks + package dependencies.
I thought the Github API allows any origin.
A small Cloudflare worker could solve this. What about adding a default, centralized worker for serverless deployments? There's plenty of bandwidth in the Cloudflare free plan, and Vercel too. Maybe Netlify also, but they had issues with uncapped billing, so be sure to check the auto-recharge option, and set to "off". This does not exist on older Netlify accounts, those are uncapped!
This is incredibly cool! I agree with Anton - this could be a great format for publishing examples and tutorials.
Thanks for the tips @notramo , I'm more of an ML & backend guy, so I'm grateful for any advice you can give me regarding web stuff. :+1:
notramo said:
A small Cloudflare worker could solve this. What about adding a default, centralized worker for serverless deployments? There's plenty of bandwidth in the Cloudflare free plan, and Vercel too.
I considered this and thought it would be good to have the option for it to be completely static, to avoid the hug of death. :smile:
I didn't think the UX was too bad if users have to download a package for the free web experience.
I considered this and thought it would be good to have the option for it to be completely static, to avoid the hug of death. :smile:
Then maybe add graceful degradation.
So if traffic is low, it works automatically, and if the quota is exhausted, it falls back to the current behavior. Set the spending limit to $0, so it won't cause any unexpected costs if the free plan is fully used.
However, I find it highly unlikely that Roc would suddenly get that much popular.
the hug of death comes from something getting on hacker news (such as the 0.1.0 announcement, which I plan to link to various community projects from, such as this one :smile:)
avoiding the hug of death is one of the reasons we have a web repl on roc-lang.org that runs completely in the browser, where most languages kick out to a server for something like that
the main problem with the hug of death is that right when you have the most people trying to check out what you've made, that's exactly when it goes down and prevents them from checking it out!
The free plans are more than enough, even if it gets on Hacker News.
are you sure about that? :face_with_raised_eyebrow:
But more importantly: if graceful degradation is added, the worst case scenario is the current default behavior.
how many concurrent requests do they permit?
I don't know, but it doesn't really matters. If the quota is exhausted, it falls back to the current manual upload.
Without a worker: manual upload for everyone.
With a worker: automatic for some people, then manual upload only for some.
I just found an important info: the Cloudflare caching terms forbids a disproportionate amount of non-HTML content, so it may not be allowed.
Need to check the Vercel and Netlify terms, they may have similar rules.
Anton said:
We could try porting some examples to see if this is a better format :eyes:
Roclet supports loading from a gh gist. One of the examples (the garden plan one) is just pointing at a gist I made. So anyone could make a gist and share a link like this
https://ageron.github.io/roclet/web/edit.html?gist=ab17cb796239be901ec0436f919d39bb
Which corresponds to this gist
https://gist.github.com/lukewilliamboswell/ab17cb796239be901ec0436f919d39bb
That example was intentionally using a local package, to show how you might organise information to hide implementation details -- they're still there just not polluting the notebook reader view
Last updated: Nov 04 2026 at 18:54 UTC