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

Register a custom component.

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

Mount

Mount a custom component.

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

Frontend (TypeScript)

npm support code

Support code published through npm.

Terminal
npm i @streamlit/component-v2-lib

FrontendRenderer

Type alias for the component function.

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

FrontendRendererArgs

Type alias for the component arguments.

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

FrontendState

Type alias for the component state.

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

CleanupFunction

Type alias for the component cleanup function.

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

V1 custom components

Declare a component

Create and register a custom component.

Python
from streamlit.components.v1 import declare_component
declare_component(
    "custom_slider",
    "/frontend",
)
delete

This command was deprecated in version 1.56.0. Use st.iframe instead, or st.html to insert HTML without an iframe.

HTML

Display an HTML string in an iframe.

Python
from streamlit.components.v1 import html
html(
    "<p>Foo bar.</p>"
)
delete

This command was deprecated in version 1.56.0. Use st.iframe instead.

iframe

Load a remote URL in an iframe.

Python
from streamlit.components.v1 import iframe
iframe(
    "https://docs.streamlit.io"
)
arrow_backPrevious: Connections and secretsarrow_forwardNext: component
forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.