@stlite/browser

@stlite/browser allows you to mount a Streamlit app on a static web page using a <script> tag.

Installation & Usage

You can use Stlite on your web page by loading the JavaScript and CSS files via <script> and <link> tags.

Using `<streamlit-app>` tag

The easiest way is using the <streamlit-app> custom element.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Stlite Demo - Custom Element</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.css" />
    <script type="module" src="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.js"></script>
  </head>
  <body>
    <streamlit-app>
import streamlit as st

st.title("Custom Element Test")

option = st.selectbox(
    'How would you like to be contacted?',
    ('Email', 'Home phone', 'Mobile phone'))

st.write('You selected:', option)
    </streamlit-app>
  </body>
</html>

Using `mount()` function

For more control, you can use the mount() function.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Stlite Demo - Basic Mount</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module">
      import { mount } from "https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.js";
      window.controller = mount(
        {
          entrypoint: "streamlit_app.py",
          files: {
            "streamlit_app.py": `
import streamlit as st

st.title("Stlite Browser Test")
name = st.text_input('Your name')
st.write("Hello,", name or "world")
`,
          },
        },
        document.getElementById("root"),
      );
    </script>
  </body>
</html>

Advanced Features

Multipage apps

You can create multipage apps by mounting multiple files, including an entrypoint and page files in a pages/ directory.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Stlite Demo - Multipage App</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.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(
        {
          entrypoint: "Hello.py",
          files: {
            "Hello.py": `
import streamlit as st

st.title("Main page")
st.write("Welcome to the multipage app demo!")
st.write("Use the sidebar to navigate between pages.")
`,
            "pages/1_Page1.py": `
import streamlit as st

st.title("Page 1")
st.write("This is the first page.")
`,
            "pages/2_Page2.py": `
import streamlit as st

st.title("Page 2")
st.write("This is the second page.")
`,
          },
        },
        document.getElementById("root"),
      );
    </script>
  </body>
</html>

Installing Packages

Use the requirements option to install Python packages.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Stlite Demo - Requirements</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.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: ["faker"],
          entrypoint: "streamlit_app.py",
          files: {
            "streamlit_app.py": `
import streamlit as st
from faker import Faker

# Set seed for deterministic output (useful for testing)
Faker.seed(12345)
fake = Faker()

st.title("Requirements Demo")
st.write("This demo shows how to install Python packages.")

st.subheader("Faker Examples")

st.write("Name: " + fake.name())
st.write("Email: " + fake.email())
st.write("Address: " + fake.address().replace("\\n", ", "))
st.write("Company: " + fake.company())
`,
          },
        },
        document.getElementById("root"),
      );
    </script>
  </body>
</html>

SharedWorker Mode

To reduce memory consumption when running multiple Stlite apps, enable SharedWorker mode.

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <title>Stlite Demo - SharedWorker</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/[email protected]/build/stlite.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(
        {
          sharedWorker: true,
          entrypoint: "streamlit_app.py",
          files: {
            "streamlit_app.py": `
import streamlit as st

st.title("SharedWorker Demo")
st.write("This app runs in SharedWorker mode.")
st.write("Multiple Stlite apps can share the same Python worker to reduce memory usage.")

if "count" not in st.session_state:
    st.session_state.count = 0

if st.button("Click me"):
    st.session_state.count += 1

st.write(f"Button clicked {st.session_state.count} {'time' if st.session_state.count == 1 else 'times'}")
`,
          },
        },
        document.getElementById("root"),
      );
    </script>
  </body>
</html>

API Reference

`mount(options, container)`

Mounts the Streamlit app to the given HTML container.

Parameters:

options: object | string
- If a string is provided, it is treated as the content of the streamlit_app.py file.
- If an object is provided, it must be a MountOptions object (see below).
container: HTMLElement (optional, default: document.body)
- The DOM element to mount the app into.

Returns:

A StliteController object with the following methods:

unmount(): Unmounts the app and disposes the kernel.
install(requirements): Installs additional packages.
writeFile(path, data, opts): Writes a file to the virtual filesystem.
readFile(path, opts): Reads a file from the virtual filesystem.
unlink(path): Deletes a file.
renameFile(oldPath, newPath): Renames a file.

`MountOptions`

Configuration object for mount().

Property	Type	Description
`entrypoint`	`string`	The file path of the main script (e.g., `"streamlit_app.py"`). Required if `files` is an object.
`files`	`Record<string, FileContent>`	An object mapping file paths to their content. Content can be a string, `Uint8Array`, or an object `{ url: string }`.
`requirements`	`string[]`	A list of Python packages to install at startup.
`streamlitConfig`	`Record<string, any>`	Streamlit configuration options (e.g., `{ "client.toolbarMode": "viewer" }`).
`archives`	`ArchiveObject[]`	List of archive files (e.g., zip) to download and unpack.
`pyodideUrl`	`string`	Custom URL for the Pyodide interpreter.
`sharedWorker`	`boolean`	Whether to use a SharedWorker.
`idbfsMountpoints`	`string[]`	List of paths to mount with IDBFS (IndexedDB-based persistent file system).