Streamlit Kit

Backend-free reuse of Streamlit's real frontend components. Author a single HTML file with <st-*> tags, open it in a browser, and Streamlit components render and work — no Python, no server, no websocket.

See VISION.md (architecture) and API.md (authoring model).

How it works

The vendored @streamlit/lib React components are used as-is. A thin "Local Host" stubs the three backend seams so they run offline:

• ScriptRunContext → a static provider (no rerun cycle)
• WidgetStateManager → local callbacks (widget change → signal, not a server rerun)
• protobuf element types → constructed on the client

Authoring uses structure in HTML + fine-grained signals (no whole-script rerun):

<st-slider id="score" label="Min score" min="0" max="100" value="75"></st-slider>
<st-metric id="count" label="Passing"></st-metric>
<script type="module">
  import { computed } from "/src/kit.ts"
  const rows = computed(() => DATA.filter(c => c.score >= score.value)) // auto-tracks
  count.value = computed(() => String(rows.value.length))               // reactive prop
</script>

Every <st-*> holds one persistent React root; reactive prop changes re-render in place (never unmount), so component state (dataframe sort/scroll, active tab) survives data updates.

Run

bun install
bun run gen:proto   # one-time: generate @streamlit/protobuf from references/streamlit
bun run dev         # http://127.0.0.1:5190 — the demo (index.html)

Requires the Streamlit clone at references/streamlit (source for vendoring + protobuf).

CDN package

The CDN build is published as an npm package root from dist-cdn, so jsDelivr URLs stay short and version-pinned:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/assets/streamlit-kit.css"
/>
<script type="module">
  import { computed, toast } from "https://cdn.jsdelivr.net/npm/[email protected]/kit.js"
</script>

bun run build:cdn     # build dist-cdn and write its package.json
bun run pack:cdn      # dry-run npm tarball
bun run publish:cdn   # npm publish ./dist-cdn --access public

Layout

vendor/protobuf/         generated @streamlit/protobuf (proto.js/.d.ts + index)
vendor/streamlit-lib/    vendored frontend/lib source (+ slim @streamlit/lib shim)
vendor/streamlit-utils/  vendored frontend/utils source
src/
  reactive.ts            signal/computed/effect (Preact-signals-backed)
  host/                  providers, LocalWidgetStateManager, arrow bridge
  elements/              <st-*> custom elements (define.ts factory + adapters)
  kit.ts / kit.css       entry + layout chrome
index.html                 self-contained demo dashboard; imports src/kit.ts

Components

Layout: st-app st-sidebar st-columns/st-column st-tabs/st-tab st-expander st-status Text: st-title st-header st-subheader st-caption st-markdown st-text st-code Data: st-metric st-dataframe st-table st-json st-progress st-info/st-success/st-warning/st-error Charts: st-line-chart st-area-chart st-bar-chart st-scatter-chart st-altair-chart st-plotly-chart Widgets: st-slider st-checkbox st-toggle st-selectbox st-radio st-multiselect st-text-input st-number-input

Not yet ported: st-map (needs the deck.gl/maplibre stack — deferred). st.mermaid is not a real Streamlit lib component.