Streamlit Custom Components + Vite

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.

GitHub logo 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")
Enter fullscreen mode Exit fullscreen mode
  • 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
…
Enter fullscreen mode Exit fullscreen mode
View on GitHub
  1. Clone the component-template repo 
$ git clone https://github.com/streamlit/component-template.git
$ cd component-template
  1. 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.

19

Categories:

PythonVue

Tags:

PythonVueStreamlitVite