Why use vite?
With vite you can build you streamlit custom components based on various frameworks supported by vite:
- vue
- react
- vanilla JS
- preact
- svelte
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-template
Templates and example code for creating Streamlit Components
Streamlit Component Templates
This repo contains templates and example code for creating Streamlit Components.
For complete information, please see the Streamlit Components documentation!
Overview
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")
- Build the component's frontend out of HTML and JavaScript (or TypeScript, or ClojureScript, or whatever you fancy). React is supported, but not required:
class MyComponent…- 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.
Top comments (0)