@stlite/react

@stlite/react provides React bindings for running Streamlit entirely in the browser with Stlite. It connects the Pyodide-backed kernel to the Streamlit UI.

Installation

npm install @stlite/react

Usage

1. Configuration (Vite)

Update vite.config.ts to add the helper plugin so some assets are bundled correctly. Import stliteReactPlugin from @stlite/react/vite-plugin.

vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import stliteReactPlugin from "@stlite/react/vite-plugin";

export default defineConfig({
  plugins: [react(), stliteReactPlugin()],
});

2. Implementation

Create a kernel, pass the bundled wheel URLs, and render the app.

App.tsx

import React from "react";
import { createRoot } from "react-dom/client";
import { StliteAppWithToast, createKernel } from "@stlite/react";
import { wheelUrls } from "@stlite/react/vite-utils";
import "@stlite/react/stlite.css";

const kernel = createKernel({
  entrypoint: "streamlit_app.py",
  files: {
    "streamlit_app.py": {
      data: `
import streamlit as st

st.write("Hello from Stlite + React!")
`,
    },
  },
  archives: [],
  requirements: [],
  prebuiltPackageNames: [],
  wheelUrls,
});

createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <StliteAppWithToast kernel={kernel} />
    {/* <StliteApp kernel={kernel} /> // For non-toast version */}
  </React.StrictMode>,
);

Components

<StliteAppWithToast />

A wrapper around <StliteApp /> that includes toast notifications for:

• Loading progress
• Errors
• Module auto-loading

Props:

• kernel: StliteKernel - The kernel instance created with createKernel.
• disableProgressToasts: boolean (optional)
• disableErrorToasts: boolean (optional)
• disableModuleAutoLoadToasts: boolean (optional)

<StliteApp />

The core component that renders the Streamlit app UI. It does not show any toast notifications.

Props:

• kernel: StliteKernel - The kernel instance.

API Reference

createKernel(options)

Creates a new StliteKernel instance.

Options:

See the StliteKernelOptions in @stlite/browser documentation (conceptually similar, though typed strictly in TypeScript). The key difference is wheelUrls which should be imported from @stlite/react/vite-utils to ensure correct asset loading with Vite.