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

Python

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

Mount

Mount a custom component.

Python

my_component = st.components.v2.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 st.components.v1 import declare_component
declare_component(
    "custom_slider",
    "/frontend",
)

HTML

Display an HTML string in an iframe.

Python

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

iframe

Load a remote URL in an iframe.

Python

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

arrow_backPrevious: Connections and secrets arrow_forwardNext: component

forum

Still have questions?

Our forums are full of helpful information and Streamlit experts.