https://github.com/streamlit/component-template
Templates and example code for creating Streamlit Components
https://github.com/streamlit/component-template
streamlit
Last synced: about 2 months ago
JSON representation
Templates and example code for creating Streamlit Components
- Host: GitHub
- URL: https://github.com/streamlit/component-template
- Owner: streamlit
- License: apache-2.0
- Created: 2020-07-06T20:09:13.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-12-11T18:16:27.000Z (7 months ago)
- Last Synced: 2025-04-05T19:04:27.491Z (3 months ago)
- Topics: streamlit
- Language: Python
- Homepage: https://streamlit.io
- Size: 2.68 MB
- Stars: 492
- Watchers: 24
- Forks: 235
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
- jimsghstars - streamlit/component-template - Templates and example code for creating Streamlit Components (Python)
README
# Streamlit Component Templates
This repo contains templates and example code for creating [Streamlit](https://streamlit.io) Components.
For complete information, please see the [Streamlit Components documentation](https://docs.streamlit.io/en/latest/streamlit_components.html)!
## 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 can optionally be distributed on [PyPI](https://pypi.org/) for the rest of the world to use.
- Create a component's API in a single line of Python:
```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:
```tsx
import React from 'react';
import {
withStreamlitConnection,
ComponentProps,
} from 'streamlit-component-lib';
function MyComponent({ args }: ComponentProps) {
// Access arguments from Python via `props.args`:
const { greeting, name } = args;
return (
{greeting}, {name}!
);
}
export default withStreamlitConnection(MyComponent);
```
## Quickstart
- Ensure you have [Python 3.9+](https://www.python.org/downloads/), [Node.js](https://nodejs.org), and [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) installed.
- Clone this repo.
- Create a new Python virtual environment for the template:
```bash
$ cd template
$ python3 -m venv venv # create venv
$ . venv/bin/activate # activate venv
$ pip install streamlit # install streamlit
```
- Initialize and run the component template frontend:
```bash
$ cd template/my_component/frontend
$ npm install # Install npm dependencies
$ npm run start # Start the Vite dev server
```
- From a separate terminal, run the template's Streamlit app:
```bash
$ cd template
$ . venv/bin/activate # activate the venv you created earlier
$ pip install -e . # install template as editable package
$ streamlit run my_component/example.py # run the example
```
- If all goes well, you should see something like this:
- Modify the frontend code at `my_component/frontend/src/MyComponent.tsx`.
- Modify the Python code at `my_component/__init__.py`.
## Examples
See the `template-reactless` directory for a template that does not use [React](https://reactjs.org/).
See the `examples` directory for examples on working with pandas DataFrames, integrating with third-party libraries, and more.
## Community-provided Templates
These templates are provided by the community. If you run into any issues, please file your issues against their repositories.
- [streamlit-component-svelte-template](https://github.com/93degree/streamlit-component-svelte-template) - [@93degree](https://github.com/93degree)
- [streamlit-component-vue-vite-template](https://github.com/gabrieltempass/streamlit-component-vue-vite-template) - [@gabrieltempass](https://github.com/gabrieltempass)
- [streamlit-component-template-vue](https://github.com/andfanilo/streamlit-component-template-vue) - [@andfanilo](https://github.com/andfanilo)
- [streamlit-component-template-react-hooks](https://github.com/whitphx/streamlit-component-template-react-hooks) - [@whitphx](https://github.com/whitphx)
## Contributing
If you want to contribute to this project, `./dev.py` script will be helpful for you. For details, run `./dev.py --help`.
## More Information
- [Streamlit Components documentation](https://docs.streamlit.io/library/components)
- [Streamlit Forums](https://discuss.streamlit.io/tag/custom-components)
- [Streamlit Components gallery](https://www.streamlit.io/components)