Custom components

Streamlit custom components extend your app beyond built-in widgets with custom UI elements. V2 components offer better performance and multiple callbacks without iframes, while V1 components run in iframes with single callbacks.

V2 custom components

Backend (Python)

Register

my_component = st.components.v2.component(
    html=HTML,
    js=JS
)
my_component()

Mount

Mount a custom component.

my_component = st.components.v2.component(
    html=HTML,
    js=JS
)
my_component()

Frontend (TypeScript)

npm support code

Support code published through npm.

npm i @streamlit/component-v2-lib

Component

Type alias for the component function.

import { Component } from "@streamlit/component-v2-lib";

ComponentArgs

Type alias for the component arguments.

import { ComponentArgs } from "@streamlit/component-v2-lib";

ComponentState

Type alias for the component state.

import { ComponentState } from "@streamlit/component-v2-lib";

OptionalComponentCleanupFunction

Type alias for the component cleanup function.

import { OptionalComponentCleanupFunction } from "@streamlit/component-v2-lib";

V1 custom components

Declare a component

Create and register a custom component.

from st.components.v1 import declare_component
declare_component(
    "custom_slider",
    "/frontend",
)

HTML

Display an HTML string in an iframe.

from st.components.v1 import html
html(
    "<p>Foo bar.</p>"
)

iframe

Load a remote URL in an iframe.

from st.components.v1 import iframe
iframe(
    "docs.streamlit.io"
)

arrow_backPrevious: Connections and secrets arrow_forwardNext: BidiComponentCallable

forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.