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

…

View on GitHub

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