Export WASM to folder for self-publishing on personal web site

[akshayka]

Discussed in https://github.com/marimo-team/marimo/discussions/1078

^{Originally posted by astrowonk April 5, 2024} marimo.app is very cool and I was excited to see the WASM support. But, WASM apps should be able to just be turned into a folder than can deployed on any web server (nginx, apache, etc.) Shiny Live for example has an easy shinylive export myapp site command that turns the app into a folder I can upload to my nginx server.

Whereas for now, wasm notebooks seem to require using marimo.app. Is there a plan to have an export option someday? Thanks!

[akshayka]

Some follow up from that discussion:

We don't support such an export yet. In the meantime, one can iframe marimo.app URLs (https://docs.marimo.io/guides/wasm.html#embedding).

@astrowonk mentioned working with local files as a use case that makes marimo.app links difficult to use. We do have a beta sandbox that lets you attach files to WASM notebooks, via the browser's storage; I'm not actually sure how you'd do it via a static export.

@astrowonk and others who have requested this: are local files the only reason you need exports? We'd appreciate more feedback before going down this route, since it will take us some time.

[astrowonk]

I would say I have a few reasons for wanting WASM export, though I could be in the minority so even if this is important to me, it is no guarantee it's worth your development time (yet.)

• Ownership. I prefer to host my own things when possible. I can deploy a Marimo app myself via uvicorn ,so it'd be nice to own / host the WASM apps too (but not require spinning up a bunch of new infrastructure/ reverse proxy, etc.)
• Using Marimo to demo/show off a new module/repo. I would imagine I'd use Marimo in some ways like I use Streamlit or Dash. I develop some new project/class/code. Then I have a Marimo notebook in the same git repo that uses whatever I wrote to show off what the code can do. The repo/folder may contain other code, data, etc. Exporting all that to a WASM app would be pretty nifty; as I wouldn't have to deploy any new server.
• Proprietary code/data In a work context, I could imagine using Marimo to show dashboard-like data for monitoring our systems and/or algorithms. Putting a Marimo notebook + some local data file (parquet, csv, etc.) and then exporting to WASM on an (already existing) access-controlled web server would give some new interactivity without spinning up new uvicorn/reverse proxies/etc.

[dmadisetti]

If this export of the tutorials was reactive - would that solve your use case?

https://dmadisetti.github.io/quarto-marimo/intro.html

[astrowonk]

If this export of the tutorials was reactive - would that solve your use case?

https://dmadisetti.github.io/quarto-marimo/intro.html

I think … so? I mean the idea is to get WASM-goodness that is on marimo.app but self-hosted on any web server (plus being able to be import code from other python files in the same directory). I'd love to someday type marimo export notebook.py notebook_folder and copy that the resulting folder to a directory on my web site, and have a live interactive notebook.

[superlopuh]

Building on this, it would also be great to have a way to generate the wasm permalink programmatically, similarly to the marimo export html, just with the wasm version in the iframe.

[mscolnick]

You can do this without the marimo CLI. The link is just https://marimo.app/#code/{url_encoded_code}

url_encoded_code is URL escaped code which is just urllib.parse.quote(code, safe="~()*!.'")

but you will hit a 2mb limit that is imposed by your browsers (not the server)

[astrowonk]

You can do this without the marimo CLI. The link is just https://marimo.app/#code/{url_encoded_code}

url_encoded_code is URL escaped code which is just urllib.parse.quote(code, safe="~()*!.'")

but you will hit a 2mb limit that is imposed by your browsers (not the server)

Yes, that’s useful for some contexts, but I don’t want it to be limited to what can be encoded in a url. And I want to access other data locally (parquet, csv, sqlite, etc.)

[declann]

+1

Noticing a few limitations in the WebAssembly links:

• only includes notebook code: not accompanying files
• can't specify package dependencies: it does automatically install some detected packages, but it can't detect all of them (update: I can workaround by including installation commands via micropip - this might even be better?)

For many usecases though, the 2MB limit will be problematic anyways. So perhaps making it easy to store data in a Gist or other location and including a reference in the link would be something to consider.

Even though it won't always be suitable, it is really awesome to be able to share a link to a reactive Python notebook that doesn't need a running Python kernel, and can be embedded in webpages. This really puts Python up against Observable notebooks for example (in a way that Jupyterlite doesn't due to lacking reactivity - but all of these are nice projects!).

[mscolnick]

Hey @declann our Community Cloud has implemented a way to include additional files to get past the 2mb URL limit. We do this by storing your files/assets in a S3-compatible bucket, backed by authentication. We also support reading from a GitHub repo: we can read the notebook and all the files in a configurable directory from a public or private repo. You can create an account here for free: https://marimo.io/sign-up.

We'd like to make some of these components open source for others to use to publish on their own site, but that requires additional maintenance and support that we are not ready to handle at the moment. We do allow embedding these community cloud notebooks in an iframe which has worked great for blogs and tutorials.

[declann]

Thanks Mike!

[damienrj]

Will follow along, the would be a great way to improve upon our notebook sharing at work but is required to be self hosted (or via a github page)

[mscolnick]

Good news! This is now possible in marimo 0.10.0, here are the docs. (related PR).

# export as readonly, with code locked
marimo export html-wasm notebook.py -o output_dir --mode run
# export as an editable notebook
marimo export html-wasm notebook.py -o output_dir --mode edit

The exported HTML file will run your notebook using WebAssembly, making it completely self-contained and executable in the browser. This means users can interact with your notebook without needing Python or marimo installed.

Options:

• --mode: Choose between run (read-only) or edit (allows editing)
• --output: Directory to save the HTML and required assets