Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/whitphx/stlite/llms.txt

Use this file to discover all available pages before exploring further.

In this guide you will create a fully interactive Streamlit app that runs entirely in the browser — no Python installation, no server, and no build step. By the end you will have a single .html file you can open locally or host on any static file server.
1

Create an HTML file

Create a new file called app.html and add the standard HTML boilerplate. Load the Stlite JavaScript module and its companion stylesheet from the jsDelivr CDN using <script> and <link> tags:
<!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>My Stlite App</title>

    <!-- Stlite stylesheet -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.css"
    />

    <!-- Stlite JavaScript module -->
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.js"
    ></script>
  </head>
  <body>
    <!-- Your app goes here — see the next step -->
  </body>
</html>
The CDN URLs above are pinned to version 0.85.1. Stlite recommends using a pinned version rather than the unversioned latest URL, because the API may change between releases without backward compatibility.
2

Write your Streamlit app

Add a <streamlit-app> tag inside <body> and write your Python code directly inside it. Stlite automatically detects the tag and boots the Streamlit runtime:
<body>
  <streamlit-app>
    import streamlit as st

    name = st.text_input("Your name")
    st.write("Hello,", name or "world")
  </streamlit-app>
</body>
The content of the <streamlit-app> tag is treated as a Python script — exactly what you would put in a streamlit_app.py file. The full Streamlit API is available.
3

Open in browser

Save the file and open it directly in any modern web browser — no web server required:
  • macOS / Linux: double-click app.html in Finder / your file manager, or run open app.html in the terminal.
  • Windows: double-click app.html in Explorer.
  • Any platform: drag the file into an open browser window.
Stlite downloads the Pyodide WebAssembly runtime from the CDN on the first load (this may take a few seconds), then executes your Python script entirely in the browser. After the initial load, the app responds instantly without any network round-trips.
You can also host the file on GitHub Pages, Netlify, Vercel, or any other static hosting service — no server-side runtime is needed because all computation happens in the visitor’s browser.
4

Install packages (optional)

If your app needs third-party Python packages, add an <app-requirements> tag inside <streamlit-app>. Stlite installs the listed packages at startup via micropip before running your script:
<streamlit-app>
  <app-file name="streamlit_app.py" entrypoint>
    import streamlit as st
    import matplotlib.pyplot as plt
    import numpy as np

    size = st.slider("Sample size", 100, 1000)
    arr = np.random.normal(1, 1, size=size)
    fig, ax = plt.subplots()
    ax.hist(arr, bins=20)
    st.pyplot(fig)
  </app-file>

  <app-requirements>
    matplotlib
  </app-requirements>
</streamlit-app>
The <app-file> tag lets you name the file (here streamlit_app.py) and mark it as the entrypoint. The <app-requirements> tag lists one package per line — the same format as a requirements.txt file.
Only packages that are compatible with the Pyodide environment can be installed. Packages that include binary extensions (C, Rust, Fortran, etc.) must have been pre-compiled for Pyodide. See the Pyodide FAQ for details.

​
Full working example

Here is the complete HTML file from the steps above, combining all the pieces: 
<!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>My Stlite App</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.css"
    />
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.js"
    ></script>
  </head>
  <body>
    <streamlit-app>
      import streamlit as st

      name = st.text_input("Your name")
      st.write("Hello,", name or "world")
    </streamlit-app>
  </body>
</html>
Save this as app.html and open it in your browser. That’s it — a fully interactive Streamlit app with no server.

​
Next steps

@stlite/browser overview

Learn all the features of the @stlite/browser package: multipage apps, file mounting, IndexedDB persistence, and the SharedWorker mode.

mount() API reference

Use the lower-level mount() JavaScript function for fine-grained control: pass files, archives, config, and custom Pyodide distributions programmatically.

@stlite/react overview

Integrate Stlite into an existing React application using createKernel() and the <StliteAppWithToast> component.

Try Stlite Sharing

Experiment with Stlite in the browser-based online editor — no file needed.

Build docs developers (and LLMs) love

Get started for freeTalk to us