component-template

Streamlit Component Templates

Streamlit Component Templates is a repository designed to help developers create custom components for Streamlit applications. This guide provides the essential tools and code templates required to craft both the backend and frontend portions of Streamlit Components.

Overview

Streamlit Components allow developers to expand the functionalities of their Streamlit apps by integrating a customized Python API with a frontend built using web technologies of their choice. The components can seamlessly transfer data between the Python environment and the browser, providing a bridge for more interactive and dynamic web applications. Additionally, these components can be packaged and shared via the Python Package Index (PyPI), allowing others to leverage these custom tools in their projects.

Creating a Streamlit Component:

• Python API: Developers can declare and utilize a Streamlit Component with a straightforward line of Python code.

  import streamlit.components.v1 as components
  
  my_component = components.declare_component("my_component", path="frontend/build")
  my_component(greeting="Hello", name="World")
  

• Frontend: The frontend can be developed using any preferred web technology, such as HTML, JavaScript, TypeScript, or ClojureScript. While React is a supported framework, it's not obligatory.

  class MyComponent extends StreamlitComponentBase {
      public render(): ReactNode {
          const greeting = this.props.args["greeting"];
          const name = this.props.args["name"];
          return <div>{greeting}, {name}!</div>;
      }
  }
  

Quickstart

To kickstart the development process, make sure you have Python 3.6+, Node.js, and npm installed on your machine. Here's a step-by-step guide:

1. Clone the Streamlit Component Templates repository.
2. Create a new Python virtual environment to house your template.

   cd template
   python3 -m venv venv  # Create a virtual environment
   . venv/bin/activate   # Activate the virtual environment
   pip install streamlit # Install Streamlit
   

3. Set up the frontend of the component by navigating to the appropriate directory and starting the development server.

   cd template/my_component/frontend
   npm install    # Install npm dependencies
   npm run start  # Start the Webpack dev server
   

4. From a different terminal, activate your virtual environment again and run the Streamlit app to see your component in action.

   cd template
   . venv/bin/activate  # Reactivate the virtual environment
   pip install -e .     # Install the template as an editable package
   streamlit run my_component/example.py  # Run the example app
   

Upon successful setup, you should see the component rendering correctly in a browser window, confirming your development environment is set up correctly.

Examples and Additional Templates

For those starting off, the repository also includes several examples:

• Check the template-reactless directory for a version that does not utilize React.
• Explore the examples directory for working with data, third-party integrations, and other advanced use cases.

Moreover, the community has thoughtfully provided additional templates:

• Streamlit Component Svelte Template
• Streamlit Component Vue Vite Template
• Streamlit Component Template Vue
• Streamlit Component Template React Hooks

Contributing

Interested in contributing? The project includes a helpful script named ./dev.py to ease development. You can find more details by running ./dev.py --help.

Additional Resources

For more information about creating and using Streamlit Components, the following resources are invaluable:

• Streamlit Components documentation
• Engage with the community through the Streamlit Forums
• Explore additional components via the Streamlit Components gallery

By leveraging the Streamlit Component Templates, developers can significantly enhance the interactive capabilities of their applications, offering a richer user experience tailored to specific needs.