Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

HTML WASM stand-alone HTML page with CDN assets (no need to serve) #3667

Open
Lundez opened this issue Feb 3, 2025 · 0 comments
Open

HTML WASM stand-alone HTML page with CDN assets (no need to serve) #3667

Lundez opened this issue Feb 3, 2025 · 0 comments
Labels
enhancement New feature or request

Comments

@Lundez
Copy link

Lundez commented Feb 3, 2025 •
edited
Loading

Description

Hi!

I love that there's two great alternatives in exporting WASM runnable apps:

  1. Stand-alone HTML bundle that needs to be served
  2. Running script or B64-string on marimo.app

But comparing to stlite (which misses 1st option) they opted to implement HTML file export as a non-offline option where they utilize CDN to load JS parts.
I think this makes a clean HTML file, and a HTML file that doesn't need to be served. It's a great alternative to your existing 2 ones, as all have their use-case.
To me this would make "deploying simple team tools" a tad bit cleaner, by simply sharing a HTML file that contains all. People can open that HTML file without knowing Marimo and get ready to work. And no need to serve it.

See their HTML export (copied and reduced from edit.stlite.net:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>Stlite app</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/style.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
import { mount } from "https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.js"
mount(
  {
    requirements: [],
    entrypoint: "streamlit_app.py",
    files: {
"streamlit_app.py": `import streamlit as st

st.title("Stlite Sharing: Serverless Streamlit app platform")

col1, col2 = st.columns(2, vertical_alignment="center", gap="large")
with col1:
    st.image("data/logo.png", use_container_width=True)
with col2:
    st.image("https://streamlit.io/images/brand/streamlit-mark-color.svg", use_container_width=True)
""")

st.header("Streamlit Component Samples")
st.markdown("""
    All these features are working on your browser!
""")

name = st.text_input("Your name?")
st.write("Hello,", name or "world", "!")

value = st.slider("Value?")
st.write("The slider value is", value)
`,
"data/logo.png": Hu(<base_64_png_string>),
"pages/🎈_subpage.py": `import streamlit as st

st.title("Sub page")

st.markdown("""
_Stlite_ supports **Multi Page Apps (MPA)**, of course!

Create \`pages/*.py\` like this file to add new pages.

If you are new to MPA, read the official tutorial about it [🔗 here](https://docs.streamlit.io/library/get-started/multipage-apps)
""")
`,

},
  },
  document.getElementById("root")
)

function Hu(e){const t=window.atob(e),n=t.length,r=new Uint8Array(n);for(let i=0;i<n;i++)r[i]=t.charCodeAt(i);return r}
    </script>
  </body>
</html>

Suggested solution

Implement a secondary HTML export that exports a single HTML file that refers to CDN:s for JS.

This could be run using something like marimo export html-wasm app.py --single_file

Alternative

The current options aren't leaving us stranded, this would simply be an improvement 👍

Additional context

No response
@Lundez Lundez added the enhancement New feature or request label Feb 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Lundez