With vite you can build you streamlit custom components based on various frameworks supported by vite:
- vanilla JS
For all the choices listed above, you are able to also chose to use them with Typescript.
The initial steps is similar to the readme in the component-template repository.
Streamlit Component Templates
This repo contains templates and example code for creating Streamlit Components.
For complete information, please see the Streamlit Components documentation!
A Streamlit Component is made out of a Python API and a frontend (built using any web tech you prefer).
A Component can be used in any Streamlit app, can pass data between Python and frontend code, and and can optionally be distributed on PyPI for the rest of the world to use.
- Create a component's API in a single line of Python:
import streamlit.components.v1 as components # Declare the component: my_component = components.declare_component("my_component", path="frontend/build") # Use it: my_component(greeting="Hello", name="World")
- Clone the component-template repo
$ git clone https://github.com/streamlit/component-template.git $ cd component-template
- Create a new Python virtual environment for the template
# NOTE: the commands may differ (eg. python3 instead of python) # due to the way your python is installed, or your OS $ cd template $ python -m venv my_venv # create venv $ . my_venv/bin/activate # activate venv $ pip install streamlit # install streamlit
Once you are done, from here on, we start creating our custom components.